@sia.soul/sia-react-ui 0.1.0

package/dist/chunk-DZ45HRVP.js

@@ -0,0 +1,583 @@
+import {
+  Button
+} from "./chunk-MBS2HXLZ.js";
+import {
+  Icon,
+  PopupPortal,
+  useControllableState
+} from "./chunk-YCVXUMGP.js";
+
+// src/components/Navigation.tsx
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MenuPopup({
+  anchorRef,
+  open,
+  placement,
+  menuId,
+  theme,
+  children,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const [mounted, setMounted] = useState(open);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return void 0;
+    }
+    const timer = window.setTimeout(() => setMounted(false), 160);
+    return () => window.clearTimeout(timer);
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    PopupPortal,
+    {
+      anchorRef,
+      open: mounted,
+      placement,
+      offset: 4,
+      className: `sia-menu__popup sia-menu--${theme}${open ? " is-open" : " is-closing"}`,
+      "data-sia-menu-owner": menuId,
+      onMouseEnter,
+      onMouseLeave,
+      children: /* @__PURE__ */ jsx("ul", { className: "sia-menu__popup-list", role: "menu", children })
+    }
+  );
+}
+function MenuEntry({
+  item,
+  level,
+  parents,
+  props
+}) {
+  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);
+  const path = [item.key, ...parents];
+  const collapsed = props.inlineCollapsed && level === 0;
+  const inlineSubmenu = props.mode === "inline" && !collapsed;
+  useEffect(() => () => {
+    if (closeTimerRef.current !== void 0) window.clearTimeout(closeTimerRef.current);
+  }, []);
+  function cancelClose() {
+    if (closeTimerRef.current !== void 0) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = void 0;
+    }
+  }
+  function scheduleClose() {
+    cancelClose();
+    closeTimerRef.current = window.setTimeout(() => props.toggle(item.key, false), 100);
+  }
+  const hover = props.triggerSubMenuAction === "hover" && hasChildren && !inlineSubmenu;
+  const submenu = hasChildren ? /* @__PURE__ */ jsx(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__ */ jsxs(
+    "li",
+    {
+      className: `sia-menu__entry${isOpen ? " is-open" : ""}${isSelected ? " is-selected" : ""}${item.disabled ? " is-disabled" : ""}${item.danger ? " is-danger" : ""}`,
+      onMouseEnter: hover ? () => {
+        cancelClose();
+        props.toggle(item.key, true);
+      } : void 0,
+      onMouseLeave: hover ? scheduleClose : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: anchorRef,
+            type: "button",
+            className: "sia-menu__item",
+            style: { paddingInlineStart: collapsed ? void 0 : 12 + level * props.inlineIndent },
+            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: [
+              item.icon ? /* @__PURE__ */ jsx("span", { className: "sia-menu__icon", children: item.icon }) : null,
+              !collapsed ? /* @__PURE__ */ jsx("span", { className: "sia-menu__label", children: item.label }) : null,
+              !collapsed && item.extra ? /* @__PURE__ */ jsx("span", { className: "sia-menu__extra", children: item.extra }) : null,
+              !collapsed && hasChildren ? /* @__PURE__ */ jsx(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
+            ]
+          }
+        ),
+        hasChildren ? inlineSubmenu ? /* @__PURE__ */ jsx("ul", { className: "sia-menu__submenu", role: "menu", "aria-hidden": !isOpen, children: submenu }) : /* @__PURE__ */ jsx(
+          MenuPopup,
+          {
+            anchorRef,
+            open: isOpen,
+            placement: popupPlacement,
+            menuId: props.menuId,
+            theme: props.theme,
+            onMouseEnter: hover ? cancelClose : void 0,
+            onMouseLeave: hover ? scheduleClose : void 0,
+            children: submenu
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MenuLevel({
+  items,
+  level,
+  parents,
+  props
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item, index) => {
+    if (item.type === "divider") return /* @__PURE__ */ jsx("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
+    if (item.type === "group") return /* @__PURE__ */ jsxs("li", { className: "sia-menu__group", children: [
+      /* @__PURE__ */ jsx("div", { className: "sia-menu__group-title", children: item.label }),
+      /* @__PURE__ */ jsx("ul", { role: "group", children: /* @__PURE__ */ jsx(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props }) })
+    ] }, item.key);
+    return /* @__PURE__ */ jsx(MenuEntry, { item, level, parents, props }, item.key);
+  }) });
+}
+function Menu({
+  items,
+  mode = "vertical",
+  theme = "light",
+  selectedKeys,
+  defaultSelectedKeys = [],
+  openKeys,
+  defaultOpenKeys = [],
+  multiple = false,
+  selectable = true,
+  inlineCollapsed = false,
+  inlineIndent = 20,
+  triggerSubMenuAction = "click",
+  onClick,
+  onSelect,
+  onDeselect,
+  onOpenChange,
+  className = "",
+  ...rest
+}) {
+  const menuId = useId();
+  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(() => {
+    if (mode === "inline" || !open.length) return void 0;
+    const closeOutside = (event) => {
+      const target = event.target;
+      if (rootRef.current?.contains(target)) return;
+      const owner = target instanceof Element ? target.closest("[data-sia-menu-owner]")?.getAttribute("data-sia-menu-owner") : null;
+      if (owner !== menuId) setOpen([]);
+    };
+    document.addEventListener("pointerdown", closeOutside);
+    return () => document.removeEventListener("pointerdown", closeOutside);
+  }, [menuId, mode, open.length, setOpen]);
+  function toggle(key, force) {
+    const shouldOpen = force ?? !open.includes(key);
+    setOpen(shouldOpen ? open.includes(key) ? open : [...open, key] : open.filter((item) => item !== key));
+  }
+  function select(item, keyPath, domEvent) {
+    const info = { key: item.key, keyPath, domEvent, item };
+    onClick?.(info);
+    if (!selectable) return;
+    const exists = selected.includes(item.key);
+    const next = multiple ? exists ? selected.filter((key) => key !== item.key) : [...selected, item.key] : [item.key];
+    setSelected(next);
+    if (exists && multiple) onDeselect?.({ ...info, selectedKeys: [...next] });
+    else onSelect?.({ ...info, selectedKeys: [...next] });
+    if (mode !== "inline") setOpen([]);
+  }
+  return /* @__PURE__ */ jsx("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__ */ jsx(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__ */ jsx("div", { className: `sia-steps sia-steps--${direction} sia-steps--${type} sia-steps--${size} ${className}`.trim(), ...props, children: items.map((item, rawIndex) => {
+    const index = rawIndex + initial;
+    const itemStatus = item.status ?? (index < current ? "finish" : index === current ? status : "wait");
+    const dot = /* @__PURE__ */ jsx("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__ */ jsx(Icon, { name: "check", size: 15 }) : itemStatus === "error" ? /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) : index + 1);
+    return /* @__PURE__ */ jsxs("button", { type: "button", className: `sia-steps__item sia-steps__item--${itemStatus}`, disabled: item.disabled || !onChange, onClick: () => onChange?.(index), children: [
+      /* @__PURE__ */ jsxs("span", { className: "sia-steps__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "sia-steps__icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "sia-steps__tail" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "sia-steps__content", children: [
+        /* @__PURE__ */ jsxs("span", { className: "sia-steps__title", children: [
+          item.title,
+          item.subTitle ? /* @__PURE__ */ jsx("small", { children: item.subTitle }) : null
+        ] }),
+        item.description ? /* @__PURE__ */ jsx("span", { className: "sia-steps__description", children: item.description }) : null
+      ] })
+    ] }, index);
+  }) });
+}
+function Segmented({ options, value, defaultValue, size = "medium", block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+  const normalized = useMemo(() => options.map((option) => typeof option === "object" ? option : { label: option, value: option }), [options]);
+  const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? normalized[0]?.value, onChange: (next) => next !== void 0 && onChange?.(next) });
+  function keyboard(event) {
+    onKeyDown?.(event);
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    const enabled = normalized.filter((option) => !option.disabled);
+    const index = enabled.findIndex((option) => option.value === current);
+    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__ */ jsx("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__ */ jsxs("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__ */ jsx("span", { children: option.label ?? option.value })
+  ] }, option.value)) });
+}
+
+// src/components/Dropdown.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var placementMap = {
+  bottomLeft: "bottom-start",
+  bottomRight: "bottom-end",
+  topLeft: "top-start",
+  topRight: "top-end"
+};
+function DropdownRoot({
+  menu,
+  children,
+  trigger = ["hover"],
+  placement = "bottomLeft",
+  open,
+  defaultOpen = false,
+  disabled = false,
+  arrow = false,
+  autoFocus = false,
+  openDelay = 80,
+  closeDelay = 120,
+  popupClassName = "",
+  popupStyle,
+  popupRender,
+  onOpenChange,
+  className = "",
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onContextMenu,
+  onKeyDown,
+  ...props
+}) {
+  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;
+  function clearTimer(ref) {
+    if (ref.current === void 0) return;
+    window.clearTimeout(ref.current);
+    ref.current = void 0;
+  }
+  function clearTimers() {
+    clearTimer(openTimerRef);
+    clearTimer(closeTimerRef);
+  }
+  function updateOpen(next, source) {
+    clearTimers();
+    if (next === visible) return;
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next, { source });
+  }
+  function scheduleOpen() {
+    clearTimer(closeTimerRef);
+    clearTimer(openTimerRef);
+    openTimerRef.current = window.setTimeout(() => updateOpen(true, "trigger"), Math.max(0, openDelay));
+  }
+  function scheduleClose() {
+    clearTimer(openTimerRef);
+    clearTimer(closeTimerRef);
+    closeTimerRef.current = window.setTimeout(() => updateOpen(false, "trigger"), Math.max(0, closeDelay));
+  }
+  useEffect2(() => {
+    if (visible) {
+      setMounted(true);
+      return void 0;
+    }
+    const timer = window.setTimeout(() => setMounted(false), 160);
+    return () => window.clearTimeout(timer);
+  }, [visible]);
+  useEffect2(() => {
+    if (!visible && !mounted) setContextPoint(void 0);
+  }, [mounted, visible]);
+  useEffect2(() => () => clearTimers(), []);
+  useEffect2(() => {
+    if (!visible) return void 0;
+    const contextMenuTrigger = triggerSet.has("contextMenu");
+    const closeOutside = (event) => {
+      const target = event.target;
+      if (popupRef.current?.contains(target)) return;
+      if (!contextMenuTrigger && rootRef.current?.contains(target)) return;
+      const targetOwner = target instanceof Element ? target.closest("[data-sia-menu-owner]")?.getAttribute("data-sia-menu-owner") : null;
+      const menuOwner = popupRef.current?.querySelector("[data-sia-menu-owner]")?.getAttribute("data-sia-menu-owner");
+      if (menuOwner && targetOwner === menuOwner) return;
+      updateOpen(false, "trigger");
+    };
+    const closeWithEscape = (event) => {
+      if (event.key !== "Escape") return;
+      updateOpen(false, "trigger");
+      rootRef.current?.querySelector("button, a, [tabindex]:not([tabindex='-1'])")?.focus();
+    };
+    const keepOpenOverNestedMenu = (event) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest(".sia-menu__popup")) clearTimer(closeTimerRef);
+    };
+    document.addEventListener("pointerdown", closeOutside);
+    document.addEventListener("keydown", closeWithEscape);
+    document.addEventListener("pointerover", keepOpenOverNestedMenu);
+    return () => {
+      document.removeEventListener("pointerdown", closeOutside);
+      document.removeEventListener("keydown", closeWithEscape);
+      document.removeEventListener("pointerover", keepOpenOverNestedMenu);
+    };
+  }, [visible]);
+  useEffect2(() => {
+    if (!visible || !mounted || !autoFocus) return void 0;
+    const frame = window.requestAnimationFrame(() => {
+      popupRef.current?.querySelector(
+        "[data-sia-dropdown-autofocus], input:not(:disabled), textarea:not(:disabled), .sia-menu__item:not(:disabled)"
+      )?.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [autoFocus, mounted, visible]);
+  function handleMenuClick(info) {
+    info.domEvent.stopPropagation();
+    menu.onClick?.(info);
+    updateOpen(false, "menu");
+  }
+  function handleClick(event) {
+    onClick?.(event);
+    if (disabled || !triggerSet.has("click") || event.defaultPrevented) return;
+    setContextPoint(void 0);
+    updateOpen(!visible, "trigger");
+  }
+  function handleMouseEnter(event) {
+    onMouseEnter?.(event);
+    if (!disabled && triggerSet.has("hover")) scheduleOpen();
+  }
+  function handleMouseLeave(event) {
+    onMouseLeave?.(event);
+    if (!disabled && triggerSet.has("hover")) scheduleClose();
+  }
+  function handleContextMenu(event) {
+    onContextMenu?.(event);
+    if (disabled || !triggerSet.has("contextMenu") || event.defaultPrevented) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setContextPoint({ x: event.clientX, y: event.clientY });
+    updateOpen(true, "trigger");
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (disabled || event.defaultPrevented) return;
+    if (event.key === "ArrowDown" && (triggerSet.has("click") || triggerSet.has("hover"))) {
+      event.preventDefault();
+      setContextPoint(void 0);
+      updateOpen(true, "trigger");
+    } else if (triggerSet.has("contextMenu") && (event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) {
+      event.preventDefault();
+      setContextPoint(void 0);
+      updateOpen(true, "trigger");
+    }
+  }
+  const menuNode = /* @__PURE__ */ jsx2(
+    Menu,
+    {
+      mode: "vertical",
+      theme: menu.theme,
+      items: menu.items,
+      multiple: menu.multiple,
+      selectable: menu.selectable,
+      selectedKeys: menu.selectedKeys,
+      defaultSelectedKeys: menu.defaultSelectedKeys,
+      triggerSubMenuAction: "hover",
+      onClick: handleMenuClick,
+      onSelect: menu.onSelect,
+      onDeselect: menu.onDeselect,
+      className: "sia-dropdown__menu"
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ref: rootRef,
+      className: `sia-dropdown${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(),
+      "aria-expanded": visible,
+      "aria-haspopup": "menu",
+      tabIndex: triggerSet.has("contextMenu") ? 0 : void 0,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onContextMenu: handleContextMenu,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            ref: contextAnchorRef,
+            className: "sia-dropdown__context-anchor",
+            style: contextPoint ? { left: contextPoint.x, top: contextPoint.y } : void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          PopupPortal,
+          {
+            ref: popupRef,
+            anchorRef: contextPoint ? contextAnchorRef : rootRef,
+            open: mounted,
+            placement: contextPoint ? "bottom-start" : placementMap[placement],
+            offset: contextPoint ? 2 : 6,
+            className: `sia-dropdown__popup${visible ? " is-open" : " is-closing"}${arrow ? " sia-dropdown__popup--arrow" : ""}${pointAtCenter ? " sia-dropdown__popup--arrow-center" : ""} ${popupClassName}`.trim(),
+            style: popupStyle,
+            onMouseEnter: () => {
+              clearTimer(closeTimerRef);
+              if (!disabled && triggerSet.has("hover")) clearTimer(openTimerRef);
+            },
+            onMouseLeave: () => {
+              if (!disabled && triggerSet.has("hover")) scheduleClose();
+            },
+            onClick: (event) => event.stopPropagation(),
+            children: popupRender ? popupRender(menuNode) : menuNode
+          },
+          contextPoint ? `context-${contextPoint.x}-${contextPoint.y}` : "trigger"
+        )
+      ]
+    }
+  );
+}
+function DropdownButton({
+  children,
+  className = "",
+  buttonProps,
+  onClick,
+  disabled,
+  trigger = ["click"],
+  ...dropdownProps
+}) {
+  return /* @__PURE__ */ jsxs2("span", { className: `sia-dropdown-button ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx2(Button, { ...buttonProps, disabled, onClick, children }),
+    /* @__PURE__ */ jsx2(DropdownRoot, { ...dropdownProps, disabled, trigger, children: /* @__PURE__ */ jsx2(
+      Button,
+      {
+        ...buttonProps,
+        className: `sia-dropdown-button__arrow ${buttonProps?.className ?? ""}`.trim(),
+        disabled,
+        icon: /* @__PURE__ */ jsx2(Icon, { name: "chevron-down", size: 14 }),
+        "aria-label": "\u5C55\u5F00\u4E0B\u62C9\u83DC\u5355"
+      }
+    ) })
+  ] });
+}
+var Dropdown = Object.assign(DropdownRoot, { Button: DropdownButton });
+
+// src/components/Input.tsx
+import { forwardRef, useId as useId2, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Input = forwardRef(function Input2({
+  label,
+  hint,
+  status = "default",
+  size = "medium",
+  prefix,
+  suffix,
+  allowClear = false,
+  onClear,
+  showCount = false,
+  placeholderMode = "default",
+  placeholder,
+  className = "",
+  id,
+  disabled,
+  value,
+  defaultValue,
+  maxLength,
+  onChange,
+  ...props
+}, forwardedRef) {
+  const fallbackId = useId2();
+  const inputId = id ?? fallbackId;
+  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 = placeholderMode === "floating" && Boolean(placeholder);
+  const hintId = `${inputId}-hint`;
+  const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
+  function setRef(node) {
+    localRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }
+  function handleChange(event) {
+    if (maxLength !== void 0 && maxLength >= 0 && event.target.value.length > maxLength) {
+      const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+      valueSetter?.call(event.target, event.target.value.slice(0, maxLength));
+    }
+    setUncontrolledValue(event.target.value);
+    onChange?.(event);
+  }
+  function clearValue() {
+    const input2 = localRef.current;
+    if (!input2 || disabled) return;
+    const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    valueSetter?.call(input2, "");
+    input2.dispatchEvent(new Event("input", { bubbles: true }));
+    setUncontrolledValue("");
+    input2.focus();
+    onClear?.();
+  }
+  const input = /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ...props,
+      ref: setRef,
+      id: inputId,
+      className: "sia-input",
+      disabled,
+      value,
+      defaultValue,
+      maxLength,
+      placeholder,
+      "aria-describedby": describedBy,
+      "aria-invalid": status === "error" || void 0,
+      onChange: handleChange
+    }
+  );
+  const control = /* @__PURE__ */ jsxs3("span", { 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__ */ jsx3("span", { className: "sia-input-control__affix", children: prefix }) : null,
+    floatingPlaceholder ? /* @__PURE__ */ jsxs3("span", { className: "sia-input-control__input-wrap", children: [
+      input,
+      /* @__PURE__ */ jsx3("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
+    ] }) : input,
+    allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx3("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ jsx3(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+    suffix ? /* @__PURE__ */ jsx3("span", { className: "sia-input-control__affix", children: suffix }) : null,
+    showCount ? /* @__PURE__ */ jsxs3("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__ */ jsx3("span", { className: `sia-field ${className}`.trim(), children: control });
+  return /* @__PURE__ */ jsxs3("span", { className: `sia-field ${className}`.trim(), children: [
+    label ? /* @__PURE__ */ jsx3("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
+    control,
+    hint ? /* @__PURE__ */ jsx3("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
+  ] });
+});
+
+export {
+  Menu,
+  Steps,
+  Segmented,
+  Dropdown,
+  Input
+};