@uzum-tech/ui 2.3.3 → 2.3.5

package/dist/index.js

@@ -47885,6 +47885,261 @@
     }
   });
 
+  function self$11(vars) {
+    const {
+      opacityDisabled,
+      elementsPrimary,
+      brandPrimary500,
+      fontBodyMedium,
+      fontBodySmall,
+      fontBodyLarge,
+      fontHeadingSmall,
+      fontTitleMedium,
+      fontHeadingLarge
+    } = vars;
+    return {
+      tertiaryColor: elementsPrimary,
+      primaryColor: brandPrimary500,
+      fontSize: fontBodyMedium,
+      sizeTiny: fontBodySmall,
+      sizeSmall: fontBodyLarge,
+      sizeMedium: fontTitleMedium,
+      sizeLarge: fontHeadingSmall,
+      sizeHuge: fontHeadingLarge,
+      opacitySpinning: opacityDisabled
+    };
+  }
+  const spinLight = {
+    name: "Spin",
+    common: derived,
+    self: self$11
+  };
+
+  const spinDark = {
+    name: "Spin",
+    common: derived$1,
+    self: self$11
+  };
+
+  var style$19 = c$1([c$1("@keyframes spin-rotate", `
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `), cB("spin-container", {
+    position: "relative"
+  }, [cB("spin-body", `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    `, [fadeInTransition()])]), cB("spin-body", `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  `), cB("spin", `
+    display: inline-flex;
+    height: var(--u-size);
+    width: var(--u-size);
+    font-size: var(--u-size);
+    color: var(--u-color);
+  `, [cM("rotate", `
+      animation: spin-rotate 2s linear infinite;
+    `)]), cB("spin-description", `
+    display: inline-block;
+    font-size: var(--u-font-size);
+    color: var(--u-text-color);
+    transition: color .3s var(--u-bezier);
+    margin-top: 8px;
+  `), cB("spin-content", `
+    opacity: 1;
+    transition: opacity .3s var(--u-bezier);
+    pointer-events: all;
+  `, [cM("spinning", `
+      user-select: none;
+      -webkit-user-select: none;
+      pointer-events: none;
+      opacity: var(--u-opacity-spinning);
+    `)])]);
+
+  const STROKE_WIDTH = {
+    tiny: 22,
+    small: 20,
+    medium: 18,
+    large: 16,
+    huge: 14
+  };
+  const spinProps = {
+    ...useTheme.props,
+    contentClass: String,
+    contentStyle: [Object, String],
+    description: String,
+    stroke: String,
+    size: {
+      type: [String, Number],
+      default: "medium"
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    strokeWidth: Number,
+    rotate: {
+      type: Boolean,
+      default: true
+    },
+    scale: Number,
+    radius: Number,
+    spinning: {
+      type: Boolean,
+      validator: () => {
+        return true;
+      },
+      default: void 0
+    },
+    color: {
+      type: [String],
+      default: "primary"
+    },
+    delay: Number
+  };
+  var _USpin = vue.defineComponent({
+    name: "Spin",
+    props: spinProps,
+    slots: Object,
+    setup(props) {
+      {
+        vue.watchEffect(() => {
+          if (props.spinning !== void 0) {
+            warnOnce(
+              "spin",
+              "`spinning` is deprecated, please use `show` instead."
+            );
+          }
+        });
+      }
+      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+      const themeRef = useTheme(
+        "Spin",
+        "-spin",
+        style$19,
+        spinLight,
+        props,
+        mergedClsPrefixRef
+      );
+      const cssVarsRef = vue.computed(() => {
+        const { size: spinSize, color } = props;
+        const {
+          common: { cubicBezierEaseInOut },
+          self
+        } = themeRef.value;
+        const { opacitySpinning, tertiaryColor, primaryColor } = self;
+        const size = typeof spinSize === "number" ? pxfy(spinSize) : self[createKey("size", spinSize)];
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-opacity-spinning": opacitySpinning,
+          "--u-size": size,
+          "--u-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color,
+          "--u-text-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color
+        };
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass(
+        "spin",
+        vue.computed(() => {
+          const { size } = props;
+          return typeof size === "number" ? String(size) : size[0];
+        }),
+        cssVarsRef,
+        props
+      ) : void 0;
+      const compitableShow = useCompitable(props, ["spinning", "show"]);
+      const activeRef = vue.ref(false);
+      vue.watchEffect((onCleanup) => {
+        let timerId;
+        if (compitableShow.value) {
+          const { delay } = props;
+          if (delay) {
+            timerId = window.setTimeout(() => {
+              activeRef.value = true;
+            }, props.delay);
+            onCleanup(() => {
+              clearTimeout(timerId);
+            });
+            return;
+          }
+        }
+        activeRef.value = compitableShow.value;
+      });
+      return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        active: activeRef,
+        mergedStrokeWidth: vue.computed(() => {
+          const { strokeWidth } = props;
+          if (strokeWidth !== void 0)
+            return strokeWidth;
+          const { size } = props;
+          return STROKE_WIDTH[typeof size === "number" ? "medium" : size];
+        }),
+        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender
+      };
+    },
+    render() {
+      const { $slots, mergedClsPrefix, description } = this;
+      const rotate = $slots.icon && this.rotate;
+      const descriptionNode = (description || $slots.description) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-spin-description` }, description || $slots.description?.());
+      const icon = $slots.icon ? /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefix}-spin`,
+            rotate && `${mergedClsPrefix}-spin--rotate`
+          ],
+          style: $slots.default ? "" : this.cssVars
+        },
+        $slots.icon()
+      ), descriptionNode) : /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
+        UBaseLoading,
+        {
+          clsPrefix: mergedClsPrefix,
+          style: $slots.default ? "" : this.cssVars,
+          stroke: this.stroke,
+          "stroke-width": this.mergedStrokeWidth,
+          radius: this.radius,
+          scale: this.scale,
+          class: `${mergedClsPrefix}-spin`
+        }
+      ), descriptionNode);
+      this.onRender?.();
+      return $slots.default ? /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [`${mergedClsPrefix}-spin-container`, this.themeClass],
+          style: this.cssVars
+        },
+        /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-spin-content`,
+              this.active && `${mergedClsPrefix}-spin-content--spinning`,
+              this.contentClass
+            ],
+            style: this.contentStyle
+          },
+          $slots
+        ),
+        /* @__PURE__ */ vue.h(vue.Transition, { name: "fade-in-transition" }, {
+          default: () => this.active ? icon : null
+        })
+      ) : icon;
+    }
+  });
+
   const buttonGroupDark = {
     name: "ButtonGroup",
     common: derived$1
@@ -47929,7 +48184,7 @@
     self: self$1c
   };
 
-  function self$11(vars) {
+  function self$10(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -47957,12 +48212,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$11
+    self: self$10
   };
 
-  function self$10(vars) {
+  function self$$(vars) {
     return {
-      ...self$11(vars),
+      ...self$10(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -47978,10 +48233,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$10
+    self: self$$
   };
 
-  function self$$(vars) {
+  function self$_(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -47992,13 +48247,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$$
+    self: self$_
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$$
+    self: self$_
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -48011,7 +48266,7 @@
     style: rtlStyle$g
   };
 
-  function self$_(vars) {
+  function self$Z(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -48051,13 +48306,13 @@
   const collapseLight = {
     name: "Collapse",
     common: derived,
-    self: self$_
+    self: self$Z
   };
 
   const collapseDark = {
     name: "Collapse",
     common: derived$1,
-    self: self$_
+    self: self$Z
   };
 
   var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -48080,7 +48335,7 @@
     style: rtlStyle$f
   };
 
-  function self$Z(vars) {
+  function self$Y(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -48167,7 +48422,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$Z
+    self: self$Y
   });
 
   const dropdownDark = {
@@ -48176,7 +48431,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$Z
+    self: self$Y
   };
 
   const popselect = {
@@ -48188,7 +48443,7 @@
     }
   };
 
-  function self$Y(vars) {
+  function self$X(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -48203,10 +48458,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$Y
+    self: self$X
   });
 
-  function self$X(vars) {
+  function self$W(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -48304,7 +48559,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$X
+    self: self$W
   });
 
   const paginationDark = {
@@ -48315,7 +48570,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$X
+    self: self$W
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -48332,7 +48587,7 @@
     peers: [inputRtl]
   };
 
-  function self$W(vars) {
+  function self$V(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -48424,13 +48679,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$W
+    self: self$V
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$W
+    self: self$V
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -48458,7 +48713,7 @@
     style: rtlStyle$d
   };
 
-  function self$V(vars) {
+  function self$U(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -48559,7 +48814,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$V
+    self: self$U
   });
 
   const dataTableDark = {
@@ -48576,10 +48831,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$V
+    self: self$U
   };
 
-  function self$U(vars) {
+  function self$T(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -48621,7 +48876,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$U
+    self: self$T
   });
 
   const timePickerDark = {
@@ -48632,7 +48887,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$U
+    self: self$T
   };
 
   const itemWidth = "38px";
@@ -48678,7 +48933,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$T(vars) {
+  function self$S(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -48779,7 +49034,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$T
+    self: self$S
   });
 
   const datePickerDark = {
@@ -48792,10 +49047,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$T
+    self: self$S
   };
 
-  function self$S(vars) {
+  function self$R(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -48845,13 +49100,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$S
+    self: self$R
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$S
+    self: self$R
   };
 
   var commonVars$5 = {
@@ -48865,7 +49120,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$R(vars) {
+  function self$Q(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -48922,7 +49177,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$R
+    self: self$Q
   });
 
   const dialogDark = {
@@ -48931,10 +49186,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$R
+    self: self$Q
   };
 
-  function self$Q(vars) {
+  function self$P(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -48954,13 +49209,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$Q
+    self: self$P
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$Q
+    self: self$P
   };
 
   var commonVars$4 = {
@@ -48976,7 +49231,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$P(vars) {
+  function self$O(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -49025,7 +49280,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$P
+    self: self$O
   });
 
   const drawerDark = {
@@ -49034,7 +49289,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$P
+    self: self$O
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -49068,7 +49323,7 @@
     }
   };
 
-  function self$O() {
+  function self$N() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -49078,7 +49333,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$O
+    self: self$N
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -49119,12 +49374,12 @@
     }
   };
 
-  function self$N() {
+  function self$M() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$N
+    self: self$M
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -49196,7 +49451,7 @@
     }
   };
 
-  function self$M(vars) {
+  function self$L(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -49212,7 +49467,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$M
+    self: self$L
   };
 
   const floatButtonDark = {
@@ -49247,7 +49502,7 @@
     }
   };
 
-  function self$L(vars) {
+  function self$K(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -49276,10 +49531,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$L
+    self: self$K
   };
 
-  function self$K(vars) {
+  function self$J(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -49334,16 +49589,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$K
+    self: self$J
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$K
+    self: self$J
   };
 
-  function self$J(vars) {
+  function self$I(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -49380,16 +49635,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$J
+    self: self$I
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$J
+    self: self$I
   };
 
-  function self$I(vars) {
+  function self$H(vars) {
     const {
       textSecondary
     } = vars;
@@ -49404,7 +49659,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$I
+    self: self$H
   });
 
   const inputNumberDark = {
@@ -49414,10 +49669,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$I
+    self: self$H
   };
 
-  function self$H() {
+  function self$G() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -49433,7 +49688,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$H
+    self: self$G
   });
 
   const inputOtpDark = {
@@ -49442,7 +49697,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$H
+    self: self$G
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -49454,7 +49709,7 @@
     style: rtlStyle$8
   };
 
-  function self$G(vars) {
+  function self$F(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -49500,7 +49755,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$G
+    self: self$F
   });
 
   const layoutDark = {
@@ -49509,7 +49764,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$G
+    self: self$F
   };
 
   const rowDark = {
@@ -49546,7 +49801,7 @@
     style: rtlStyle$7
   };
 
-  function self$F(vars) {
+  function self$E(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -49560,16 +49815,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$F
+    self: self$E
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$F
+    self: self$E
   };
 
-  function self$E(vars) {
+  function self$D(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -49592,7 +49847,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$E
+    self: self$D
   });
 
   const logDark = {
@@ -49602,25 +49857,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$E
+    self: self$D
   };
 
-  function self$D() {
+  function self$C() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$D
+    self: self$C
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$D
+    self: self$C
   };
 
-  function self$C(vars) {
+  function self$B(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -49635,7 +49890,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$C
+    self: self$B
   });
 
   const listDark = {
@@ -49645,7 +49900,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$C
+    self: self$B
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49688,7 +49943,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$B(vars) {
+  function self$A(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -49756,7 +50011,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$B
+    self: self$A
   });
 
   const menuDark = {
@@ -49766,10 +50021,10 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$B
+    self: self$A
   };
 
-  function self$A(vars) {
+  function self$z(vars) {
     const {
       transparencyModal,
       containerPrimary,
@@ -49793,7 +50048,7 @@
       Dialog: dialogLight,
       Card: cardLight
     },
-    self: self$A
+    self: self$z
   });
 
   const modalDark = {
@@ -49804,7 +50059,7 @@
       Dialog: dialogDark,
       Card: cardDark$1
     },
-    self: self$A
+    self: self$z
   };
 
   var commonVars$2 = {
@@ -49813,7 +50068,7 @@
     closeBorderRadius: "50px"
   };
 
-  function self$z(vars) {
+  function self$y(vars) {
     const {
       fontWeightStrong,
       lineHeightBodyMedium,
@@ -49946,7 +50201,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$z
+    self: self$y
   });
 
   const notificationDark = {
@@ -49955,7 +50210,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$z
+    self: self$y
   };
 
   var rtlStyle$6 = cB("notification", [cM("rtl", `
