@sia.soul/sia-react-ui 0.1.3 → 0.1.5

package/dist/chart.css

@@ -791,7 +791,7 @@
   background: var(--sia-color-surface);
   border: 2px solid var(--sia-color-primary);
   border-radius: 4px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
   pointer-events: auto;
 }
 .sia-chart-data-zoom input::-moz-range-thumb {

package/dist/chart.js

@@ -56,9 +56,10 @@ import {
   smoothSvgPath,
   svgArcPath,
   transferCompositeValue
-} from "./chunk-I342FGQY.js";
-import "./chunk-NZAT2RUM.js";
+} from "./chunk-Z3T6RDQP.js";
+import "./chunk-WHARTF2I.js";
 import "./chunk-MBS2HXLZ.js";
+import "./chunk-EJDPRAU2.js";
 export {
   BarChart,
   CHART_VIEWBOX_HEIGHT,

package/dist/{chunk-6VXOLMKZ.js → chunk-5ZTWY3PG.js}

@@ -1,3 +1,7 @@
+import {
+  useFloatingPlaceholder
+} from "./chunk-EJDPRAU2.js";
+
 // src/components/MarkdownEditor.tsx
 import { useEffect, useRef, useState } from "react";
 import "vditor/dist/index.css";
@@ -214,6 +218,7 @@ function MarkdownEditor({
   onChange,
   mode = "wysiwyg",
   placeholder = "\u8BF7\u8F93\u5165 Markdown \u6B63\u6587",
+  placeholderMode,
   minHeight = 320,
   disabled = false,
   ariaLabel = "Markdown \u7F16\u8F91\u5668",
@@ -234,9 +239,14 @@ function MarkdownEditor({
   const smartMarkdownPasteRef = useRef(smartMarkdownPaste);
   const valueRef = useRef(value ?? defaultValue);
   const lastEmittedValueRef = useRef(value ?? defaultValue);
+  const [hasContent, setHasContent] = useState(Boolean((value ?? defaultValue).trim()));
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasContent });
   const [ready, setReady] = useState(false);
   const [loadError, setLoadError] = useState("");
   const hasImageUpload = Boolean(onUploadImage);
+  useEffect(() => {
+    if (value !== void 0) setHasContent(Boolean(value.trim()));
+  }, [value]);
   onChangeRef.current = onChange;
   saveShortcutRef.current = saveShortcut;
   uploadImageRef.current = onUploadImage;
@@ -296,6 +306,7 @@ function MarkdownEditor({
           }
         } } : {},
         input: (markdown) => {
+          setHasContent(Boolean(markdown.trim()));
           lastEmittedValueRef.current = markdown;
           onChangeRef.current?.(markdown);
         },
@@ -364,11 +375,17 @@ function MarkdownEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: ["sia-markdown-editor", className].filter(Boolean).join(" "),
+      className: ["sia-markdown-editor", floating.className, disabled ? "is-disabled" : "", className].filter(Boolean).join(" "),
       style: editorStyle,
       "data-ready": ready ? "true" : "false",
       ...props,
+      onBlurCapture: (event) => {
+        props.onBlurCapture?.(event);
+        const current = editorRef.current?.getValue();
+        if (current !== void 0) setHasContent(Boolean(current.trim()));
+      },
       children: [
+        floating.label,
         /* @__PURE__ */ jsx("div", { ref: mountRef, className: "sia-markdown-editor__mount" }),
         !ready ? /* @__PURE__ */ jsx("div", { className: "sia-markdown-editor__loading", "aria-live": "polite", children: loadError || "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026" }) : null
       ]

package/dist/{chunk-2RRTDU3N.js → chunk-EJ23MVR6.js}

@@ -568,8 +568,8 @@ var coreIconPaths = {
     /* @__PURE__ */ jsx2("path", { d: "M15 5.2a3.5 3.5 0 0 1 0 6.6M16.2 14.5c2.9.5 4.4 2.3 4.9 5.5" })
   ] }),
   settings: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx2("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3A1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" })
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 4.8 10 2 14 2 14 4.8 15.68 5.49 17.66 3.51 20.49 6.34 18.51 8.32 19.2 10 22 10 22 14 19.2 14 18.51 15.68 20.49 17.66 17.66 20.49 15.68 18.51 14 19.2 14 22 10 22 10 19.2 8.32 18.51 6.34 20.49 3.51 17.66 5.49 15.68 4.8 14 2 14 2 10 4.8 10 5.49 8.32 3.51 6.34 6.34 3.51 8.32 5.49Z" })
   ] }),
   edit: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2("path", { d: "M4 20h4l11-11a2.8 2.8 0 0 0-4-4L4 16v4Z" }),
