@particle-academy/react-fancy 4.4.7 → 4.6.0

package/dist/index.js

@@ -3077,6 +3077,68 @@ function InputWrapper({
     hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-zinc-400 dark:text-zinc-500", children: suffix })
   ] });
 }
+var FieldModeContext = createContext(null);
+function useFieldMode(explicit) {
+  const ctx = 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__ */ 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__ */ jsx("span", { className: "text-zinc-400 dark:text-zinc-500", children: leading }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: empties ? empty : children }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "text-zinc-400 dark:text-zinc-500", children: trailing })
+      ]
+    }
+  );
+}
+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",
@@ -3095,13 +3157,26 @@ var Input = forwardRef(
     suffix,
     prefixPosition,
     suffixPosition,
+    mode,
     onValueChange,
     onChange,
     ...props
   }, ref) => {
     const autoId = useId();
     const inputId = id ?? autoId;
-    const input = /* @__PURE__ */ jsx(
+    const resolvedMode = useFieldMode(mode);
+    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,
@@ -3133,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 })
@@ -3176,6 +3256,7 @@ var Textarea = forwardRef(
     suffix,
     prefixPosition: _prefixPosition,
     suffixPosition: _suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3185,6 +3266,8 @@ var Textarea = forwardRef(
     const autoId = useId();
     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;
@@ -3194,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 = /* @__PURE__ */ jsx(
+    const textarea = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className: "whitespace-pre-wrap",
+        interactive,
+        onActivate: enterEdit,
+        children: value ?? defaultValue
+      }
+    ) : /* @__PURE__ */ jsx(
       InputWrapper,
       {
         prefix,
@@ -3233,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();
+            }
           }
         )
       }