@@ -49985,7 +50240,7 @@
     style: rtlStyle$6
   };
 
-  function self$y(vars) {
+  function self$x(vars) {
     const {
       fontWeightStrong,
       fontTitleSmall,
@@ -50011,13 +50266,13 @@
   const pageHeaderLight = createTheme$1({
     name: "PageHeader",
     common: derived,
-    self: self$y
+    self: self$x
   });
 
   const pageHeaderDark = {
     name: "PageHeader",
     common: derived$1,
-    self: self$y
+    self: self$x
   };
 
   var rtlStyle$5 = cB("page-header-wrapper", [cM("rtl", [cB("page-header-header", `
@@ -50044,7 +50299,7 @@
     style: rtlStyle$5
   };
 
-  function self$x(vars) {
+  function self$w(vars) {
     const {
       fontBodyMedium,
       staticOrange
@@ -50062,7 +50317,7 @@
       Button: buttonLight,
       Popover: popoverLight
     },
-    self: self$x
+    self: self$w
   });
 
   const popconfirmDark = {
@@ -50072,10 +50327,10 @@
       Button: buttonDark,
       Popover: popoverDark
     },
-    self: self$x
+    self: self$w
   };
 
-  function self$w(vars) {
+  function self$v(vars) {
     const {
       elementsQuinary,
       brandSecondary600
@@ -50091,16 +50346,16 @@
   const themeLight$2 = {
     name: "Rate",
     common: derived,
-    self: self$w
+    self: self$v
   };
 
   const rateDark = {
     name: "Rate",
     common: derived$1,
-    self: self$w
+    self: self$v
   };
 
-  function self$v(vars) {
+  function self$u(vars) {
     const {
       fontHeadingSmall,
       fontHeadingMedium,
@@ -50149,16 +50404,16 @@
   const resultLight = {
     name: "Result",
     common: derived,
-    self: self$v
+    self: self$u
   };
 
   const resultDark = {
     name: "Result",
     common: derived$1,
-    self: self$v
+    self: self$u
   };
 
-  function self$u(vars) {
+  function self$t(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -50205,48 +50460,12 @@
   const sliderLight = {
     name: "Slider",
     common: derived,
-    self: self$u
+    self: self$t
   };
 
   const sliderDark = {
     name: "Slider",
     common: derived$1,
-    self: self$u
-  };
-
-  function self$t(vars) {
-    const {
-      opacityDisabled,
-      elementsPrimary,
-      brandPrimary500,
-      fontBodyMedium,
-      fontBodySmall,
-      fontBodyLarge,
-      fontHeadingSmall,
-      fontTitleMedium,
-      fontHeadingLarge
-    } = vars;
-    return {
-      tertiaryColor: elementsPrimary,
-      primaryColor: brandPrimary500,
-      fontSize: fontBodyMedium,
-      sizeTiny: fontBodySmall,
-      sizeSmall: fontBodyLarge,
-      sizeMedium: fontTitleMedium,
-      sizeLarge: fontHeadingSmall,
-      sizeHuge: fontHeadingLarge,
-      opacitySpinning: opacityDisabled
-    };
-  }
-  const spinLight = {
-    name: "Spin",
-    common: derived,
-    self: self$t
-  };
-
-  const spinDark = {
-    name: "Spin",
-    common: derived$1,
     self: self$t
   };
 
@@ -51163,8 +51382,31 @@
     renderToolbar: Function
   };
   const imageContextKey = createInjectionKey("u-image");
+  const BLEEDING = 32;
+  const imagePreviewProps = {
+    ...imagePreviewSharedProps,
+    src: String,
+    show: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultShow: Boolean,
+    "onUpdate:show": [Function, Array],
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    spinProps: {
+      type: Object,
+      default: void 0
+    },
+    onUpdateShow: [Function, Array],
+    onNext: Function,
+    onPrev: Function,
+    onClose: [Function, Array]
+  };
 
-  var style$19 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+  var style$18 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -51198,7 +51440,17 @@
       padding: 0 8px;
       font-size: 28px;
       cursor: pointer;
-    `), fadeInTransition()]), cB("image-preview-wrapper", `
+    `), fadeInTransition()]), cB("image-preview-loading", `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  `), cB("image-preview-wrapper", `
     position: absolute;
     left: 0;
     right: 0;
@@ -51224,31 +51476,17 @@
       border-radius: inherit;
     `)])]);
 
