@particle-academy/react-fancy 4.4.7 → 4.6.0

package/dist/index.cjs

@@ -3079,6 +3079,68 @@ function InputWrapper({
     hasInsideSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-zinc-400 dark:text-zinc-500", children: suffix })
   ] });
 }
+var FieldModeContext = react.createContext(null);
+function useFieldMode(explicit) {
+  const ctx = react.useContext(FieldModeContext);
+  return explicit ?? ctx?.mode ?? "edit";
+}
+function isEmpty(value) {
+  return value === null || value === void 0 || value === "";
+}
+function DisplayValue({
+  children,
+  size = "md",
+  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__ */ jsxRuntime.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
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 dark:text-zinc-500", children: leading }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: empties ? empty : children }),
+        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 dark:text-zinc-500", children: trailing })
+      ]
+    }
+  );
+}
+function useInlineEdit(mode, disabled) {
+  const [editing, setEditing] = react.useState(false);
+  const interactive = mode === "view" && !disabled;
+  const showControl = mode !== "view" || interactive && editing;
+  const enterEdit = react.useCallback(() => {
+    if (interactive) setEditing(true);
+  }, [interactive]);
+  const exitEdit = react.useCallback(() => setEditing(false), []);
+  return { showControl, interactive, enterEdit, exitEdit };
+}
 var Input = react.forwardRef(
   ({
     type = "text",
@@ -3097,13 +3159,26 @@ var Input = react.forwardRef(
     suffix,
     prefixPosition,
     suffixPosition,
+    mode,
     onValueChange,
     onChange,
     ...props
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
-    const input = /* @__PURE__ */ jsxRuntime.jsx(
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const input = !showControl ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       InputWrapper,
       {
         prefix,
@@ -3135,7 +3210,12 @@ var Input = react.forwardRef(
                 onChange?.(e);
                 onValueChange?.(e.target.value);
               },
-              ...props
+              ...props,
+              autoFocus: interactive || props.autoFocus,
+              onBlur: (e) => {
+                props.onBlur?.(e);
+                if (interactive) exitEdit();
+              }
             }
           ),
           trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
@@ -3178,6 +3258,7 @@ var Textarea = react.forwardRef(
     suffix,
     prefixPosition: _prefixPosition,
     suffixPosition: _suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3187,6 +3268,8 @@ var Textarea = react.forwardRef(
     const autoId = react.useId();
     const textareaId = id ?? autoId;
     const internalRef = react.useRef(null);
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     react.useEffect(() => {
       const el = internalRef.current;
       if (!autoResize || !el) return;
@@ -3196,7 +3279,16 @@ var Textarea = react.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 = /* @__PURE__ */ jsxRuntime.jsx(
+    const textarea = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
+      DisplayValue,
+      {
+        size,
+        className: "whitespace-pre-wrap",
+        interactive,
+        onActivate: enterEdit,
+        children: value ?? defaultValue
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       InputWrapper,
       {
         prefix,
@@ -3235,7 +3327,12 @@ var Textarea = react.forwardRef(
               onChange?.(e);
               onValueChange?.(e.target.value);
             },
-            ...props
+            ...props,
+            autoFocus: interactive || props.autoFocus,
+            onBlur: (e) => {
+              props.onBlur?.(e);
+              if (interactive) exitEdit();
+            }
           }
         )
       }
@@ -3468,6 +3565,7 @@ var NativeSelect = react.forwardRef(
     suffix,
     prefixPosition,
     suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3476,6 +3574,38 @@ var NativeSelect = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const selectId = id ?? autoId;
+    const resolvedMode = useFieldMode(mode);
+    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__ */ jsxRuntime.jsx(
+        DisplayValue,
+        {
+          size,
+          leading: prefix,
+          trailing: suffix,
+          interactive,
+          onActivate: enterEdit,
+          children: opt?.label ?? current
+        }
+      );
+      if (label || error || description) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Field,
+          {
+            label,
+            description,
+            error,
+            required,
+            htmlFor: selectId,
+            size,
+            children: display
+          }
+        );
+      }
+      return display;
+    }
     const isControlled = value !== void 0;
     const resolvedDefault = !isControlled && defaultValue === void 0 && placeholder ? "" : defaultValue;
     const select = /* @__PURE__ */ jsxRuntime.jsx(
@@ -3510,6 +3640,11 @@ var NativeSelect = react.forwardRef(
             },
             ...props,
             ...isControlled ? { value } : { defaultValue: resolvedDefault },
+            autoFocus: interactive || props.autoFocus,
+            onBlur: (e) => {
+              props.onBlur?.(e);
+              if (interactive) exitEdit();
+            },
             children: [
               placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
               list.map(
@@ -3564,11 +3699,14 @@ var ListboxSelect = react.forwardRef(
     createLabel = "Create",
     selectedSuffix = "selected",
     indicator = "check",
+    mode,
     value: controlledSingleValue,
     defaultValue: defaultSingleValue
   }, _ref) => {
     const autoId = react.useId();
     const selectId = id ?? autoId;
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const textInputEnabled = searchable || creatable;
     const [open, setOpen] = react.useState(false);
     const [search2, setSearch] = react.useState("");
@@ -3695,6 +3833,27 @@ var ListboxSelect = react.forwardRef(
         }
       }
     };
+    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__ */ jsxRuntime.jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: labels.join(", ") });
+      if (label || error || description) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Field,
+          {
+            label,
+            description,
+            error,
+            required,
+            htmlFor: selectId,
+            size,
+            children: display
+          }
+        );
+      }
+      return display;
+    }
     const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -3702,6 +3861,7 @@ var ListboxSelect = react.forwardRef(
         type: "button",
         id: selectId,
         disabled,
+        autoFocus: interactive,
         onClick: () => setOpen((o) => !o),
         onKeyDown: handleKeyDown,
         role: "combobox",
@@ -3823,10 +3983,21 @@ var ListboxSelect = react.forwardRef(
         ]
       }
     ) });
