@sia.soul/sia-react-ui 0.1.13 → 0.1.15

package/dist/core.cjs

@@ -39,12 +39,36 @@ __export(core_exports, {
 });
 module.exports = __toCommonJS(core_exports);
 
-// src/components/Button.tsx
+// src/components/shared.ts
 var import_react = require("react");
+var ControlSizeContext = (0, import_react.createContext)("medium");
+function useControlSize(size) {
+  const inherited = (0, import_react.useContext)(ControlSizeContext);
+  return size ?? inherited;
+}
+var PlaceholderModeContext = (0, import_react.createContext)("default");
+function usePlaceholderMode(mode) {
+  const inherited = (0, import_react.useContext)(PlaceholderModeContext);
+  return mode ?? inherited;
+}
+function useControllableState({ value, defaultValue, onChange }) {
+  const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue);
+  const controlled = value !== void 0;
+  const currentValue = controlled ? value : internalValue;
+  const setValue = (0, import_react.useCallback)((nextValue) => {
+    if (Object.is(currentValue, nextValue)) return;
+    if (!controlled) setInternalValue(nextValue);
+    onChange?.(nextValue);
+  }, [controlled, currentValue, onChange]);
+  return [currentValue, setValue];
+}
+
+// src/components/Button.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)(function Button2({
+var Button = (0, import_react2.forwardRef)(function Button2({
   variant = "default",
-  size = "medium",
+  size: sizeProp,
   loading = false,
   block = false,
   danger = false,
@@ -57,7 +81,8 @@ var Button = (0, import_react.forwardRef)(function Button2({
   style,
   ...props
 }, forwardedRef) {
-  const localRef = (0, import_react.useRef)(null);
+  const size = useControlSize(sizeProp);
+  const localRef = (0, import_react2.useRef)(null);
   function setRef(node) {
     localRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -96,10 +121,10 @@ var Button = (0, import_react.forwardRef)(function Button2({
 });
 
 // src/components/Card.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/Icon.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/components/IconCatalog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -885,7 +910,7 @@ var filledIconPaths = {
   ] })
 };
 var FILLED_ICON_NAMES = Object.freeze(Object.keys(filledIconPaths));
-var Icon = (0, import_react2.forwardRef)(function Icon2({ name, size = "1em", strokeWidth = 1.8, rotate = 0, spin = false, pulse = false, label, variant = "outline", className = "", style, ...props }, ref) {
+var Icon = (0, import_react3.forwardRef)(function Icon2({ name, size = "1em", strokeWidth = 1.8, rotate = 0, spin = false, pulse = false, label, variant = "outline", className = "", style, ...props }, ref) {
   const resolvedSize = typeof size === "number" ? `${size}px` : size;
   const mergedStyle = { "--sia-icon-size": resolvedSize, "--sia-icon-rotate": `${rotate}deg`, ...style };
   const animationClass = spin ? " sia-icon--spin" : pulse ? " sia-icon--pulse" : "";
@@ -927,7 +952,7 @@ function Card({
   children,
   ...props
 }) {
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react3.useState)(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react4.useState)(defaultCollapsed);
   const isCollapsed = collapsed ?? internalCollapsed;
   const hasHeader = title || extra || collapsible;
   const mergedStyle = accentColor ? { "--sia-card-accent": accentColor, ...style } : style;
@@ -964,6 +989,7 @@ function Tag({
   variant = "soft",
   icon,
   closable = false,
+  closeOnHover = false,
   disabled = false,
   onClose,
   className = "",
@@ -973,7 +999,7 @@ function Tag({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "span",
     {
-      className: `sia-tag sia-tag--${status} sia-tag--${variant}${compact ? " sia-tag--compact" : ""}${disabled ? " sia-tag--disabled" : ""} ${className}`.trim(),
+      className: `sia-tag${closable && closeOnHover ? " sia-tag--close-on-hover" : ""} sia-tag--${status} sia-tag--${variant}${compact ? " sia-tag--compact" : ""}${disabled ? " sia-tag--disabled" : ""} ${className}`.trim(),
       "aria-disabled": disabled || void 0,
       ...props,
       children: [
@@ -1008,7 +1034,7 @@ var import_react7 = require("react");
 var import_react6 = require("react");
 
 // src/components/PopupPortal.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function setForwardedRef(ref, value) {
@@ -1018,7 +1044,7 @@ function setForwardedRef(ref, value) {
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), Math.max(min, max));
 }
-var PopupPortal = (0, import_react4.forwardRef)(function PopupPortal2({
+var PopupPortal = (0, import_react5.forwardRef)(function PopupPortal2({
   anchorRef,
   open = true,
   placement = "bottom-start",
@@ -1029,9 +1055,9 @@ var PopupPortal = (0, import_react4.forwardRef)(function PopupPortal2({
   children,
   ...props
 }, forwardedRef) {
-  const popupRef = (0, import_react4.useRef)(null);
-  const [position, setPosition] = (0, import_react4.useState)();
-  (0, import_react4.useLayoutEffect)(() => {
+  const popupRef = (0, import_react5.useRef)(null);
+  const [position, setPosition] = (0, import_react5.useState)();
+  (0, import_react5.useLayoutEffect)(() => {
     if (!open || typeof document === "undefined") {
       setPosition(void 0);
       return;
@@ -1122,25 +1148,6 @@ var PopupPortal = (0, import_react4.forwardRef)(function PopupPortal2({
   );
 });
 
-// src/components/shared.ts
-var import_react5 = require("react");
-var PlaceholderModeContext = (0, import_react5.createContext)("default");
-function usePlaceholderMode(mode) {
-  const inherited = (0, import_react5.useContext)(PlaceholderModeContext);
-  return mode ?? inherited;
-}
-function useControllableState({ value, defaultValue, onChange }) {
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(defaultValue);
-  const controlled = value !== void 0;
-  const currentValue = controlled ? value : internalValue;
-  const setValue = (0, import_react5.useCallback)((nextValue) => {
-    if (Object.is(currentValue, nextValue)) return;
-    if (!controlled) setInternalValue(nextValue);
-    onChange?.(nextValue);
-  }, [controlled, currentValue, onChange]);
-  return [currentValue, setValue];
-}
-
 // src/components/Navigation.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function MenuPopup({
@@ -1321,7 +1328,8 @@ function Menu({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)(MenuLevel, { items, level: 0, parents: [], props: { menuId, mode, theme, multiple, selectable, inlineCollapsed, inlineIndent, triggerSubMenuAction, selected, open, select, toggle } }) });
 }
-function Segmented({ options, value, defaultValue, size = "medium", block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+  const size = useControlSize(sizeProp);
   const normalized = (0, import_react6.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) {
@@ -1813,7 +1821,8 @@ var import_react_dom2 = require("react-dom");
 var import_react9 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react9.createContext)(null);
-var CheckboxRoot = (0, import_react9.forwardRef)(function Checkbox({ value, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+var CheckboxRoot = (0, import_react9.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const group = (0, import_react9.useContext)(CheckboxGroupContext);
   const localRef = (0, import_react9.useRef)(null);
   const fallbackId = (0, import_react9.useId)();
@@ -1827,7 +1836,7 @@ var CheckboxRoot = (0, import_react9.forwardRef)(function Checkbox({ value, inde
     if (typeof forwardedRef === "function") forwardedRef(node);
     else if (forwardedRef) forwardedRef.current = node;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: `sia-checkbox${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: `sia-checkbox sia-checkbox--${size}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
@@ -1852,6 +1861,7 @@ var CheckboxRoot = (0, import_react9.forwardRef)(function Checkbox({ value, inde
   ] });
 });
 function CheckboxGroup({
+  size: sizeProp,
   value,
   defaultValue = [],
   options,
@@ -1861,6 +1871,7 @@ function CheckboxGroup({
   children,
   onChange
 }) {
+  const size = useControlSize(sizeProp);
   const [values, setValues] = useControllableState({ value, defaultValue, onChange });
   const context = (0, import_react9.useMemo)(() => ({
     values,
@@ -1871,13 +1882,13 @@ function CheckboxGroup({
       setValues(next);
     }
   }), [disabled, name, setValues, values]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `sia-checkbox-group ${className}`.trim(), role: "group", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `sia-checkbox-group ${className}`.trim(), role: "group", children: [
     options?.map((option) => {
       const normalized = typeof option === "object" ? option : { label: String(option), value: option };
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxRoot, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
     }),
     children
-  ] }) });
+  ] }) }) });
 }
 var Checkbox2 = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
 
@@ -2509,7 +2520,7 @@ var Input = (0, import_react15.forwardRef)(function Input2({
   label,
   hint,
   status = "default",
-  size = "medium",
+  size: sizeProp,
   prefix,
   suffix,
   allowClear = false,
@@ -2526,6 +2537,7 @@ var Input = (0, import_react15.forwardRef)(function Input2({
   onChange,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react15.useId)();
   const inputId = id ?? fallbackId;
   const localRef = (0, import_react15.useRef)(null);
@@ -2844,7 +2856,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
   onChange,
   placeholder = "\u8BF7\u9009\u62E9",
   placeholderMode,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = false,
   loading = false,
@@ -2870,6 +2882,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
   onKeyDown,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react18.useId)();
   const selectId = id ?? fallbackId;
   const listboxId = `${selectId}-listbox`;
@@ -3510,6 +3523,7 @@ var TextArea = (0, import_react20.forwardRef)(function TextArea2({
   label,
   hint,
   status = "default",
+  size: sizeProp,
   showCount = false,
   placeholder,
   placeholderMode,
@@ -3522,6 +3536,7 @@ var TextArea = (0, import_react20.forwardRef)(function TextArea2({
   onChange,
   ...props
 }, ref) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react20.useId)();
   const textAreaId = id ?? fallbackId;
   const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
@@ -3533,7 +3548,7 @@ var TextArea = (0, import_react20.forwardRef)(function TextArea2({
     setUncontrolledValue(event.target.value);
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
+  const control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "textarea",
       {