@@ -3466,6 +3563,7 @@ var NativeSelect = forwardRef(
     suffix,
     prefixPosition,
     suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3474,6 +3572,38 @@ var NativeSelect = forwardRef(
   }, ref) => {
     const autoId = 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__ */ jsx(
+        DisplayValue,
+        {
+          size,
+          leading: prefix,
+          trailing: suffix,
+          interactive,
+          onActivate: enterEdit,
+          children: opt?.label ?? current
+        }
+      );
+      if (label || error || description) {
+        return /* @__PURE__ */ 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__ */ jsx(
@@ -3508,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(
@@ -3562,11 +3697,14 @@ var ListboxSelect = forwardRef(
     createLabel = "Create",
     selectedSuffix = "selected",
     indicator = "check",
+    mode,
     value: controlledSingleValue,
     defaultValue: defaultSingleValue
   }, _ref) => {
     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("");
@@ -3693,6 +3831,27 @@ var ListboxSelect = 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__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: labels.join(", ") });
+      if (label || error || description) {
+        return /* @__PURE__ */ jsx(
+          Field,
+          {
+            label,
+            description,
+            error,
+            required,
+            htmlFor: selectId,
+            size,
+            children: display
+          }
+        );
+      }
+      return display;
+    }
     const trigger = /* @__PURE__ */ jsxs(
       "button",
       {
@@ -3700,6 +3859,7 @@ var ListboxSelect = forwardRef(
         type: "button",
         id: selectId,
         disabled,
+        autoFocus: interactive,
         onClick: () => setOpen((o) => !o),
         onKeyDown: handleKeyDown,
         role: "combobox",
@@ -3821,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,
@@ -3868,11 +4039,14 @@ var Checkbox = forwardRef(
     checked: controlledChecked,
     defaultChecked = false,
     onCheckedChange,
-    indeterminate
+    indeterminate,
+    mode
   }, ref) => {
     const autoId = useId();
     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,
@@ -3891,8 +4065,32 @@ var Checkbox = forwardRef(
       lg: "h-5 w-5",
       xl: "h-6 w-6"
     }[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: [
-      /* @__PURE__ */ jsx("div", { className: "relative flex items-center", children: /* @__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,
+            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__ */ jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx(
         "input",
         {
           ref: (node) => {
@@ -3909,6 +4107,10 @@ var Checkbox = forwardRef(
           disabled,
           required,
           checked,
+          autoFocus: interactive,
+          onBlur: () => {
+            if (interactive) exitEdit();
+          },
           onChange: (e) => setChecked(e.target.checked),
           className: cn(
             sizeClasses6,
@@ -3954,9 +4156,12 @@ function CheckboxGroup({
   value: controlledValue,
   defaultValue = [],
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = useId();
+  const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -3973,10 +4178,13 @@ function CheckboxGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__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",
@@ -3996,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,
@@ -4053,10 +4262,13 @@ function RadioGroup({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   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,
@@ -4069,11 +4281,15 @@ function RadioGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__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",
@@ -4083,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",
@@ -4093,6 +4310,7 @@ function RadioGroup({
               value: String(resolved.value),
               checked: isSelected,
               disabled: disabled || resolved.disabled,
+              autoFocus: shouldAutoFocus,
               onChange: () => setValue(resolved.value),
               className: cn(
                 sizeClasses6,
@@ -4177,10 +4395,13 @@ var Switch = forwardRef(
     checked: controlledChecked,
     defaultChecked = false,
     onCheckedChange,
-    color = "blue"
+    color = "blue",
+    mode
   }, ref) => {
     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,
@@ -4208,7 +4429,28 @@ 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: [
-      /* @__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(
+            "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(
         "button",
         {
           ref,
@@ -4217,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",
@@ -4322,15 +4568,27 @@ var SingleSlider = 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__ */ 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",
@@ -4344,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",
@@ -4392,9 +4654,12 @@ var RangeSlider = 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],
@@ -4408,61 +4673,81 @@ var RangeSlider = forwardRef(
     };
     const leftPercent = (value[0] - min) / (max - min) * 100;
     const rightPercent = (value[1] - min) / (max - min) * 100;
-    const slider = /* @__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 });
     }
@@ -4510,10 +4795,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 = useRef(null);
   const itemRefs = useRef([]);
@@ -4538,13 +4826,16 @@ function MultiSwitch({
   useEffect(() => {
     updateIndicator();
   }, [updateIndicator]);
-  const control = /* @__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",
@@ -4572,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;
@@ -4601,6 +4893,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 = forwardRef(
   (props, ref) => {
     const {
@@ -4667,17 +4975,30 @@ var SingleDatePicker = 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__ */ jsx(
+    const input = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: formatDateValue(value, includeTime)
+      }
+    ) : /* @__PURE__ */ jsx(
       "input",
       {
         "data-react-fancy-date-picker": "",
@@ -4691,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) {
@@ -4725,48 +5050,72 @@ var RangeDatePicker = 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__ */ 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,
@@ -4785,6 +5134,13 @@ var RangeDatePicker = forwardRef(
   }
 );
 RangeDatePicker.displayName = "RangeDatePicker";
+function FormProvider({ mode = "edit", children }) {
+  const value = useMemo(() => ({ mode }), [mode]);
+  return /* @__PURE__ */ jsx(FieldModeContext.Provider, { value, children });
+}
+function Form({ mode, children, ...formProps }) {
+  return /* @__PURE__ */ jsx(FormProvider, { mode, children: /* @__PURE__ */ jsx("form", { "data-react-fancy-form": "", ...formProps, children }) });
+}
 var CarouselContext = createContext(null);
 CarouselContext.displayName = "CarouselContext";
 function useCarousel() {
@@ -5124,13 +5480,16 @@ var ColorPicker = 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 = useRef(null);
     const datalistId = useId();
     const handleChange = (e) => {
@@ -5141,18 +5500,72 @@ var ColorPicker = forwardRef(
         inputRef.current?.click();
       }
     };
+    if (!showControl) {
+      return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "select-all font-mono uppercase",
+                  TEXT_SIZES[size],
+                  "text-zinc-700 dark:text-zinc-300"
+                ),
+                children: color.toUpperCase()
+              }
+            )
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ 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__ */ jsx(
             "button",
             {
               type: "button",
               disabled,
+              autoFocus: interactive,
               onClick: handleSwatchClick,
               className: cn(
                 "relative shrink-0 rounded-full transition-shadow",
@@ -6030,6 +6443,14 @@ var Badge = 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",
@@ -6064,8 +6485,10 @@ var Avatar = forwardRef(
     fallback,
     size = "md",
     status,
+    glow,
     className
   }, ref) => {
+    const glowKey = glow === true ? "on" : glow || null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -6078,6 +6501,15 @@ var Avatar = forwardRef(
           className
         ),
         children: [
+          glowKey && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-react-fancy-avatar-glow": glowKey,
+              className: "fancy-avatar-glow",
+              style: { "--fancy-glow": glowColors[glowKey] }
+            }
+          ),
           src ? /* @__PURE__ */ jsx(
             "img",
             {
@@ -8868,13 +9300,16 @@ var Autocomplete = 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] = useState(value);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -8927,63 +9362,105 @@ var Autocomplete = forwardRef(
         if (item && !item.disabled) select(item.value);
       }
     };
-    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(
+    if (!showControl) {
+      const matched = options.find((o) => o.value === value);
+      return /* @__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
-          ))
+          "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),
+        onBlur: (e) => {
+          if (interactive && !open && !e.currentTarget.contains(e.relatedTarget)) {
+            exitEdit();
+          }
+        },
+        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,
+              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 }) {
@@ -9099,13 +9576,16 @@ var OtpInput = 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 = useRef([]);
     const focusInput = useCallback(
       (index) => {
@@ -9159,27 +9639,64 @@ var OtpInput = forwardRef(
       },
       [length, setValue, focusInput]
     );
-    return /* @__PURE__ */ jsx("div", { "data-react-fancy-otp-input": "", ref, className: cn("flex gap-2", className), children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(
-      "input",
+    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",
       {
-        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";
@@ -9373,16 +9890,46 @@ var TimePicker = 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__ */ 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 = useCallback(
       (hours, mins) => {
         setValue(`${pad(hours)}:${pad(mins)}`);
@@ -9413,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",
@@ -9420,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 }) })
           ] }),
@@ -13702,6 +14252,6 @@ function caretRect(ta, start, end) {
   return { x, y };
 }
 
-export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FileUpload, Heading, Icon, Input, InputTag, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, DisplayValue, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FieldModeContext, FileUpload, Form, FormProvider, Heading, Icon, Input, InputTag, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map