-    const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      trigger,
-      dropdown
-    ] });
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative",
+        onBlur: (e) => {
+          if (interactive && !open && !e.currentTarget.contains(e.relatedTarget)) {
+            exitEdit();
+          }
+        },
+        children: [
+          trigger,
+          dropdown
+        ]
+      }
+    );
     if (label || error || description) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Field,
@@ -3870,11 +4041,14 @@ var Checkbox = react.forwardRef(
     checked: controlledChecked,
     defaultChecked = false,
     onCheckedChange,
-    indeterminate
+    indeterminate,
+    mode
   }, ref) => {
     const autoId = react.useId();
     const checkboxId = id ?? autoId;
     const internalRef = react.useRef(null);
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -3893,8 +4067,32 @@ var Checkbox = react.forwardRef(
       lg: "h-5 w-5",
       xl: "h-6 w-6"
     }[size];
+    const glyph = indeterminate ? "\u2014" : checked ? "\u2713" : "\u2715";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      !showControl ? /* @__PURE__ */ jsxRuntime.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,
+            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": interactive ? void 0 : "true",
+          children: glyph
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           ref: (node) => {
@@ -3911,6 +4109,10 @@ var Checkbox = react.forwardRef(
           disabled,
           required,
           checked,
+          autoFocus: interactive,
+          onBlur: () => {
+            if (interactive) exitEdit();
+          },
           onChange: (e) => setChecked(e.target.checked),
           className: cn(
             sizeClasses6,
@@ -3956,9 +4158,12 @@ function CheckboxGroup({
   value: controlledValue,
   defaultValue = [],
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = react.useId();
+  const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -3975,10 +4180,13 @@ function CheckboxGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
+  const content = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsxRuntime.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",
@@ -3998,6 +4206,7 @@ function CheckboxGroup({
               value: String(resolved.value),
               checked: isChecked,
               disabled: disabled || resolved.disabled,
+              autoFocus: interactive && index === 0,
               onChange: () => handleToggle(resolved.value),
               className: cn(
                 sizeClasses6,
@@ -4055,10 +4264,13 @@ function RadioGroup({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = react.useId();
   const radioName = name ?? groupId;
+  const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -4071,11 +4283,15 @@ function RadioGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
+  const selectedIndex = list.map(resolveOption).findIndex((o) => o.value === value);
+  const content = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.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",
@@ -4085,6 +4301,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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -4095,6 +4312,7 @@ function RadioGroup({
               value: String(resolved.value),
               checked: isSelected,
               disabled: disabled || resolved.disabled,
+              autoFocus: shouldAutoFocus,
               onChange: () => setValue(resolved.value),
               className: cn(
                 sizeClasses6,
@@ -4179,10 +4397,13 @@ var Switch = react.forwardRef(
     checked: controlledChecked,
     defaultChecked = false,
     onCheckedChange,
-    color = "blue"
+    color = "blue",
+    mode
   }, ref) => {
     const autoId = react.useId();
     const switchId = id ?? autoId;
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -4210,7 +4431,28 @@ var Switch = react.forwardRef(
       xl: "translate-x-6"
     }[size];
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      !showControl ? /* @__PURE__ */ jsxRuntime.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(
+            "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__ */ jsxRuntime.jsx(
         "button",
         {
           ref,
@@ -4219,6 +4461,10 @@ var Switch = react.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",
@@ -4324,15 +4570,27 @@ var SingleSlider = react.forwardRef(
     marks,
     prefix,
     suffix,
+    mode,
     ...rest
   }, 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 = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
+    const slider = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: `${prefix ?? ""}${value}${suffix ?? ""}`
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -4346,6 +4604,10 @@ var SingleSlider = react.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",
@@ -4394,9 +4656,12 @@ var RangeSlider = react.forwardRef(
     marks,
     prefix,
     suffix,
+    mode,
     ...rest
   }, 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],
@@ -4410,61 +4675,81 @@ var RangeSlider = react.forwardRef(
     };
     const leftPercent = (value[0] - min) / (max - min) * 100;
     const rightPercent = (value[1] - min) / (max - min) * 100;
-    const slider = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-6" })
-        ] }),
-        showValue && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SliderMarks, { marks, min, max })
-    ] });
+    const slider = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: `${prefix ?? ""}${value[0]}${suffix ?? ""}\u2013${prefix ?? ""}${value[1]}${suffix ?? ""}`
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-6" })
+            ] }),
+            showValue && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SliderMarks, { marks, min, max })
+        ]
+      }
+    );
     if (label || error || description) {
       return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, description, error, required, htmlFor: id, size, children: slider });
     }
