@particle-academy/react-fancy 4.4.6 → 4.5.0

package/dist/index.js

@@ -2567,7 +2567,22 @@ var Button = forwardRef(
       trailingElements
     ] });
     const safeHref = sanitizeHref(href);
-    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsx("a", { href: safeHref, className: classes, "data-react-fancy-button": "", "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ 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__ */ jsx(
+        "a",
+        {
+          ref,
+          href: safeHref,
+          className: classes,
+          "data-react-fancy-button": "",
+          "data-react-fancy-action": "",
+          ...props,
+          children: content
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
       "button",
       {
         ref,
@@ -3062,6 +3077,44 @@ 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",
+  className
+}) {
+  const empties = isEmpty(children);
+  return /* @__PURE__ */ 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__ */ 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 })
+      ]
+    }
+  );
+}
 var Input = forwardRef(
   ({
     type = "text",
@@ -3080,13 +3133,15 @@ 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 input = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, leading: leading ?? prefix, trailing: trailing ?? suffix, children: type === "password" ? props.value ? "\u2022\u2022\u2022\u2022\u2022\u2022" : "" : props.value }) : /* @__PURE__ */ jsx(
       InputWrapper,
       {
         prefix,
@@ -3161,6 +3216,7 @@ var Textarea = forwardRef(
     suffix,
     prefixPosition: _prefixPosition,
     suffixPosition: _suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3170,6 +3226,7 @@ var Textarea = forwardRef(
     const autoId = useId();
     const textareaId = id ?? autoId;
     const internalRef = useRef(null);
+    const resolvedMode = useFieldMode(mode);
     useEffect(() => {
       const el = internalRef.current;
       if (!autoResize || !el) return;
@@ -3179,7 +3236,7 @@ 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 = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className: "whitespace-pre-wrap", children: value ?? defaultValue }) : /* @__PURE__ */ jsx(
       InputWrapper,
       {
         prefix,
@@ -3451,6 +3508,7 @@ var NativeSelect = forwardRef(
     suffix,
     prefixPosition,
     suffixPosition,
+    mode,
     onValueChange,
     onChange,
     value,
@@ -3459,6 +3517,27 @@ var NativeSelect = forwardRef(
   }, ref) => {
     const autoId = 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__ */ jsx(DisplayValue, { size, leading: prefix, trailing: suffix, 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(
@@ -3547,11 +3626,13 @@ 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 textInputEnabled = searchable || creatable;
     const [open, setOpen] = useState(false);
     const [search2, setSearch] = useState("");
@@ -3678,6 +3759,27 @@ var ListboxSelect = 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__ */ jsx(DisplayValue, { size, 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",
       {
@@ -3853,11 +3955,13 @@ 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 [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -3876,8 +3980,21 @@ 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(
+      resolvedMode === "view" ? /* @__PURE__ */ 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__ */ jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx(
         "input",
         {
           ref: (node) => {
@@ -3939,9 +4056,11 @@ function CheckboxGroup({
   value: controlledValue,
   defaultValue = [],
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = useId();
+  const resolvedMode = useFieldMode(mode);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -3958,7 +4077,7 @@ function CheckboxGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__PURE__ */ jsx(
+  const content = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsx(
     "div",
     {
       "data-react-fancy-checkbox-group": "",
@@ -4038,10 +4157,12 @@ function RadioGroup({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  orientation = "vertical"
+  orientation = "vertical",
+  mode
 }) {
   const groupId = useId();
   const radioName = name ?? groupId;
+  const resolvedMode = useFieldMode(mode);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -4054,7 +4175,7 @@ function RadioGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = /* @__PURE__ */ jsx(
+  const content = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsx(
     "div",
     {
       "data-react-fancy-radio-group": "",
@@ -4162,10 +4283,12 @@ 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 [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -4193,7 +4316,15 @@ 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(
+      resolvedMode === "view" ? /* @__PURE__ */ 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__ */ jsx(
         "button",
         {
           ref,
@@ -4307,15 +4438,17 @@ var SingleSlider = 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__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
+    const slider = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: `${prefix ?? ""}${value}${suffix ?? ""}` }) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -4377,9 +4510,11 @@ var RangeSlider = forwardRef(
     marks,
     prefix,
     suffix,
+    mode,
     ...rest
   }, ref) => {
     const rangeProps = rest;
+    const resolvedMode = useFieldMode(mode);
     const [value, setValue] = useControllableState(
       rangeProps.value,
       rangeProps.defaultValue ?? [min, max],
@@ -4393,7 +4528,7 @@ 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: [
+    const slider = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: `${prefix ?? ""}${value[0]}${suffix ?? ""}\u2013${prefix ?? ""}${value[1]}${suffix ?? ""}` }) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-zinc-200 dark:bg-zinc-700" }),
@@ -4495,10 +4630,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 = useRef(null);
   const itemRefs = useRef([]);
@@ -4523,7 +4660,7 @@ function MultiSwitch({
   useEffect(() => {
     updateIndicator();
   }, [updateIndicator]);
-  const control = /* @__PURE__ */ jsxs(
+  const control = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
@@ -4586,6 +4723,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 {
@@ -4652,17 +4805,20 @@ var SingleDatePicker = 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__ */ jsx(
+    const input = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: formatDateValue(value, includeTime) }) : /* @__PURE__ */ jsx(
       "input",
       {
         "data-react-fancy-date-picker": "",
@@ -4710,17 +4866,20 @@ var RangeDatePicker = 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__ */ jsxs("div", { "data-react-fancy-date-picker": "", className: cn("flex items-center gap-2", className), children: [
+    const input = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: value[0] || value[1] ? `${formatDateValue(value[0], includeTime)} \u2013 ${formatDateValue(value[1], includeTime)}` : "" }) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-date-picker": "", className: cn("flex items-center gap-2", className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -4770,6 +4929,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() {
@@ -5109,13 +5275,15 @@ 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 inputRef = useRef(null);
     const datalistId = useId();
     const handleChange = (e) => {
@@ -5126,6 +5294,42 @@ var ColorPicker = forwardRef(
         inputRef.current?.click();
       }
     };
+    if (resolvedMode === "view") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-color-picker": "",
+          "data-mode": "view",
+          className: cn("inline-flex items-center gap-2", 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",
       {
@@ -6015,6 +6219,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",
@@ -6049,8 +6261,10 @@ var Avatar = forwardRef(
     fallback,
     size = "md",
     status,
+    glow,
     className
   }, ref) => {
+    const glowKey = glow === true ? "on" : glow || null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -6063,6 +6277,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",
             {
@@ -8853,13 +9076,15 @@ 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 [query, setQuery] = useState(value);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -8912,6 +9137,23 @@ var Autocomplete = forwardRef(
         if (item && !item.disabled) select(item.value);
       }
     };
+    if (resolvedMode === "view") {
+      const matched = options.find((o) => o.value === value);
+      return /* @__PURE__ */ 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__ */ jsxs("div", { "data-react-fancy-autocomplete": "", ref: wrapperRef, className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -9084,13 +9326,15 @@ var OtpInput = forwardRef(
     onChange,
     disabled = false,
     autoFocus = false,
-    className
+    className,
+    mode
   }, ref) {
     const [value, setValue] = useControllableState(
       controlledValue,
       "",
       onChange
     );
+    const resolvedMode = useFieldMode(mode);
     const inputsRef = useRef([]);
     const focusInput = useCallback(
       (index) => {
@@ -9144,6 +9388,21 @@ var OtpInput = forwardRef(
       },
       [length, setValue, focusInput]
     );
+    if (resolvedMode === "view") {
+      return /* @__PURE__ */ 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__ */ jsx("div", { "data-react-fancy-otp-input": "", ref, className: cn("flex gap-2", className), children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(
       "input",
       {
@@ -9358,16 +9617,34 @@ 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 { 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__ */ 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 = useCallback(
       (hours, mins) => {
         setValue(`${pad(hours)}:${pad(mins)}`);
@@ -13687,6 +13964,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