-  const BLEEDING = 32;
-  const imagePreviewProps = {
-    ...imagePreviewSharedProps,
-    src: String,
-    show: {
-      type: Boolean,
-      default: void 0
-    },
-    defaultShow: Boolean,
-    "onUpdate:show": [Function, Array],
-    onUpdateShow: [Function, Array],
-    onNext: Function,
-    onPrev: Function,
-    onClose: [Function, Array]
-  };
   var _UImagePreview = vue.defineComponent({
     name: "ImagePreview",
     props: imagePreviewProps,
+    slots: Object,
     setup(props) {
       const { src } = vue.toRefs(props);
       const { mergedClsPrefixRef } = useConfig(props);
       const themeRef = useTheme(
         "Image",
         "-image",
-        style$19,
+        style$18,
         imageLight,
         props,
         mergedClsPrefixRef
@@ -51743,7 +51981,7 @@
                           class: `${clsPrefix}-image-preview-wrapper`,
                           ref: "previewWrapperRef"
                         },
-                        /* @__PURE__ */ vue.h(
+                        !this.loading ? /* @__PURE__ */ vue.h(
                           "img",
                           {
                             ...previewedImgProps,
@@ -51759,13 +51997,18 @@
                             ref: "previewRef",
                             onDragstart: this.handleDragStart
                           }
-                        )
+                        ) : null
                       ),
                       [[vue.vShow, this.mergedShow]]
                     );
                   }
                 }