@@ -922,24 +922,9 @@ var PopupPortal = forwardRef2(function PopupPortal2({
   );
 });
 
-// src/components/shared.ts
-import { useCallback, useState as useState2 } from "react";
-function useControllableState({ value, defaultValue, onChange }) {
-  const [internalValue, setInternalValue] = useState2(defaultValue);
-  const controlled = value !== void 0;
-  const currentValue = controlled ? value : internalValue;
-  const setValue = useCallback((nextValue) => {
-    if (Object.is(currentValue, nextValue)) return;
-    if (!controlled) setInternalValue(nextValue);
-    onChange?.(nextValue);
-  }, [controlled, currentValue, onChange]);
-  return [currentValue, setValue];
-}
-
 export {
   ICON_NAMES,
   FILLED_ICON_NAMES,
   Icon,
-  PopupPortal,
-  useControllableState
+  PopupPortal
 };

package/dist/chunk-EJDPRAU2.js

@@ -0,0 +1,36 @@
+// src/components/shared.ts
+import { createContext, useCallback, useContext, useState } from "react";
+var PlaceholderModeContext = createContext("default");
+function usePlaceholderMode(mode) {
+  const inherited = useContext(PlaceholderModeContext);
+  return mode ?? inherited;
+}
+function useControllableState({ value, defaultValue, onChange }) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const controlled = value !== void 0;
+  const currentValue = controlled ? value : internalValue;
+  const setValue = useCallback((nextValue) => {
+    if (Object.is(currentValue, nextValue)) return;
+    if (!controlled) setInternalValue(nextValue);
+    onChange?.(nextValue);
+  }, [controlled, currentValue, onChange]);
+  return [currentValue, setValue];
+}
+
+// src/components/FloatingPlaceholder.tsx
+import { jsx } from "react/jsx-runtime";
+function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
+  const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
+  return {
+    enabled,
+    className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
+    label: enabled ? /* @__PURE__ */ jsx("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
+  };
+}
+
+export {
+  PlaceholderModeContext,
+  usePlaceholderMode,
+  useControllableState,
+  useFloatingPlaceholder
+};

package/dist/{chunk-IMZT6VCU.js → chunk-IHTODT53.js}

@@ -3,9 +3,12 @@ import {
 } from "./chunk-MBS2HXLZ.js";
 import {
   Icon,
-  PopupPortal,
-  useControllableState
-} from "./chunk-2RRTDU3N.js";
+  PopupPortal
+} from "./chunk-EJ23MVR6.js";
+import {
+  useControllableState,
+  usePlaceholderMode
+} from "./chunk-EJDPRAU2.js";
 
 // src/components/Navigation.tsx
 import { useEffect, useId, useMemo, useRef, useState } from "react";