@@ -4512,10 +4797,13 @@ function MultiSwitch({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  linear
+  linear,
+  mode
 }) {
   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 = react.useRef(null);
   const itemRefs = react.useRef([]);
@@ -4540,13 +4828,16 @@ function MultiSwitch({
   react.useEffect(() => {
     updateIndicator();
   }, [updateIndicator]);
-  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+  const control = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.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",
@@ -4574,6 +4865,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;
@@ -4603,6 +4895,22 @@ function MultiSwitch({
   return control;
 }
 MultiSwitch.displayName = "MultiSwitch";
+function formatDateValue(iso, includeTime) {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return includeTime ? date.toLocaleString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  }) : date.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
 var DatePicker = react.forwardRef(
   (props, ref) => {
     const {
@@ -4669,17 +4977,30 @@ var SingleDatePicker = react.forwardRef(
     name,
     min,
     max,
+    includeTime,
+    mode,
     inputType,
     inputClasses,
     ...rest
   }, 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 = /* @__PURE__ */ jsxRuntime.jsx(
+    const input = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: formatDateValue(value, includeTime)
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         "data-react-fancy-date-picker": "",
@@ -4693,7 +5014,11 @@ var SingleDatePicker = react.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) {
@@ -4727,48 +5052,72 @@ var RangeDatePicker = react.forwardRef(
     name,
     min,
     max,
+    includeTime,
+    mode,
     inputType,
     inputClasses,
     ...rest
   }, 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 = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-date-picker": "", className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "to" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: value[0] || value[1] ? `${formatDateValue(value[0], includeTime)} \u2013 ${formatDateValue(value[1], includeTime)}` : ""
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "to" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         Field,
@@ -4787,6 +5136,13 @@ var RangeDatePicker = react.forwardRef(
   }
 );
 RangeDatePicker.displayName = "RangeDatePicker";
+function FormProvider({ mode = "edit", children }) {
+  const value = react.useMemo(() => ({ mode }), [mode]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldModeContext.Provider, { value, children });
+}
+function Form({ mode, children, ...formProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { mode, children: /* @__PURE__ */ jsxRuntime.jsx("form", { "data-react-fancy-form": "", ...formProps, children }) });
+}
 var CarouselContext = react.createContext(null);
 CarouselContext.displayName = "CarouselContext";
 function useCarousel() {
@@ -5126,13 +5482,16 @@ var ColorPicker = react.forwardRef(
     size = "md",
     variant = "outline",
     disabled = false,
-    className
+    className,
+    mode
   }, ref) => {
     const [color, setColor] = useControllableState(
       value,
       defaultValue,
       onChange
     );
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const inputRef = react.useRef(null);
     const datalistId = react.useId();
     const handleChange = (e) => {
@@ -5143,18 +5502,72 @@ var ColorPicker = react.forwardRef(
         inputRef.current?.click();
       }
     };
+    if (!showControl) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-color-picker": "",
+          "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(
+            "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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 rounded-full",
+                  SWATCH_SIZES[size],
+                  variant === "outline" && "ring-1 ring-zinc-300 dark:ring-zinc-600"
+                ),
+                style: { backgroundColor: color },
+                "aria-label": `Color: ${color}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "select-all font-mono uppercase",
+                  TEXT_SIZES[size],
+                  "text-zinc-700 dark:text-zinc-300"
+                ),
+                children: color.toUpperCase()
+              }
+            )
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         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__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               disabled,
+              autoFocus: interactive,
               onClick: handleSwatchClick,
               className: cn(
                 "relative shrink-0 rounded-full transition-shadow",
@@ -6032,6 +6445,14 @@ var Badge = react.forwardRef(
   }
 );
 Badge.displayName = "Badge";
+var glowColors = {
+  on: "#a855f7",
+  // violet — neutral
+  xp: "#22c55e",
+  // green
+  achievement: "#f59e0b"
+  // amber
+};
 var containerSizeClasses = {
   xs: "h-6 w-6",
   sm: "h-8 w-8",
@@ -6066,8 +6487,10 @@ var Avatar = react.forwardRef(
     fallback,
     size = "md",
     status,
+    glow,
     className
   }, ref) => {
+    const glowKey = glow === true ? "on" : glow || null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -6080,6 +6503,15 @@ var Avatar = react.forwardRef(
           className
         ),
         children: [
+          glowKey && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-react-fancy-avatar-glow": glowKey,
+              className: "fancy-avatar-glow",
+              style: { "--fancy-glow": glowColors[glowKey] }
+            }
+          ),
           src ? /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
@@ -8870,13 +9302,16 @@ var Autocomplete = react.forwardRef(
     loading = false,
     emptyMessage = "No results found.",
     disabled = false,
-    className
+    className,
+    mode
   }, ref) {
     const [value, setValue] = useControllableState(
       controlledValue,
       defaultValue,
       onChange
     );
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [query, setQuery] = react.useState(value);
     const [open, setOpen] = react.useState(false);
     const [activeIndex, setActiveIndex] = react.useState(-1);
@@ -8929,63 +9364,105 @@ var Autocomplete = react.forwardRef(
         if (item && !item.disabled) select(item.value);
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-autocomplete": "", ref: wrapperRef, className: cn("relative", className), children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    if (!showControl) {
+      const matched = options.find((o) => o.value === value);
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "Loading..." }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: emptyMessage }) : filtered.map((option, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(HighlightMatch, { text: option.label, query })
-            },
-            option.value
-          ))
+          "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__ */ jsxRuntime.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__ */ jsxRuntime.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,
+              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__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "Loading..." }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: emptyMessage }) : filtered.map((option, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(HighlightMatch, { text: option.label, query })
+                },
+                option.value
+              ))
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 function HighlightMatch({ text, query }) {
@@ -9101,13 +9578,16 @@ var OtpInput = react.forwardRef(
     onChange,
     disabled = false,
     autoFocus = false,
-    className
+    className,
+    mode
   }, ref) {
     const [value, setValue] = useControllableState(
       controlledValue,
       "",
       onChange
     );
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const inputsRef = react.useRef([]);
     const focusInput = react.useCallback(
       (index) => {
@@ -9161,27 +9641,64 @@ var OtpInput = react.forwardRef(
       },
       [length, setValue, focusInput]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-otp-input": "", ref, className: cn("flex gap-2", className), children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
+    if (!showControl) {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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";
@@ -9375,16 +9892,46 @@ var TimePicker = react.forwardRef(
     format = "12h",
     minuteStep = 1,
     disabled = false,
-    className
+    className,
+    mode
   }, ref) {
     const [value, setValue] = useControllableState(
       controlledValue,
       defaultValue,
       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 (!showControl) {
+      const formatted = format === "12h" ? `${pad(displayHour)}:${pad(minutes)} ${isPM ? "PM" : "AM"}` : `${pad(displayHour)}:${pad(minutes)}`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "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
+        }
+      );
+    }
     const updateTime = react.useCallback(
       (hours, mins) => {
         setValue(`${pad(hours)}:${pad(mins)}`);
@@ -9415,6 +9962,9 @@ var TimePicker = react.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",
@@ -9422,7 +9972,7 @@ var TimePicker = react.forwardRef(
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", autoFocus: interactive, onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14 }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: displayClass, children: pad(displayHour) }),
             /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => changeHour(-1), disabled, className: spinBtnClass, "aria-label": "Decrease hour", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 }) })
           ] }),
@@ -13730,6 +14280,7 @@ exports.Composer = Composer;
 exports.ContentRenderer = ContentRenderer;
 exports.ContextMenu = ContextMenu;
 exports.DatePicker = DatePicker;
+exports.DisplayValue = DisplayValue;
 exports.Dropdown = Dropdown;
 exports.EMOJI_CATEGORY_ORDER = EMOJI_CATEGORY_ORDER;
 exports.EMOJI_DATA = EMOJI_DATA;
@@ -13739,7 +14290,10 @@ exports.Emoji = Emoji;
 exports.EmojiSelect = EmojiSelect;
 exports.FauxClient = FauxClient;
 exports.Field = Field;
+exports.FieldModeContext = FieldModeContext;
 exports.FileUpload = FileUpload;
+exports.Form = Form;
+exports.FormProvider = FormProvider;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.Input = Input;
@@ -13809,6 +14363,7 @@ exports.useControllableState = useControllableState;
 exports.useDropdown = useDropdown;
 exports.useEditor = useEditor;
 exports.useEscapeKey = useEscapeKey;
+exports.useFieldMode = useFieldMode;
 exports.useFileUpload = useFileUpload;
 exports.useFloatingPosition = useFloatingPosition;
 exports.useFocusTrap = useFocusTrap;