@sia.soul/sia-react-ui 0.1.22 → 0.1.24

package/dist/{chunk-KLI65JVD.js → chunk-LRPQ5FGE.js}

@@ -1,11 +1,13 @@
 import {
   Button
-} from "./chunk-TZGUBGA4.js";
+} from "./chunk-6WBABNAX.js";
 import {
+  PopupPortal,
   useControlSize,
   useControllableState,
-  usePlaceholderMode
-} from "./chunk-3VJ4CZDQ.js";
+  usePlaceholderMode,
+  withTitleTooltip
+} from "./chunk-NSSPGXNM.js";
 
 // src/components/Icon.tsx
 import { forwardRef } from "react";
@@ -810,132 +812,16 @@ var Icon = forwardRef(function Icon2({ name, size = "1em", strokeWidth = 1.8, ro
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
       style: mergedStyle,
-      ...props,
+      ...withTitleTooltip(props),
       children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", children: resolvedVariant === "filled" ? filledPath : iconPaths[name] })
     }
   );
 });
 
 // src/components/Navigation.tsx
-import { useEffect, useId, useMemo, useRef as useRef2, useState as useState2 } from "react";
-
-// src/components/PopupPortal.tsx
-import { forwardRef as forwardRef2, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function setForwardedRef(ref, value) {
-  if (typeof ref === "function") ref(value);
-  else if (ref) ref.current = value;
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), Math.max(min, max));
-}
-var PopupPortal = forwardRef2(function PopupPortal2({
-  anchorRef,
-  open = true,
-  placement = "bottom-start",
-  offset = 6,
-  viewportPadding = 8,
-  className = "",
-  style,
-  children,
-  ...props
-}, forwardedRef) {
-  const popupRef = useRef(null);
-  const [position, setPosition] = useState();
-  useLayoutEffect(() => {
-    if (!open || typeof document === "undefined") {
-      setPosition(void 0);
-      return;
-    }
-    const update = () => {
-      const anchor = anchorRef.current;
-      const popup = popupRef.current;
-      if (!anchor || !popup) return;
-      const anchorRect = anchor.getBoundingClientRect();
-      const popupRect = popup.getBoundingClientRect();
-      const viewportWidth = document.documentElement.clientWidth;
-      const viewportHeight = document.documentElement.clientHeight;
-      let resolvedPlacement = placement;
-      const availableBelow = Math.max(0, viewportHeight - viewportPadding - anchorRect.bottom - offset);
-      const availableAbove = Math.max(0, anchorRect.top - offset - viewportPadding);
-      const availableRight = Math.max(0, viewportWidth - viewportPadding - anchorRect.right - offset);
-      const availableLeft = Math.max(0, anchorRect.left - offset - viewportPadding);
-      const horizontalSide = placement.startsWith("right") || placement.startsWith("left");
-      if (horizontalSide) {
-        const prefersRight = placement.startsWith("right");
-        const fitsRight = popupRect.width <= availableRight;
-        const fitsLeft = popupRect.width <= availableLeft;
-        if (prefersRight && !fitsRight && (fitsLeft || availableLeft > availableRight)) {
-          resolvedPlacement = placement.replace("right", "left");
-        } else if (!prefersRight && !fitsLeft && (fitsRight || availableRight > availableLeft)) {
-          resolvedPlacement = placement.replace("left", "right");
-        }
-      } else {
-        const prefersBottom = placement.startsWith("bottom");
-        const fitsBelow = popupRect.height <= availableBelow;
-        const fitsAbove = popupRect.height <= availableAbove;
-        if (prefersBottom && !fitsBelow && (fitsAbove || availableAbove > availableBelow)) {
-          resolvedPlacement = placement.replace("bottom", "top");
-        } else if (!prefersBottom && !fitsAbove && (fitsBelow || availableBelow > availableAbove)) {
-          resolvedPlacement = placement.replace("top", "bottom");
-        }
-      }
-      const resolvedHorizontalSide = resolvedPlacement.startsWith("right") || resolvedPlacement.startsWith("left");
-      const top = resolvedHorizontalSide ? resolvedPlacement.endsWith("end") ? anchorRect.bottom - popupRect.height : anchorRect.top : resolvedPlacement.startsWith("bottom") ? anchorRect.bottom + offset : anchorRect.top - popupRect.height - offset;
-      const availableHeight = resolvedHorizontalSide ? Math.max(0, viewportHeight - viewportPadding * 2) : resolvedPlacement.startsWith("bottom") ? availableBelow : availableAbove;
-      const alignedLeft = resolvedHorizontalSide ? resolvedPlacement.startsWith("right") ? anchorRect.right + offset : anchorRect.left - popupRect.width - offset : resolvedPlacement.endsWith("end") ? anchorRect.right - popupRect.width : anchorRect.left;
-      const next = {
-        top: clamp(top, viewportPadding, viewportHeight - popupRect.height - viewportPadding),
-        left: clamp(alignedLeft, viewportPadding, viewportWidth - popupRect.width - viewportPadding),
-        anchorWidth: anchorRect.width,
-        availableHeight,
-        placement: resolvedPlacement
-      };
-      setPosition((current) => current && current.top === next.top && current.left === next.left && current.anchorWidth === next.anchorWidth && current.availableHeight === next.availableHeight && current.placement === next.placement ? current : next);
-    };
-    update();
-    window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
-    const observer = new ResizeObserver(update);
-    if (anchorRef.current) observer.observe(anchorRef.current);
-    if (popupRef.current) observer.observe(popupRef.current);
-    return () => {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
-      observer.disconnect();
-    };
-  }, [anchorRef, offset, open, placement, viewportPadding]);
-  if (!open || typeof document === "undefined") return null;
-  return createPortal(
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        ref: (node) => {
-          popupRef.current = node;
-          setForwardedRef(forwardedRef, node);
-        },
-        className: `sia-popup-portal ${className}`.trim(),
-        "data-sia-popup-layer": "",
-        "data-placement": position?.placement ?? placement,
-        style: {
-          ...style,
-          "--sia-popup-anchor-width": `${position?.anchorWidth ?? anchorRef.current?.getBoundingClientRect().width ?? 0}px`,
-          "--sia-popup-available-height": position ? `${position.availableHeight}px` : void 0,
-          top: position?.top ?? 0,
-          left: position?.left ?? 0,
-          visibility: position ? "visible" : "hidden"
-        },
-        ...props,
-        children
-      }
-    ),
-    document.body
-  );
-});
-
-// src/components/Navigation.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createElement } from "react";
 function MenuPopup({
   anchorRef,
   open,
@@ -946,7 +832,7 @@ function MenuPopup({
   onMouseEnter,
   onMouseLeave
 }) {
-  const [mounted, setMounted] = useState2(open);
+  const [mounted, setMounted] = useState(open);
   useEffect(() => {
     if (open) {
       setMounted(true);
@@ -955,7 +841,7 @@ function MenuPopup({
     const timer = window.setTimeout(() => setMounted(false), 160);
     return () => window.clearTimeout(timer);
   }, [open]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     PopupPortal,
     {
       anchorRef,
@@ -966,7 +852,7 @@ function MenuPopup({
       "data-sia-menu-owner": menuId,
       onMouseEnter,
       onMouseLeave,
-      children: /* @__PURE__ */ jsx4("ul", { className: "sia-menu__popup-list", role: "menu", children })
+      children: /* @__PURE__ */ jsx3("ul", { className: "sia-menu__popup-list", role: "menu", children })
     }
   );
 }
@@ -977,8 +863,8 @@ function MenuEntry({
   props,
   reserveIcon
 }) {
-  const anchorRef = useRef2(null);
-  const closeTimerRef = useRef2(void 0);
+  const anchorRef = useRef(null);
+  const closeTimerRef = useRef(void 0);
   const hasChildren = Boolean(item.children?.length);
   const isOpen = props.open.includes(item.key);
   const isSelected = props.selected.includes(item.key);
@@ -999,7 +885,7 @@ function MenuEntry({
     closeTimerRef.current = window.setTimeout(() => props.toggle(item.key, false), 100);
   }
   const hover = props.triggerSubMenuAction === "hover" && hasChildren && !inlineSubmenu;
-  const submenu = hasChildren ? /* @__PURE__ */ jsx4(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [item.key, ...parents], props }) : null;
+  const submenu = hasChildren ? /* @__PURE__ */ jsx3(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [item.key, ...parents], props }) : null;
   const popupPlacement = props.mode === "horizontal" && level === 0 ? "bottom-start" : "right-start";
   return /* @__PURE__ */ jsxs3(
     "li",
@@ -1018,20 +904,20 @@ function MenuEntry({
             type: "button",
             className: "sia-menu__item",
             style: { paddingInlineStart: props.mode === "inline" && !props.inlineCollapsed ? 12 + level * props.inlineIndent : void 0 },
-            title: collapsed ? item.title ?? (typeof item.label === "string" ? item.label : void 0) : item.title,
+            ...withTitleTooltip({ title: collapsed ? item.title ?? (typeof item.label === "string" ? item.label : void 0) : item.title }),
             disabled: item.disabled,
             "aria-current": isSelected ? "page" : void 0,
             "aria-expanded": hasChildren ? isOpen : void 0,
             onClick: (event) => hasChildren ? props.toggle(item.key) : props.select(item, path, event),
             children: [
-              reserveIcon ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__icon", "aria-hidden": !item.icon || void 0, children: item.icon }) : null,
-              !collapsed ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__label", children: item.label }) : null,
-              !collapsed && item.extra ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__extra", children: item.extra }) : null,
-              !collapsed && hasChildren ? /* @__PURE__ */ jsx4(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
+              reserveIcon ? /* @__PURE__ */ jsx3("span", { className: "sia-menu__icon", "aria-hidden": !item.icon || void 0, children: item.icon }) : null,
+              !collapsed ? /* @__PURE__ */ jsx3("span", { className: "sia-menu__label", children: item.label }) : null,
+              !collapsed && item.extra ? /* @__PURE__ */ jsx3("span", { className: "sia-menu__extra", children: item.extra }) : null,
+              !collapsed && hasChildren ? /* @__PURE__ */ jsx3(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
             ]
           }
         ),
-        hasChildren ? inlineSubmenu ? /* @__PURE__ */ jsx4("ul", { className: "sia-menu__submenu", role: "menu", "aria-hidden": !isOpen, children: submenu }) : /* @__PURE__ */ jsx4(
+        hasChildren ? inlineSubmenu ? /* @__PURE__ */ jsx3("ul", { className: "sia-menu__submenu", role: "menu", "aria-hidden": !isOpen, children: submenu }) : /* @__PURE__ */ jsx3(
           MenuPopup,
           {
             anchorRef,
@@ -1058,13 +944,13 @@ function MenuLevel({
   props,
   reserveIcon = hasMenuIcon(items)
 }) {
-  return /* @__PURE__ */ jsx4(Fragment3, { children: items.map((item, index) => {
-    if (item.type === "divider") return /* @__PURE__ */ jsx4("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
+  return /* @__PURE__ */ jsx3(Fragment3, { children: items.map((item, index) => {
+    if (item.type === "divider") return /* @__PURE__ */ jsx3("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
     if (item.type === "group") return /* @__PURE__ */ jsxs3("li", { className: "sia-menu__group", children: [
-      /* @__PURE__ */ jsx4("div", { className: "sia-menu__group-title", children: item.label }),
-      /* @__PURE__ */ jsx4("ul", { role: "group", children: /* @__PURE__ */ jsx4(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props, reserveIcon }) })
+      /* @__PURE__ */ jsx3("div", { className: "sia-menu__group-title", children: item.label }),
+      /* @__PURE__ */ jsx3("ul", { role: "group", children: /* @__PURE__ */ jsx3(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props, reserveIcon }) })
     ] }, item.key);
-    return /* @__PURE__ */ jsx4(MenuEntry, { item, level, parents, props, reserveIcon }, item.key);
+    return /* @__PURE__ */ jsx3(MenuEntry, { item, level, parents, props, reserveIcon }, item.key);
   }) });
 }
 function Menu({
@@ -1088,7 +974,7 @@ function Menu({
   ...rest
 }) {
   const menuId = useId();
-  const rootRef = useRef2(null);
+  const rootRef = useRef(null);
   const [selected, setSelected] = useControllableState({ value: selectedKeys, defaultValue: defaultSelectedKeys });
   const [open, setOpen] = useControllableState({ value: openKeys, defaultValue: defaultOpenKeys, onChange: (next) => onOpenChange?.([...next]) });
   useEffect(() => {
@@ -1117,25 +1003,25 @@ function Menu({
     else onSelect?.({ ...info, selectedKeys: [...next] });
     if (mode !== "inline") setOpen([]);
   }
-  return /* @__PURE__ */ jsx4("ul", { ref: rootRef, className: `sia-menu sia-menu--${mode} sia-menu--${theme}${inlineCollapsed ? " sia-menu--collapsed" : ""} ${className}`.trim(), role: "menu", ...rest, "data-sia-menu-owner": menuId, children: /* @__PURE__ */ jsx4(MenuLevel, { items, level: 0, parents: [], props: { menuId, mode, theme, multiple, selectable, inlineCollapsed, inlineIndent, triggerSubMenuAction, selected, open, select, toggle } }) });
+  return /* @__PURE__ */ jsx3("ul", { ref: rootRef, className: `sia-menu sia-menu--${mode} sia-menu--${theme}${inlineCollapsed ? " sia-menu--collapsed" : ""} ${className}`.trim(), role: "menu", ...withTitleTooltip(rest), "data-sia-menu-owner": menuId, children: /* @__PURE__ */ jsx3(MenuLevel, { items, level: 0, parents: [], props: { menuId, mode, theme, multiple, selectable, inlineCollapsed, inlineIndent, triggerSubMenuAction, selected, open, select, toggle } }) });
 }
 function Steps({ items, current = 0, initial = 0, direction = "horizontal", type = "default", size = "default", status = "process", progressDot = false, onChange, className = "", ...props }) {
-  return /* @__PURE__ */ jsx4("div", { className: `sia-steps sia-steps--${direction} sia-steps--${type} sia-steps--${size} ${className}`.trim(), ...props, children: items.map((item, rawIndex) => {
+  return /* @__PURE__ */ jsx3("div", { className: `sia-steps sia-steps--${direction} sia-steps--${type} sia-steps--${size} ${className}`.trim(), ...withTitleTooltip(props), children: items.map((item, rawIndex) => {
     const index = rawIndex + initial;
     const itemStatus = item.status ?? (index < current ? "finish" : index === current ? status : "wait");
-    const dot = /* @__PURE__ */ jsx4("span", { className: "sia-steps__dot" });
-    const icon = progressDot ? typeof progressDot === "function" ? progressDot(dot, { index, status: itemStatus, title: item.title, description: item.description }) : dot : item.icon ?? (itemStatus === "finish" ? /* @__PURE__ */ jsx4(Icon, { name: "check", size: 15 }) : itemStatus === "error" ? /* @__PURE__ */ jsx4(Icon, { name: "close", size: 14 }) : index + 1);
+    const dot = /* @__PURE__ */ jsx3("span", { className: "sia-steps__dot" });
+    const icon = progressDot ? typeof progressDot === "function" ? progressDot(dot, { index, status: itemStatus, title: item.title, description: item.description }) : dot : item.icon ?? (itemStatus === "finish" ? /* @__PURE__ */ jsx3(Icon, { name: "check", size: 15 }) : itemStatus === "error" ? /* @__PURE__ */ jsx3(Icon, { name: "close", size: 14 }) : index + 1);
     return /* @__PURE__ */ jsxs3("button", { type: "button", className: `sia-steps__item sia-steps__item--${itemStatus}`, disabled: item.disabled || !onChange, onClick: () => onChange?.(index), children: [
       /* @__PURE__ */ jsxs3("span", { className: "sia-steps__head", children: [
-        /* @__PURE__ */ jsx4("span", { className: "sia-steps__icon", children: icon }),
-        /* @__PURE__ */ jsx4("span", { className: "sia-steps__tail" })
+        /* @__PURE__ */ jsx3("span", { className: "sia-steps__icon", children: icon }),
+        /* @__PURE__ */ jsx3("span", { className: "sia-steps__tail" })
       ] }),
       /* @__PURE__ */ jsxs3("span", { className: "sia-steps__content", children: [
         /* @__PURE__ */ jsxs3("span", { className: "sia-steps__title", children: [
           item.title,
-          item.subTitle ? /* @__PURE__ */ jsx4("small", { children: item.subTitle }) : null
+          item.subTitle ? /* @__PURE__ */ jsx3("small", { children: item.subTitle }) : null
         ] }),
-        item.description ? /* @__PURE__ */ jsx4("span", { className: "sia-steps__description", children: item.description }) : null
+        item.description ? /* @__PURE__ */ jsx3("span", { className: "sia-steps__description", children: item.description }) : null
       ] })
     ] }, index);
   }) });
@@ -1153,15 +1039,12 @@ function Segmented({ options, value, defaultValue, size: sizeProp, block = false
     const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? enabled[(index + 1) % enabled.length] : enabled[(index - 1 + enabled.length) % enabled.length];
     if (next) setCurrent(next.value);
   }
-  return /* @__PURE__ */ jsx4("div", { className: `sia-segmented sia-segmented--${size}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...props, children: normalized.map((option) => /* @__PURE__ */ jsxs3("button", { type: "button", role: "radio", "aria-checked": option.value === current, title: option.title, className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, onClick: () => setCurrent(option.value), children: [
-    option.icon,
-    /* @__PURE__ */ jsx4("span", { children: option.label ?? option.value })
-  ] }, option.value)) });
+  return /* @__PURE__ */ jsx3("div", { className: `sia-segmented sia-segmented--${size}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ createElement("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ jsx3("span", { children: option.label ?? option.value }))) });
 }
 
 // src/components/Dropdown.tsx
-import { cloneElement, isValidElement, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var placementMap = {
   bottomLeft: "bottom-start",
   bottomRight: "bottom-end",
@@ -1193,14 +1076,14 @@ function DropdownRoot({
   onKeyDown,
   ...props
 }) {
-  const rootRef = useRef3(null);
-  const contextAnchorRef = useRef3(null);
-  const popupRef = useRef3(null);
-  const openTimerRef = useRef3(void 0);
-  const closeTimerRef = useRef3(void 0);
-  const [internalOpen, setInternalOpen] = useState3(defaultOpen);
-  const [mounted, setMounted] = useState3(open ?? defaultOpen);
-  const [contextPoint, setContextPoint] = useState3();
+  const rootRef = useRef2(null);
+  const contextAnchorRef = useRef2(null);
+  const popupRef = useRef2(null);
+  const openTimerRef = useRef2(void 0);
+  const closeTimerRef = useRef2(void 0);
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
+  const [mounted, setMounted] = useState2(open ?? defaultOpen);
+  const [contextPoint, setContextPoint] = useState2();
   const visible = open ?? internalOpen;
   const triggerSet = new Set(trigger);
   const pointAtCenter = typeof arrow === "object" && arrow.pointAtCenter;
@@ -1320,7 +1203,7 @@ function DropdownRoot({
       updateOpen(true, "trigger");
     }
   }
-  const menuNode = /* @__PURE__ */ jsx5(
+  const menuNode = /* @__PURE__ */ jsx4(
     Menu,
     {
       mode: "vertical",
@@ -1339,7 +1222,7 @@ function DropdownRoot({
   );
   const triggerNode = showTriggerIcon && isValidElement(children) && children.type === Button && children.props.children !== void 0 && children.props.children !== null ? cloneElement(children, {}, /* @__PURE__ */ jsxs4("span", { className: "sia-dropdown__trigger-content", children: [
     children.props.children,
-    /* @__PURE__ */ jsx5(Icon, { name: "chevron-down", size: 14, className: "sia-dropdown__trigger-icon" })
+    /* @__PURE__ */ jsx4(Icon, { name: "chevron-down", size: 14, className: "sia-dropdown__trigger-icon" })
   ] })) : children;
   return /* @__PURE__ */ jsxs4(
     "span",
@@ -1354,10 +1237,10 @@ function DropdownRoot({
       onMouseLeave: handleMouseLeave,
       onContextMenu: handleContextMenu,
       onKeyDown: handleKeyDown,
-      ...props,
+      ...withTitleTooltip(props),
       children: [
         triggerNode,
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "span",
           {
             ref: contextAnchorRef,
@@ -1366,7 +1249,7 @@ function DropdownRoot({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           PopupPortal,
           {
             ref: popupRef,
@@ -1402,14 +1285,14 @@ function DropdownButton({
   ...dropdownProps
 }) {
   return /* @__PURE__ */ jsxs4("span", { className: `sia-dropdown-button ${className}`.trim(), children: [
-    /* @__PURE__ */ jsx5(Button, { ...buttonProps, disabled, onClick, children }),
-    /* @__PURE__ */ jsx5(DropdownRoot, { ...dropdownProps, disabled, trigger, showTriggerIcon: false, children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4(Button, { ...buttonProps, disabled, onClick, children }),
+    /* @__PURE__ */ jsx4(DropdownRoot, { ...dropdownProps, disabled, trigger, showTriggerIcon: false, children: /* @__PURE__ */ jsx4(
       Button,
       {
         ...buttonProps,
         className: `sia-dropdown-button__arrow ${buttonProps?.className ?? ""}`.trim(),
         disabled,
-        icon: /* @__PURE__ */ jsx5(Icon, { name: "chevron-down", size: 14 }),
+        icon: /* @__PURE__ */ jsx4(Icon, { name: "chevron-down", size: 14 }),
         "aria-label": "\u5C55\u5F00\u4E0B\u62C9\u83DC\u5355"
       }
     ) })
@@ -1421,9 +1304,9 @@ var Dropdown = Object.assign(DropdownRoot, {
 });
 
 // src/components/Input.tsx
-import { forwardRef as forwardRef3, useId as useId2, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var Input = forwardRef3(function Input2({
+import { forwardRef as forwardRef2, useId as useId2, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Input = forwardRef2(function Input2({
   label,
   hint,
   status = "default",
@@ -1447,8 +1330,8 @@ var Input = forwardRef3(function Input2({
   const size = useControlSize(sizeProp);
   const fallbackId = useId2();
   const inputId = id ?? fallbackId;
-  const localRef = useRef4(null);
-  const [uncontrolledValue, setUncontrolledValue] = useState4(() => defaultValue === void 0 ? "" : String(defaultValue));
+  const localRef = useRef3(null);
+  const [uncontrolledValue, setUncontrolledValue] = useState3(() => defaultValue === void 0 ? "" : String(defaultValue));
   const currentText = value !== void 0 ? String(value) : uncontrolledValue;
   const hasValue = currentText.length > 0;
   const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
@@ -1486,10 +1369,10 @@ var Input = forwardRef3(function Input2({
     event.preventDefault();
     localRef.current?.focus({ preventScroll: true });
   }
-  const input = /* @__PURE__ */ jsx6(
+  const input = /* @__PURE__ */ jsx5(
     "input",
     {
-      ...props,
+      ...withTitleTooltip(props),
       ref: setRef,
       id: inputId,
       className: "sia-input",
@@ -1504,23 +1387,23 @@ var Input = forwardRef3(function Input2({
     }
   );
   const control = /* @__PURE__ */ jsxs5("span", { onMouseDown: handleControlMouseDown, className: `sia-input-control sia-input-control--${size} sia-input-control--${status}${floatingPlaceholder ? " sia-input-control--floating" : ""}${floatingPlaceholder && hasValue ? " is-filled" : ""}${disabled ? " is-disabled" : ""}`, children: [
-    prefix ? /* @__PURE__ */ jsx6("span", { className: "sia-input-control__affix", children: prefix }) : null,
+    prefix ? /* @__PURE__ */ jsx5("span", { className: "sia-input-control__affix", children: prefix }) : null,
     floatingPlaceholder ? /* @__PURE__ */ jsxs5("span", { className: "sia-input-control__input-wrap", children: [
       input,
-      /* @__PURE__ */ jsx6("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
+      /* @__PURE__ */ jsx5("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
     ] }) : input,
-    allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx6("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ jsx6(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    suffix ? /* @__PURE__ */ jsx6("span", { className: "sia-input-control__affix", children: suffix }) : null,
+    allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx5("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ jsx5(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+    suffix ? /* @__PURE__ */ jsx5("span", { className: "sia-input-control__affix", children: suffix }) : null,
     showCount ? /* @__PURE__ */ jsxs5("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
       currentText.length,
       maxLength !== void 0 ? `/${maxLength}` : null
     ] }) : null
   ] });
-  if (!label && !hint) return /* @__PURE__ */ jsx6("span", { className: `sia-field ${className}`.trim(), children: control });
+  if (!label && !hint) return /* @__PURE__ */ jsx5("span", { className: `sia-field ${className}`.trim(), children: control });
   return /* @__PURE__ */ jsxs5("span", { className: `sia-field ${className}`.trim(), children: [
-    label ? /* @__PURE__ */ jsx6("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
+    label ? /* @__PURE__ */ jsx5("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
     control,
-    hint ? /* @__PURE__ */ jsx6("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
+    hint ? /* @__PURE__ */ jsx5("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
   ] });
 });
 
@@ -1528,7 +1411,6 @@ export {
   ICON_NAMES,
   FILLED_ICON_NAMES,
   Icon,
-  PopupPortal,
   Menu,
   Steps,
   Segmented,