-              )
+              ),
+              this.mergedShow && this.loading && /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-image-preview-loading` }, /* @__PURE__ */ vue.h(_USpin, { ...this.spinProps }, {
+                default: this.$slots["spin-default"],
+                icon: this.$slots["spin-icon"],
+                description: this.$slots["spin-description"]
+              }))
             ),
             [[zindexable, { enabled: this.mergedShow }]]
           );
@@ -52157,225 +52400,6 @@
     }
   });
 
-  var style$18 = c$1([c$1("@keyframes spin-rotate", `
-    from {
-      transform: rotate(0);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  `), cB("spin-container", {
-    position: "relative"
-  }, [cB("spin-body", `
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    `, [fadeInTransition()])]), cB("spin-body", `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  `), cB("spin", `
-    display: inline-flex;
-    height: var(--u-size);
-    width: var(--u-size);
-    font-size: var(--u-size);
-    color: var(--u-color);
-  `, [cM("rotate", `
-      animation: spin-rotate 2s linear infinite;
-    `)]), cB("spin-description", `
-    display: inline-block;
-    font-size: var(--u-font-size);
-    color: var(--u-text-color);
-    transition: color .3s var(--u-bezier);
-    margin-top: 8px;
-  `), cB("spin-content", `
-    opacity: 1;
-    transition: opacity .3s var(--u-bezier);
-    pointer-events: all;
-  `, [cM("spinning", `
-      user-select: none;
-      -webkit-user-select: none;
-      pointer-events: none;
-      opacity: var(--u-opacity-spinning);
-    `)])]);
-
-  const STROKE_WIDTH = {
-    tiny: 22,
-    small: 20,
-    medium: 18,
-    large: 16,
-    huge: 14
-  };
-  const spinProps = {
-    ...useTheme.props,
-    contentClass: String,
-    contentStyle: [Object, String],
-    description: String,
-    stroke: String,
-    size: {
-      type: [String, Number],
-      default: "medium"
-    },
-    show: {
-      type: Boolean,
-      default: true
-    },
-    strokeWidth: Number,
-    rotate: {
-      type: Boolean,
-      default: true
-    },
-    scale: Number,
-    radius: Number,
-    spinning: {
-      type: Boolean,
-      validator: () => {
-        return true;
-      },
-      default: void 0
-    },
-    color: {
-      type: [String],
-      default: "primary"
-    },
-    delay: Number
-  };
-  var _USpin = vue.defineComponent({
-    name: "Spin",
-    props: spinProps,
-    slots: Object,
-    setup(props) {
-      {
-        vue.watchEffect(() => {
-          if (props.spinning !== void 0) {
-            warnOnce(
-              "spin",
-              "`spinning` is deprecated, please use `show` instead."
-            );
-          }
-        });
-      }
-      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-      const themeRef = useTheme(
-        "Spin",
-        "-spin",
-        style$18,
-        spinLight,
-        props,
-        mergedClsPrefixRef
-      );
-      const cssVarsRef = vue.computed(() => {
-        const { size: spinSize, color } = props;
-        const {
-          common: { cubicBezierEaseInOut },
-          self
-        } = themeRef.value;
-        const { opacitySpinning, tertiaryColor, primaryColor } = self;
-        const size = typeof spinSize === "number" ? pxfy(spinSize) : self[createKey("size", spinSize)];
-        return {
-          "--u-bezier": cubicBezierEaseInOut,
-          "--u-opacity-spinning": opacitySpinning,
-          "--u-size": size,
-          "--u-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color,
-          "--u-text-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color
-        };
-      });
-      const themeClassHandle = inlineThemeDisabled ? useThemeClass(
-        "spin",
-        vue.computed(() => {
-          const { size } = props;
-          return typeof size === "number" ? String(size) : size[0];
-        }),
-        cssVarsRef,
-        props
-      ) : void 0;
-      const compitableShow = useCompitable(props, ["spinning", "show"]);
-      const activeRef = vue.ref(false);
-      vue.watchEffect((onCleanup) => {
-        let timerId;
-        if (compitableShow.value) {
-          const { delay } = props;
-          if (delay) {
-            timerId = window.setTimeout(() => {
-              activeRef.value = true;
-            }, props.delay);
-            onCleanup(() => {
-              clearTimeout(timerId);
-            });
-            return;
-          }
-        }
-        activeRef.value = compitableShow.value;
-      });
-      return {
-        mergedClsPrefix: mergedClsPrefixRef,
-        active: activeRef,
-        mergedStrokeWidth: vue.computed(() => {
-          const { strokeWidth } = props;
-          if (strokeWidth !== void 0)
-            return strokeWidth;
-          const { size } = props;
-          return STROKE_WIDTH[typeof size === "number" ? "medium" : size];
-        }),
-        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-        themeClass: themeClassHandle?.themeClass,
-        onRender: themeClassHandle?.onRender
-      };
-    },
-    render() {
-      const { $slots, mergedClsPrefix, description } = this;
-      const rotate = $slots.icon && this.rotate;
-      const descriptionNode = (description || $slots.description) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-spin-description` }, description || $slots.description?.());
-      const icon = $slots.icon ? /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
-        "div",
-        {
-          class: [
-            `${mergedClsPrefix}-spin`,
-            rotate && `${mergedClsPrefix}-spin--rotate`
-          ],
-          style: $slots.default ? "" : this.cssVars
-        },
-        $slots.icon()
-      ), descriptionNode) : /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
-        UBaseLoading,
-        {
-          clsPrefix: mergedClsPrefix,
-          style: $slots.default ? "" : this.cssVars,
-          stroke: this.stroke,
-          "stroke-width": this.mergedStrokeWidth,
-          radius: this.radius,
-          scale: this.scale,
-          class: `${mergedClsPrefix}-spin`
-        }
-      ), descriptionNode);
-      this.onRender?.();
-      return $slots.default ? /* @__PURE__ */ vue.h(
-        "div",
-        {
-          class: [`${mergedClsPrefix}-spin-container`, this.themeClass],
-          style: this.cssVars
-        },
-        /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: [
-              `${mergedClsPrefix}-spin-content`,
-              this.active && `${mergedClsPrefix}-spin-content--spinning`,
-              this.contentClass
-            ],
-            style: this.contentStyle
-          },
-          $slots
-        ),
-        /* @__PURE__ */ vue.h(vue.Transition, { name: "fade-in-transition" }, {
-          default: () => this.active ? icon : null
-        })
-      ) : icon;
-    }
-  });
-
   function useUploadActionsRender(options) {
     const {
       clsPrefix,
@@ -55481,6 +55505,249 @@
     ["event" /* EVENT */]: MessageBubbleServiceVariant.EVENT,
     ["divider" /* DIVIDER */]: MessageBubbleServiceVariant.DIVIDER
   };
+  const chatProps = {
+    ...useTheme.props,
+    chatItems: {
+      type: Array,
+      default: () => []
+    },
+    selectedChatId: {
+      type: [String, Number],
+      default: void 0
+    },
+    inputValue: {
+      type: String,
+      default: void 0
+    },
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    typingChatIds: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    listEmptyProps: {
+      type: Object,
+      default: void 0
+    },
+    listHeaderTitle: {
+      type: [String, Function],
+      default: "Chats"
+    },
+    listHeaderActions: {
+      type: Array,
+      default: () => []
+    },
+    listHeaderButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    listHeaderIconProps: {
+      type: Object,
+      default: void 0
+    },
+    listItemAvatarProps: {
+      type: Object,
+      default: void 0
+    },
+    listItemBadgeProps: {
+      type: Object,
+      default: void 0
+    },
+    headerTitle: {
+      type: [String, Function],
+      default: void 0
+    },
+    headerActions: {
+      type: Array,
+      default: () => []
+    },
+    headerButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerIconProps: {
+      type: Object,
+      default: void 0
+    },
+    headerShareButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerProfileButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerCloseButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerShareIconProps: {
+      type: Object,
+      default: void 0
+    },
+    headerProfileIconProps: {
+      type: Object,
+      default: void 0
+    },
+    messageSenderAvatarProps: {
+      type: Object,
+      default: void 0
+    },
+    messageUploadProps: {
+      type: Object,
+      default: void 0
+    },
+    messageButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    footerInputProps: {
+      type: Object,
+      default: void 0
+    },
+    footerButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    footerUploadProps: {
+      type: Object,
+      default: void 0
+    },
+    footerUploadTriggerProps: {
+      type: Object,
+      default: void 0
+    },
+    footerIconProps: {
+      type: Object,
+      default: void 0
+    },
+    footerSuffixIconProps: {
+      type: Object,
+      default: void 0
+    },
+    emptyProps: {
+      type: Object,
+      default: void 0
+    },
+    retryText: {
+      type: String,
+      default: void 0
+    },
+    typingText: {
+      type: String,
+      default: void 0
+    },
+    closeButtonText: {
+      type: String,
+      default: void 0
+    },
+    shareButtonTooltip: {
+      type: String,
+      default: void 0
+    },
+    profileButtonTooltip: {
+      type: String,
+      default: void 0
+    },
+    unreadNotificationText: {
+      type: String,
+      default: void 0
+    },
+    chatItemsLoading: {
+      type: Boolean,
+      default: false
+    },
+    chatItemsLoadingCount: {
+      type: Number,
+      default: 10
+    },
+    messagesLoading: {
+      type: Boolean,
+      default: false
+    },
+    messagesLoadingCount: {
+      type: Number,
+      default: 10
+    },
+    height: {
+      type: [String, Number],
+      default: 800
+    },
+    onChatSelect: {
+      type: Function,
+      default: void 0
+    },
+    onMessageRetry: {
+      type: Function,
+      default: void 0
+    },
+    bubbleActions: {
+      type: Array,
+      default: void 0
+    },
+    onChatClose: {
+      type: Function,
+      default: void 0
+    },
+    onChatShare: {
+      type: Function,
+      default: void 0
+    },
+    onUserProfile: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentUpload: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentDownload: {
+      type: Function,
+      default: void 0
+    },
+    onFilterChange: {
+      type: Function,
+      default: void 0
+    },
+    onFooterInputChange: {
+      type: Function,
+      default: void 0
+    },
+    onNetworkError: {
+      type: Function,
+      default: void 0
+    },
+    onUploadError: {
+      type: Function,
+      default: void 0
+    },
+    onSendError: {
+      type: Function,
+      default: void 0
+    },
+    onChatItemsScrollToTop: {
+      type: Function,
+      default: void 0
+    },
+    onChatItemsScrollToBottom: {
+      type: Function,
+      default: void 0
+    },
+    onMessagesScrollToTop: {
+      type: Function,
+      default: void 0
+    },
+    onMessagesScrollToBottom: {
+      type: Function,
+      default: void 0
+    }
+  };
 
   var style$15 = cB("chat", `
   height: 100%;
@@ -56310,6 +56577,10 @@
       type: Object,
       default: void 0
     },
+    inputValue: {
+      type: String,
+      default: void 0
+    },
     messages: {
       type: Array,
       default: () => []
@@ -56426,6 +56697,10 @@
       type: Function,
       default: void 0
     },
+    "onUpdate:inputValue": {
+      type: Function,
+      default: void 0
+    },
     onChatClose: {
       type: Function,
       default: void 0
@@ -56478,6 +56753,10 @@
       const headerProfileIconPropsRef = UChat?.headerProfileIconPropsRef ?? vue.toRef(props, "headerProfileIconProps");
       const messageUploadPropsRef = UChat?.messageUploadPropsRef ?? vue.toRef(props, "messageUploadProps");
       const footerInputPropsRef = UChat?.footerInputPropsRef ?? vue.toRef(props, "footerInputProps");
+      const safeFooterInputPropsRef = vue.computed(() => {
+        const { value, ...rest } = footerInputPropsRef.value ?? {};
+        return rest;
+      });
       const footerButtonPropsRef = UChat?.footerButtonPropsRef ?? vue.toRef(props, "footerButtonProps");
       const footerUploadPropsRef = UChat?.footerUploadPropsRef ?? vue.toRef(props, "footerUploadProps");
       const footerIconPropsRef = UChat?.footerIconPropsRef ?? vue.toRef(props, "footerIconProps");
@@ -56602,7 +56881,22 @@
       );
       const messagesBodyRef = vue.ref();
       const inputRef = vue.ref();
-      const inputValue = vue.ref("");
+      const uncontrolledInputValueRef = vue.ref(props.inputValue ?? "");
+      const handleInputValueChange = UChat?.handleInputValueChange ?? ((value) => {
+        uncontrolledInputValueRef.value = value;
+        props["onUpdate:inputValue"]?.(value);
+      });
+      const inputValue = vue.computed({
+        get: () => {
+          if (UChat) {
+            return UChat.inputValueRef.value ?? "";
+          }
+          return props.inputValue !== void 0 ? props.inputValue : uncontrolledInputValueRef.value;
+        },
+        set: (value) => {
+          handleInputValueChange(value);
+        }
+      });
       const attachmentFileList = vue.ref([]);
       const uploadedAttachmentsMap = vue.ref(/* @__PURE__ */ new Map());
       const lastScrollTop = vue.ref(0);
@@ -57177,13 +57471,14 @@
                       }
                     },
                     onKeydown: (e) => {
+                      footerInputPropsRef.value?.onKeydown?.(e);
                       if (e.key === "Enter" && !e.shiftKey) {
                         e.preventDefault();
                         e.stopPropagation();
                         void handleSendMessage();
                       }
                     },
-                    ...footerInputPropsRef.value
+                    ...safeFooterInputPropsRef.value
                   },
                   {
                     prefix: () => renderEditingBlock(),
@@ -57217,6 +57512,8 @@
           mergedClsPrefixRef,
           mergedThemeRef,
           selectedChatRef,
+          inputValueRef: inputValue,
+          handleInputValueChange,
           messagesRef,
           typingChatIdsRef,
           messagesLoadingRef,
@@ -58986,250 +59283,12 @@
     }
   });
 
-  const chatProps = {
-    ...useTheme.props,
-    chatItems: {
-      type: Array,
-      default: () => []
-    },
-    selectedChatId: {
-      type: [String, Number],
-      default: void 0
-    },
-    messages: {
-      type: Array,
-      default: () => []
-    },
-    typingChatIds: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    listEmptyProps: {
-      type: Object,
-      default: void 0
-    },
-    listHeaderTitle: {
-      type: [String, Function],
-      default: "Chats"
-    },
-    listHeaderActions: {
-      type: Array,
-      default: () => []
-    },
-    listHeaderButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    listHeaderIconProps: {
-      type: Object,
-      default: void 0
-    },
-    listItemAvatarProps: {
-      type: Object,
-      default: void 0
-    },
-    listItemBadgeProps: {
-      type: Object,
-      default: void 0
-    },
-    headerTitle: {
-      type: [String, Function],
-      default: void 0
-    },
-    headerActions: {
-      type: Array,
-      default: () => []
-    },
-    headerButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    headerIconProps: {
-      type: Object,
-      default: void 0
-    },
-    headerShareButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    headerProfileButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    headerCloseButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    headerShareIconProps: {
-      type: Object,
-      default: void 0
-    },
-    headerProfileIconProps: {
-      type: Object,
-      default: void 0
-    },
-    messageSenderAvatarProps: {
-      type: Object,
-      default: void 0
-    },
-    messageUploadProps: {
-      type: Object,
-      default: void 0
-    },
-    messageButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    footerInputProps: {
-      type: Object,
-      default: void 0
-    },
-    footerButtonProps: {
-      type: Object,
-      default: void 0
-    },
-    footerUploadProps: {
-      type: Object,
-      default: void 0
-    },
-    footerUploadTriggerProps: {
-      type: Object,
-      default: void 0
-    },
-    footerIconProps: {
-      type: Object,
-      default: void 0
-    },
-    footerSuffixIconProps: {
-      type: Object,
-      default: void 0
-    },
-    emptyProps: {
-      type: Object,
-      default: void 0
-    },
-    retryText: {
-      type: String,
-      default: void 0
-    },
-    typingText: {
-      type: String,
-      default: void 0
-    },
-    closeButtonText: {
-      type: String,
-      default: void 0
-    },
-    shareButtonTooltip: {
-      type: String,
-      default: void 0
-    },
-    profileButtonTooltip: {
-      type: String,
-      default: void 0
-    },
-    unreadNotificationText: {
-      type: String,
-      default: void 0
-    },
-    chatItemsLoading: {
-      type: Boolean,
-      default: false
-    },
-    chatItemsLoadingCount: {
-      type: Number,
-      default: 10
-    },
-    messagesLoading: {
-      type: Boolean,
-      default: false
-    },
-    messagesLoadingCount: {
-      type: Number,
-      default: 10
-    },
-    height: {
-      type: [String, Number],
-      default: 800
-    },
-    onChatSelect: {
-      type: Function,
-      default: void 0
-    },
-    onMessageRetry: {
-      type: Function,
-      default: void 0
-    },
-    bubbleActions: {
-      type: Array,
-      default: void 0
-    },
-    onChatClose: {
-      type: Function,
-      default: void 0
-    },
-    onChatShare: {
-      type: Function,
-      default: void 0
-    },
-    onUserProfile: {
-      type: Function,
-      default: void 0
-    },
-    onAttachmentUpload: {
-      type: Function,
-      default: void 0
-    },
-    onAttachmentDownload: {
-      type: Function,
-      default: void 0
-    },
-    onFilterChange: {
-      type: Function,
-      default: void 0
-    },
-    onFooterInputChange: {
-      type: Function,
-      default: void 0
-    },
-    onNetworkError: {
-      type: Function,
-      default: void 0
-    },
-    onUploadError: {
-      type: Function,
-      default: void 0
-    },
-    onSendError: {
-      type: Function,
-      default: void 0
-    },
-    onChatItemsScrollToTop: {
-      type: Function,
-      default: void 0
-    },
-    onChatItemsScrollToBottom: {
-      type: Function,
-      default: void 0
-    },
-    onMessagesScrollToTop: {
-      type: Function,
-      default: void 0
-    },
-    onMessagesScrollToBottom: {
-      type: Function,
-      default: void 0
-    }
-  };
   var _UChat = vue.defineComponent({
     name: "Chat",
     props: chatProps,
     emits: [
       "update:selectedChatId",
+      "update:inputValue",
       "message-send",
       "message-retry",
       "attachment-upload",
@@ -59350,6 +59409,14 @@
       const mergedSelectedChatIdRef = vue.computed(() => {
         return props.selectedChatId !== void 0 ? props.selectedChatId : uncontrolledSelectedChatIdRef.value;
       });
+      const uncontrolledInputValueRef = vue.ref(props.inputValue ?? "");
+      const mergedInputValueRef = vue.computed(() => {
+        return props.inputValue !== void 0 ? props.inputValue : uncontrolledInputValueRef.value;
+      });
+      const handleInputValueChange = (value) => {
+        uncontrolledInputValueRef.value = value;
+        emit("update:inputValue", value);
+      };
       const selectedChatRef = vue.computed(() => {
         return props.chatItems?.find(
           (item) => item.id === mergedSelectedChatIdRef.value
@@ -59463,6 +59530,8 @@
         chatItemsRef: vue.toRef(props, "chatItems"),
         selectedChatIdRef: mergedSelectedChatIdRef,
         selectedChatRef,
+        inputValueRef: mergedInputValueRef,
+        handleInputValueChange,
         messagesRef: filteredMessagesRef,
         typingChatIdsRef: vue.toRef(props, "typingChatIds"),
         chatItemsLoadingRef: vue.toRef(props, "chatItemsLoading"),
@@ -117635,7 +117704,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.3.3";
+  var version = "2.3.5";
 
   function create({
     componentPrefix = "U",