@@ -493,7 +496,7 @@ var Input = forwardRef(function Input2({
   allowClear = false,
   onClear,
   showCount = false,
-  placeholderMode = "default",
+  placeholderMode,
   placeholder,
   className = "",
   id,
@@ -510,7 +513,7 @@ var Input = forwardRef(function Input2({
   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 floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
   const hintId = `${inputId}-hint`;
   const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
   function setRef(node) {

package/dist/{chunk-R4OWKIXJ.js → chunk-MJUTLEEE.js}

@@ -1,11 +1,14 @@
 import {
   Select
-} from "./chunk-OAC7BSUR.js";
+} from "./chunk-R7BVDN3Q.js";
 import {
   Icon,
-  PopupPortal,
-  useControllableState
-} from "./chunk-2RRTDU3N.js";
+  PopupPortal
+} from "./chunk-EJ23MVR6.js";
+import {
+  useControllableState,
+  useFloatingPlaceholder
+} from "./chunk-EJDPRAU2.js";
 
 // src/components/DatePicker.tsx
 import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";
@@ -290,6 +293,7 @@ function DatePicker({
   onChange,
   onOpenChange,
   placeholder,
+  placeholderMode,
   formatValue = (value2) => value2,
   renderExtraFooter,
   ...props
@@ -369,8 +373,9 @@ function DatePicker({
     setCurrentValue(empty);
   }
   const display = Array.isArray(currentValue) ? currentValue.map(formatValue).join("\u3001") : currentValue ? formatValue(currentValue) : "";
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder ?? placeholderFor(picker, showTime, multiple), filled: Boolean(display), active: visible });
   const triggerLabel = props["aria-label"] ?? (typeof placeholder === "string" ? placeholder : "\u65E5\u671F\u9009\u62E9\u5668");
-  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker${floating.className} sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -398,6 +403,7 @@ function DatePicker({
         ]
       }
     ),
+    floating.label,
     allowClear && display && !disabled ? /* @__PURE__ */ jsx2("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
     /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel${showTime ? " sia-date-panel--with-time" : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u9009\u62E9\u9762\u677F", children: [
       /* @__PURE__ */ jsxs2("div", { className: "sia-date-panel__body", children: [
@@ -446,6 +452,7 @@ function DateRangePicker({
   value,
   defaultValue = ["", ""],
   placeholder = ["\u5F00\u59CB\u65E5\u671F", "\u7ED3\u675F\u65E5\u671F"],
+  placeholderMode,
   separator = "\u2192",
   presets,
   maxRangeDays,
@@ -475,7 +482,7 @@ function DateRangePicker({
   const id = useId();
   const rootRef = useRef2(null);
   const popupRef = useRef2(null);
-  const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue, onChange });
+  const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [draftValue, setDraftValue] = useState(currentValue);
   const [activeIndex, setActiveIndex] = useState(currentValue[0] && !currentValue[1] ? 1 : 0);
@@ -712,7 +719,8 @@ function DateRangePicker({
       endpointLabel
     );
   }
-  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder.filter(Boolean).join(" / "), filled: currentValue.some(Boolean), active: visible });
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker${floating.className} sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -736,6 +744,7 @@ function DateRangePicker({
         ]
       }
     ),
+    floating.label,
     allowClear && (currentValue[0] || currentValue[1]) && !disabled ? /* @__PURE__ */ jsx2("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
     /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? ` sia-date-panel--with-time sia-date-panel--range-time-${compactDateTime ? "compact" : "paired"}` : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
       /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__body", children: showTime ? /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__range-date-time", children: compactDateTime ? renderDateTimeGroup(activeIndex) : /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -805,6 +814,7 @@ function SelectDateRange({
   value,
   defaultValue,
   selectPlaceholder = "\u8BF7\u9009\u62E9\u7C7B\u578B",
+  placeholderMode,
   selectWidth = 180,
   rangePlaceholder = ["\u5F00\u59CB\u65E5\u671F", "\u7ED3\u675F\u65E5\u671F"],
   selectAriaLabel = "\u9009\u62E9\u7C7B\u578B",
@@ -819,7 +829,7 @@ function SelectDateRange({
   ...props
 }) {
   const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
-  const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue: initialValue, onChange });
+  const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
   return /* @__PURE__ */ jsxs3("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...props, style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [
     /* @__PURE__ */ jsx3(
       Select,
@@ -829,6 +839,7 @@ function SelectDateRange({
         options,
         value: currentValue.select,
         placeholder: selectPlaceholder,
+        placeholderMode,
         size,
         status,
         disabled,
@@ -845,6 +856,7 @@ function SelectDateRange({
         "aria-label": rangeAriaLabel,
         value: currentValue.range,
         placeholder: rangePlaceholder,
+        placeholderMode,
         presets,
         size,
         status,

package/dist/{chunk-OQLDEVCF.js → chunk-PX6BOFTW.js}

@@ -1,13 +1,16 @@
 import {
   Dropdown,
   Input
-} from "./chunk-IMZT6VCU.js";
+} from "./chunk-IHTODT53.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";
 import {
   Icon
-} from "./chunk-2RRTDU3N.js";
+} from "./chunk-EJ23MVR6.js";
+import {
+  useFloatingPlaceholder
+} from "./chunk-EJDPRAU2.js";
 
 // src/components/RichTextEditor.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -49,6 +52,7 @@ function RichTextEditor({
   contentFormat = "html",
   toolbar = "basic",
   placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
+  placeholderMode,
   disabled = false,
   minHeight = 150,
   pasteImageHint = "\u53EF\u76F4\u63A5\u7C98\u8D34\u56FE\u7247",
@@ -165,6 +169,7 @@ function RichTextEditor({
     if (!editor || value === void 0 || value === lastEmittedValueRef.current) return;
     editor.commands.setContent(value, { emitUpdate: false, contentType: contentFormat });
     lastEmittedValueRef.current = value;
+    setEditorRevision((current) => current + 1);
   }, [contentFormat, editor, value]);
   function openLinkEditor(open) {
     if (open && editor) setLinkHref(String(editor.getAttributes("link").href ?? ""));
@@ -218,7 +223,9 @@ function RichTextEditor({
       else editor.chain().focus().toggleHeading({ level: Number(key.slice(1)) }).run();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { ...props, id, style: mergedStyle, className: `sia-rich-text-editor${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: editor ? !editor.isEmpty : Boolean(value ?? defaultValue) });
+  return /* @__PURE__ */ jsxs("div", { ...props, id, style: mergedStyle, className: `sia-rich-text-editor${floating.className}${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
+    floating.label,
     /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar", "aria-label": "\u6587\u672C\u683C\u5F0F\u5DE5\u5177\u680F", children: [
       /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar-main", children: [
         toolbar === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-OAC7BSUR.js → chunk-R7BVDN3Q.js}

@@ -1,12 +1,64 @@
 import {
   Icon,
-  PopupPortal,
-  useControllableState
-} from "./chunk-2RRTDU3N.js";
+  PopupPortal
+} from "./chunk-EJ23MVR6.js";
+import {
+  useControllableState,
+  useFloatingPlaceholder
+} from "./chunk-EJDPRAU2.js";
 
 // src/components/Select.tsx
-import { forwardRef, useDeferredValue, useEffect, useId, useMemo, useRef, useState } from "react";
+import { forwardRef, useDeferredValue, useEffect, useId, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/components/OverflowTags.tsx
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function OverflowTags({ items, maxCount, className = "", tagClassName, restClassName = "" }) {
+  const rootRef = useRef(null);
+  const measureRef = useRef(null);
+  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount) || 0));
+  const [visibleCount, setVisibleCount] = useState(0);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const measure = measureRef.current;
+    if (!root || !measure) return;
+    const update = () => {
+      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+      const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
+      let used = 0;
+      let fitting = 0;
+      for (let count2 = 1; count2 <= limit; count2 += 1) {
+        used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
+        const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
+        if (used + rest <= root.clientWidth) fitting = count2;
+      }
+      setVisibleCount((previous) => previous === fitting ? previous : fitting);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    for (const child of measure.children) observer.observe(child);
+    return () => observer.disconnect();
+  }, [items, limit]);
+  const count = Math.min(visibleCount, limit);
+  return /* @__PURE__ */ jsxs("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
+    items.slice(0, count).map((item) => /* @__PURE__ */ jsx("span", { className: tagClassName, children: item.label }, item.key)),
+    items.length > count ? /* @__PURE__ */ jsxs("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
+      "+",
+      items.length - count
+    ] }) : null,
+    /* @__PURE__ */ jsxs("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
+      items.slice(0, limit).map((item) => /* @__PURE__ */ jsx("span", { className: tagClassName, children: item.label }, item.key)),
+      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ jsxs("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
+        "+",
+        items.length - index
+      ] }, `rest-${index}`))
+    ] })
+  ] });
+}
+
+// src/components/Select.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function defaultFilterOption(query, option) {
   return String(option.label).toLowerCase().includes(query.toLowerCase());
 }
@@ -17,6 +69,7 @@ var Select = forwardRef(function Select2({
   defaultValue,
   onChange,
   placeholder = "\u8BF7\u9009\u62E9",
+  placeholderMode,
   size = "medium",
   status = "default",
   allowClear = false,
@@ -43,14 +96,14 @@ var Select = forwardRef(function Select2({
   const fallbackId = useId();
   const selectId = id ?? fallbackId;
   const listboxId = `${selectId}-listbox`;
-  const rootRef = useRef(null);
-  const popupRef = useRef(null);
-  const searchRef = useRef(null);
-  const listRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const [scrollTop, setScrollTop] = useState(0);
+  const rootRef = useRef2(null);
+  const popupRef = useRef2(null);
+  const searchRef = useRef2(null);
+  const listRef = useRef2(null);
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const [activeIndex, setActiveIndex] = useState2(-1);
+  const [scrollTop, setScrollTop] = useState2(0);
   const deferredQuery = useDeferredValue(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
@@ -220,7 +273,7 @@ var Select = forwardRef(function Select2({
   function renderOption(option, renderedIndex) {
     const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
     const selected = selectedValueSet.has(option.value);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(
       "div",
       {
         id: `${listboxId}-${optionIndex}`,
@@ -233,22 +286,21 @@ var Select = forwardRef(function Select2({
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => selectOption(option),
         children: [
-          /* @__PURE__ */ jsx("span", { children: option.label }),
-          selected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 15 }) : null
+          /* @__PURE__ */ jsx2("span", { children: option.label }),
+          selected ? /* @__PURE__ */ jsx2(Icon, { name: "check", size: 15 }) : null
         ]
       },
       `${typeof option.value}-${option.value}`
     );
   }
-  const visibleTags = selectedOptions.slice(0, Math.max(0, maxTagCount));
-  const hiddenTagCount = selectedOptions.length - visibleTags.length;
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
-    /* @__PURE__ */ jsxs(
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         ...props,
         ref: forwardedRef,
-        className: "sia-select__trigger",
+        className: `sia-select__trigger${floating.className}`,
         id: selectId,
         type: "button",
         role: "combobox",
@@ -261,41 +313,36 @@ var Select = forwardRef(function Select2({
         onClick: () => open ? closeDropdown() : openDropdown(),
         onKeyDown: handleTriggerKeyDown,
         children: [
-          multiple && hasValue ? /* @__PURE__ */ jsxs("span", { className: "sia-select__tags", children: [
-            visibleTags.map((option) => /* @__PURE__ */ jsx("span", { className: "sia-select__tag", children: option.label }, `${typeof option.value}-${option.value}`)),
-            hiddenTagCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "sia-select__tag sia-select__tag--rest", children: [
-              "+",
-              hiddenTagCount
-            ] }) : null
-          ] }) : /* @__PURE__ */ jsx("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
-          loading ? /* @__PURE__ */ jsx("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
-          /* @__PURE__ */ jsx(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
+          multiple && hasValue ? /* @__PURE__ */ jsx2(OverflowTags, { className: "sia-select__tags", tagClassName: "sia-select__tag", restClassName: "sia-select__tag--rest", maxCount: maxTagCount, items: selectedOptions.map((option) => ({ key: `${typeof option.value}-${option.value}`, label: option.label })) }) : /* @__PURE__ */ jsx2("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
+          loading ? /* @__PURE__ */ jsx2("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
+          floating.label,
+          /* @__PURE__ */ jsx2(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
         ]
       }
     ),
-    allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ jsx(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ jsxs(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-select__dropdown", children: [
-      showSearch || allowInput ? /* @__PURE__ */ jsxs("label", { className: "sia-select__search", children: [
-        /* @__PURE__ */ jsx(Icon, { name: "search", size: 15 }),
-        /* @__PURE__ */ jsx("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
+    allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx2("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+    /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-select__dropdown", children: [
+      showSearch || allowInput ? /* @__PURE__ */ jsxs2("label", { className: "sia-select__search", children: [
+        /* @__PURE__ */ jsx2(Icon, { name: "search", size: 15 }),
+        /* @__PURE__ */ jsx2("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
       ] }) : null,
-      canSubmitInput ? /* @__PURE__ */ jsxs("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
-        /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }),
-        /* @__PURE__ */ jsxs("span", { children: [
+      canSubmitInput ? /* @__PURE__ */ jsxs2("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
+        /* @__PURE__ */ jsx2(Icon, { name: "plus", size: 14 }),
+        /* @__PURE__ */ jsxs2("span", { children: [
           "\u4F7F\u7528\u201C",
           inputValue,
           "\u201D"
         ] })
       ] }) : null,
-      multiple && showSelectAll ? /* @__PURE__ */ jsxs("div", { className: "sia-select__actions", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", disabled: allFilteredSelected || enabledFilteredOptions.length === 0, onClick: selectAllFiltered, children: "\u5168\u9009" }),
-        /* @__PURE__ */ jsx("button", { type: "button", disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u9664" }),
-        /* @__PURE__ */ jsxs("span", { children: [
+      multiple && showSelectAll ? /* @__PURE__ */ jsxs2("div", { className: "sia-select__actions", children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", disabled: allFilteredSelected || enabledFilteredOptions.length === 0, onClick: selectAllFiltered, children: "\u5168\u9009" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u9664" }),
+        /* @__PURE__ */ jsxs2("span", { children: [
           selectedValues.length,
           " \u9879\u5DF2\u9009"
         ] })
       ] }) : null,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           ref: listRef,
@@ -306,7 +353,7 @@ var Select = forwardRef(function Select2({
           "aria-multiselectable": multiple || void 0,
           style: { maxHeight: listHeight },
           onScroll: handleListScroll,
-          children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ jsx("div", { className: "sia-select__virtual-space", style: { height: filteredOptions.length * optionHeight }, children: renderedOptions.map(renderOption) }) : renderedOptions.map(renderOption) : canSubmitInput ? null : /* @__PURE__ */ jsx("div", { className: "sia-select__empty", children: notFoundContent })
+          children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ jsx2("div", { className: "sia-select__virtual-space", style: { height: filteredOptions.length * optionHeight }, children: renderedOptions.map(renderOption) }) : renderedOptions.map(renderOption) : canSubmitInput ? null : /* @__PURE__ */ jsx2("div", { className: "sia-select__empty", children: notFoundContent })
         }
       )
     ] })
@@ -314,5 +361,6 @@ var Select = forwardRef(function Select2({
 });
 
 export {
+  OverflowTags,
   Select
 };

package/dist/{chunk-Q4XNFMUH.js → chunk-S2JAJCLN.js}

@@ -1,16 +1,18 @@
 import {
   TextArea
-} from "./chunk-NZAT2RUM.js";
+} from "./chunk-WHARTF2I.js";
 import {
   Dropdown
-} from "./chunk-IMZT6VCU.js";
+} from "./chunk-IHTODT53.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";
 import {
-  Icon,
+  Icon
+} from "./chunk-EJ23MVR6.js";
+import {
   useControllableState
-} from "./chunk-2RRTDU3N.js";
+} from "./chunk-EJDPRAU2.js";
 
 // src/components/Card.tsx
 import { useState } from "react";

package/dist/{chunk-NZAT2RUM.js → chunk-WHARTF2I.js}

@@ -1,3 +1,7 @@
+import {
+  useFloatingPlaceholder
+} from "./chunk-EJDPRAU2.js";
+
 // src/components/TextArea.tsx
 import { forwardRef, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -6,6 +10,8 @@ var TextArea = forwardRef(function TextArea2({
   hint,
   status = "default",
   showCount = false,
+  placeholder,
+  placeholderMode,
   className = "",
   id,
   disabled,
@@ -19,13 +25,14 @@ var TextArea = forwardRef(function TextArea2({
   const textAreaId = id ?? fallbackId;
   const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue === void 0 ? "" : String(defaultValue));
   const currentText = value !== void 0 ? String(value) : uncontrolledValue;
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
   const hintId = `${textAreaId}-hint`;
   const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
   function handleChange(event) {
     setUncontrolledValue(event.target.value);
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ jsxs("span", { className: `sia-textarea-control sia-textarea-control--${status}${disabled ? " is-disabled" : ""}`, children: [
+  const control = /* @__PURE__ */ jsxs("span", { className: `sia-textarea-control sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
     /* @__PURE__ */ jsx(
       "textarea",
       {
@@ -37,11 +44,13 @@ var TextArea = forwardRef(function TextArea2({
         value,
         defaultValue,
         maxLength,
+        placeholder,
         "aria-describedby": describedBy,
         "aria-invalid": status === "error" || void 0,
         onChange: handleChange
       }
     ),
+    floating.label,
     showCount ? /* @__PURE__ */ jsxs("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
       currentText.length,
       maxLength !== void 0 ? `/${maxLength}` : null

package/dist/{chunk-I342FGQY.js → chunk-Z3T6RDQP.js}

@@ -1,6 +1,6 @@
 import {
   TextArea
-} from "./chunk-NZAT2RUM.js";
+} from "./chunk-WHARTF2I.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";