@particle-academy/react-fancy 4.4.6 → 4.5.0

package/dist/index.cjs

@@ -2569,7 +2569,22 @@ var Button = react.forwardRef(
       trailingElements
     ] });
     const safeHref = sanitizeHref(href);
-    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: safeHref, className: classes, "data-react-fancy-button": "", "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsxRuntime.jsx(
+    const buttonEl = safeHref && !disabled ? (
+      // Anchor mode forwards the same rest props as the <button> branch so
+      // onClick / target / rel / ref / ARIA / data-* reach the <a> (issue #7).
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          href: safeHref,
+          className: classes,
+          "data-react-fancy-button": "",
+          "data-react-fancy-action": "",
+          ...props,
+          children: content
+        }
+      )
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
@@ -3064,6 +3079,44 @@ 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",
+  className
+}) {
+  const empties = isEmpty(children);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-react-fancy-display": "",
+      "data-mode": "view",
+      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",
+        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 })
+      ]
+    }
+  );
+}
 var Input = react.forwardRef(
   ({
     type = "text",
@@ -3082,13 +3135,15 @@ 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 input = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, leading: leading ?? prefix, trailing: trailing ?? suffix, children: type === "password" ? props.value ? "\u2022\u2022\u2022\u2022\u2022\u2022" : "" : props.value }) : /* @__PURE__ */ jsxRuntime.jsx(
       InputWrapper,
       {
         prefix,
@@ -3163,6 +3218,7 @@ var Textarea = react.forwardRef(
     suffix,
     prefixPosition: _prefixPosition,
     suffixPosition: _suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3172,6 +3228,7 @@ var Textarea = react.forwardRef(
     const autoId = react.useId();
     const textareaId = id ?? autoId;
     const internalRef = react.useRef(null);
+    const resolvedMode = useFieldMode(mode);
     react.useEffect(() => {
       const el = internalRef.current;
       if (!autoResize || !el) return;
@@ -3181,7 +3238,7 @@ 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 = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, className: "whitespace-pre-wrap", children: value ?? defaultValue }) : /* @__PURE__ */ jsxRuntime.jsx(
       InputWrapper,
       {
         prefix,
@@ -3453,6 +3510,7 @@ var NativeSelect = react.forwardRef(
     suffix,
     prefixPosition,
     suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3461,6 +3519,27 @@ var NativeSelect = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const selectId = id ?? autoId;
+    const resolvedMode = useFieldMode(mode);
+    if (resolvedMode === "view") {
+      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, 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(
@@ -3549,11 +3628,13 @@ 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 textInputEnabled = searchable || creatable;
     const [open, setOpen] = react.useState(false);
     const [search2, setSearch] = react.useState("");
@@ -3680,6 +3761,27 @@ var ListboxSelect = react.forwardRef(
         }
       }
     };
+    if (resolvedMode === "view") {
+      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, 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",
       {
@@ -3855,11 +3957,13 @@ 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 [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -3878,8 +3982,21 @@ 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(
+      resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-react-fancy-display": "",
+          "data-mode": "view",
+          className: cn(
+            "flex shrink-0 items-center justify-center text-zinc-700 dark:text-zinc-200",
+            sizeClasses6
+          ),
+          "aria-hidden": "true",
+          children: glyph
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           ref: (node) => {
@@ -3941,9 +4058,11 @@ function CheckboxGroup({
   value: controlledValue,
   defaultValue = [],
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = react.useId();
+  const resolvedMode = useFieldMode(mode);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -3960,7 +4079,7 @@ function CheckboxGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
+  const content = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-react-fancy-checkbox-group": "",
@@ -4040,10 +4159,12 @@ function RadioGroup({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = react.useId();
   const radioName = name ?? groupId;
+  const resolvedMode = useFieldMode(mode);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -4056,7 +4177,7 @@ function RadioGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
+  const content = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-react-fancy-radio-group": "",
@@ -4164,10 +4285,12 @@ 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 [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -4195,7 +4318,15 @@ 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(
+      resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-react-fancy-display": "",
+          "data-mode": "view",
+          className: "text-sm font-medium text-zinc-700 dark:text-zinc-200",
+          children: checked ? "On" : "Off"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           ref,
@@ -4309,15 +4440,17 @@ var SingleSlider = react.forwardRef(
     marks,
     prefix,
     suffix,
+    mode,
     ...rest
   }, ref) => {
     const singleProps = rest;
+    const resolvedMode = useFieldMode(mode);
     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 = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, className, 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",
@@ -4379,9 +4512,11 @@ var RangeSlider = react.forwardRef(
     marks,
     prefix,
     suffix,
+    mode,
     ...rest
   }, ref) => {
     const rangeProps = rest;
+    const resolvedMode = useFieldMode(mode);
     const [value, setValue] = useControllableState(
       rangeProps.value,
       rangeProps.defaultValue ?? [min, max],
@@ -4395,7 +4530,7 @@ 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: [
+    const slider = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, className, 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), 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" }),
@@ -4497,10 +4632,12 @@ 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 [value, setValue] = useControllableState(controlledValue, fallback, onValueChange);
   const containerRef = react.useRef(null);
   const itemRefs = react.useRef([]);
@@ -4525,7 +4662,7 @@ function MultiSwitch({
   react.useEffect(() => {
     updateIndicator();
   }, [updateIndicator]);
-  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+  const control = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: containerRef,
@@ -4588,6 +4725,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 {
@@ -4654,17 +4807,20 @@ var SingleDatePicker = react.forwardRef(
     name,
     min,
     max,
+    includeTime,
+    mode,
     inputType,
     inputClasses,
     ...rest
   }, ref) => {
     const singleProps = rest;
+    const resolvedMode = useFieldMode(mode);
     const [value, setValue] = useControllableState(
       singleProps.value,
       singleProps.defaultValue ?? "",
       singleProps.onValueChange
     );
-    const input = /* @__PURE__ */ jsxRuntime.jsx(
+    const input = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, className, children: formatDateValue(value, includeTime) }) : /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         "data-react-fancy-date-picker": "",
@@ -4712,17 +4868,20 @@ var RangeDatePicker = react.forwardRef(
     name,
     min,
     max,
+    includeTime,
+    mode,
     inputType,
     inputClasses,
     ...rest
   }, ref) => {
     const rangeProps = rest;
+    const resolvedMode = useFieldMode(mode);
     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: [
+    const input = resolvedMode === "view" ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, className, 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), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -4772,6 +4931,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() {
@@ -5111,13 +5277,15 @@ 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 inputRef = react.useRef(null);
     const datalistId = react.useId();
     const handleChange = (e) => {
@@ -5128,6 +5296,42 @@ var ColorPicker = react.forwardRef(
         inputRef.current?.click();
       }
     };
+    if (resolvedMode === "view") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-color-picker": "",
+          "data-mode": "view",
+          className: cn("inline-flex items-center gap-2", 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",
       {
@@ -6017,6 +6221,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",
@@ -6051,8 +6263,10 @@ var Avatar = react.forwardRef(
     fallback,
     size = "md",
     status,
+    glow,
     className
   }, ref) => {
+    const glowKey = glow === true ? "on" : glow || null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -6065,6 +6279,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",
             {
@@ -8855,13 +9078,15 @@ 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 [query, setQuery] = react.useState(value);
     const [open, setOpen] = react.useState(false);
     const [activeIndex, setActiveIndex] = react.useState(-1);
@@ -8914,6 +9139,23 @@ var Autocomplete = react.forwardRef(
         if (item && !item.disabled) select(item.value);
       }
     };
+    if (resolvedMode === "view") {
+      const matched = options.find((o) => o.value === value);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-react-fancy-autocomplete": "",
+          "data-mode": "view",
+          ref: wrapperRef,
+          className: cn(
+            "text-sm text-zinc-900 dark:text-zinc-100",
+            !value && "text-zinc-400 dark:text-zinc-500",
+            className
+          ),
+          children: matched?.label ?? value ?? "\u2014"
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-autocomplete": "", ref: wrapperRef, className: cn("relative", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -9086,13 +9328,15 @@ var OtpInput = react.forwardRef(
     onChange,
     disabled = false,
     autoFocus = false,
-    className
+    className,
+    mode
   }, ref) {
     const [value, setValue] = useControllableState(
       controlledValue,
       "",
       onChange
     );
+    const resolvedMode = useFieldMode(mode);
     const inputsRef = react.useRef([]);
     const focusInput = react.useCallback(
       (index) => {
@@ -9146,6 +9390,21 @@ var OtpInput = react.forwardRef(
       },
       [length, setValue, focusInput]
     );
+    if (resolvedMode === "view") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-react-fancy-otp-input": "",
+          "data-mode": "view",
+          ref,
+          className: cn(
+            "font-mono text-lg tracking-[0.4em] text-zinc-900 dark:text-zinc-100",
+            className
+          ),
+          children: value || "\u2014"
+        }
+      );
+    }
     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",
       {
@@ -9360,16 +9619,34 @@ 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 { hours: h24, minutes } = parseTime(value);
     const isPM = h24 >= 12;
     const displayHour = format === "12h" ? h24 % 12 || 12 : h24;
+    if (resolvedMode === "view") {
+      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,
+          className: cn(
+            "text-sm font-medium tabular-nums text-zinc-900 dark:text-zinc-100",
+            className
+          ),
+          children: formatted
+        }
+      );
+    }
     const updateTime = react.useCallback(
       (hours, mins) => {
         setValue(`${pad(hours)}:${pad(mins)}`);
@@ -13715,6 +13992,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;
@@ -13724,7 +14002,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;
@@ -13794,6 +14075,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;