@sia.soul/sia-react-ui 0.1.0

package/dist/chunk-JKZGAZMB.js

@@ -0,0 +1,318 @@
+import {
+  Icon,
+  PopupPortal,
+  useControllableState
+} from "./chunk-YCVXUMGP.js";
+
+// src/components/Select.tsx
+import { forwardRef, useDeferredValue, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function defaultFilterOption(query, option) {
+  return String(option.label).toLowerCase().includes(query.toLowerCase());
+}
+var Select = forwardRef(function Select2({
+  options,
+  mode = "single",
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "\u8BF7\u9009\u62E9",
+  size = "medium",
+  status = "default",
+  allowClear = false,
+  loading = false,
+  showSearch = false,
+  allowInput = false,
+  inputMaxLength,
+  searchPlaceholder = "\u641C\u7D22\u9009\u9879",
+  onSearch,
+  filterOption = defaultFilterOption,
+  showSelectAll = false,
+  maxTagCount = 2,
+  virtual = true,
+  virtualThreshold = 100,
+  listHeight = 256,
+  optionHeight = 34,
+  disabled,
+  className = "",
+  id,
+  notFoundContent = "\u6682\u65E0\u6570\u636E",
+  onKeyDown,
+  ...props
+}, forwardedRef) {
+  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 deferredQuery = useDeferredValue(query.trim());
+  const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue: initialValue,
+    onChange: (nextValue) => {
+      if (Array.isArray(nextValue)) {
+        const selectedOptions2 = nextValue.map((selectedValue) => options.find((option) => option.value === selectedValue) ?? (allowInput ? { label: String(selectedValue), value: selectedValue } : void 0)).filter((option) => option !== void 0);
+        onChange?.(nextValue, selectedOptions2);
+      } else {
+        const selectedOption = nextValue === null ? null : options.find((option) => option.value === nextValue) ?? (allowInput ? { label: String(nextValue), value: nextValue } : null);
+        onChange?.(nextValue, selectedOption);
+      }
+    }
+  });
+  const selectedValues = useMemo(() => {
+    if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
+    return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
+  }, [currentValue, mode]);
+  const selectedValueSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const availableOptions = useMemo(() => {
+    if (!allowInput) return options;
+    const optionValueSet = new Set(options.map((option) => option.value));
+    const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
+    return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
+  }, [allowInput, options, selectedValues]);
+  const selectedOptions = useMemo(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
+  const filteredOptions = useMemo(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
+  const inputValue = query.trim();
+  const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
+  const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
+  const multiple = mode === "multiple";
+  const hasValue = selectedOptions.length > 0;
+  const virtualEnabled = virtual && filteredOptions.length >= virtualThreshold;
+  const overscan = 3;
+  const visibleCount = Math.ceil(listHeight / optionHeight) + overscan * 2;
+  const virtualStart = virtualEnabled ? Math.max(0, Math.floor(scrollTop / optionHeight) - overscan) : 0;
+  const virtualEnd = virtualEnabled ? Math.min(filteredOptions.length, virtualStart + visibleCount) : filteredOptions.length;
+  const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
+  const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
+  const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
+  useEffect(() => {
+    if (!open) return void 0;
+    function closeFromOutside(event) {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) closeDropdown();
+    }
+    document.addEventListener("mousedown", closeFromOutside);
+    return () => document.removeEventListener("mousedown", closeFromOutside);
+  }, [open]);
+  useEffect(() => {
+    if (open && (showSearch || allowInput)) searchRef.current?.focus();
+  }, [allowInput, open, showSearch]);
+  function firstEnabledIndex() {
+    return filteredOptions.findIndex((option) => !option.disabled);
+  }
+  function closeDropdown() {
+    setOpen(false);
+    setQuery("");
+    setScrollTop(0);
+  }
+  function openDropdown() {
+    if (disabled || loading) return;
+    const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
+    setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
+    setOpen(true);
+  }
+  function keepActiveVisible(index) {
+    if (!virtualEnabled || !listRef.current) return;
+    const optionTop = index * optionHeight;
+    const optionBottom = optionTop + optionHeight;
+    const viewportTop = listRef.current.scrollTop;
+    const viewportBottom = viewportTop + listHeight;
+    const nextScrollTop = optionTop < viewportTop ? optionTop : optionBottom > viewportBottom ? optionBottom - listHeight : viewportTop;
+    if (nextScrollTop !== viewportTop) {
+      listRef.current.scrollTop = nextScrollTop;
+      setScrollTop(nextScrollTop);
+    }
+  }
+  function moveActive(direction) {
+    if (filteredOptions.length === 0) return;
+    let nextIndex = activeIndex;
+    for (let index = 0; index < filteredOptions.length; index += 1) {
+      nextIndex = (nextIndex + direction + filteredOptions.length) % filteredOptions.length;
+      if (!filteredOptions[nextIndex]?.disabled) {
+        setActiveIndex(nextIndex);
+        keepActiveVisible(nextIndex);
+        return;
+      }
+    }
+  }
+  function selectOption(option) {
+    if (option.disabled) return;
+    if (multiple) {
+      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((item) => item !== option.value) : [...selectedValues, option.value];
+      setCurrentValue(nextValues);
+      return;
+    }
+    setCurrentValue(option.value);
+    closeDropdown();
+  }
+  function selectAllFiltered() {
+    if (allFilteredSelected) return;
+    const nextValues = [...selectedValues];
+    const nextValueSet = new Set(nextValues);
+    enabledFilteredOptions.forEach((option) => {
+      if (!nextValueSet.has(option.value)) nextValues.push(option.value);
+    });
+    setCurrentValue(nextValues);
+  }
+  function submitInputValue() {
+    if (!allowInput || !inputValue) return;
+    selectOption(exactInputOption ?? { label: inputValue, value: inputValue });
+    if (multiple) {
+      setQuery("");
+      setActiveIndex(-1);
+      setScrollTop(0);
+    }
+  }
+  function clearSelection() {
+    setCurrentValue(multiple ? [] : null);
+  }
+  function handleInteractionKeyDown(event, fromSearch = false) {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) openDropdown();
+      else moveActive(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter" || event.key === " " && !fromSearch) {
+      event.preventDefault();
+      if (!open) openDropdown();
+      else if (activeIndex >= 0 && filteredOptions[activeIndex]) selectOption(filteredOptions[activeIndex]);
+      else if (fromSearch && allowInput) submitInputValue();
+    } else if (event.key === "Escape") {
+      closeDropdown();
+    } else if (event.key === "Home" && open && !fromSearch) {
+      event.preventDefault();
+      const firstIndex = firstEnabledIndex();
+      setActiveIndex(firstIndex);
+      keepActiveVisible(firstIndex);
+    } else if (event.key === "End" && open && !fromSearch) {
+      event.preventDefault();
+      const reversedIndex = [...filteredOptions].reverse().findIndex((option) => !option.disabled);
+      const lastIndex = reversedIndex < 0 ? -1 : filteredOptions.length - 1 - reversedIndex;
+      setActiveIndex(lastIndex);
+      keepActiveVisible(lastIndex);
+    }
+  }
+  function handleTriggerKeyDown(event) {
+    handleInteractionKeyDown(event);
+    onKeyDown?.(event);
+  }
+  function handleSearchChange(event) {
+    const nextQuery = event.target.value;
+    setQuery(nextQuery);
+    setActiveIndex(-1);
+    setScrollTop(0);
+    if (listRef.current) listRef.current.scrollTop = 0;
+    onSearch?.(nextQuery);
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    clearSelection();
+  }
+  function handleListScroll(event) {
+    if (virtualEnabled) setScrollTop(event.currentTarget.scrollTop);
+  }
+  function renderOption(option, renderedIndex) {
+    const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
+    const selected = selectedValueSet.has(option.value);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `${listboxId}-${optionIndex}`,
+        className: `sia-select__option${selected ? " is-selected" : ""}${optionIndex === activeIndex ? " is-active" : ""}${option.disabled ? " is-disabled" : ""}`,
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": option.disabled || void 0,
+        style: virtualEnabled ? { position: "absolute", top: optionIndex * optionHeight, right: 0, left: 0, height: optionHeight } : void 0,
+        onMouseEnter: () => !option.disabled && setActiveIndex(optionIndex),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => selectOption(option),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: option.label }),
+          selected ? /* @__PURE__ */ jsx(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(
+      "button",
+      {
+        ...props,
+        ref: forwardedRef,
+        className: "sia-select__trigger",
+        id: selectId,
+        type: "button",
+        role: "combobox",
+        "aria-controls": listboxId,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-${activeIndex}` : void 0,
+        "aria-invalid": status === "error" || void 0,
+        disabled,
+        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 })
+        ]
+      }
+    ),
+    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 })
+      ] }) : 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: [
+          "\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: [
+          selectedValues.length,
+          " \u9879\u5DF2\u9009"
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listRef,
+          id: listboxId,
+          className: "sia-select__list",
+          role: "listbox",
+          "aria-labelledby": selectId,
+          "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 })
+        }
+      )
+    ] })
+  ] });
+});
+
+export {
+  Select
+};

package/dist/chunk-MBS2HXLZ.js

@@ -0,0 +1,59 @@
+// src/components/Button.tsx
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
+  variant = "default",
+  size = "medium",
+  loading = false,
+  block = false,
+  danger = false,
+  icon,
+  iconPosition = "start",
+  className = "",
+  children,
+  disabled,
+  onClick,
+  style,
+  ...props
+}, forwardedRef) {
+  const localRef = useRef(null);
+  function setRef(node) {
+    localRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }
+  function handleClick(event) {
+    const button = localRef.current;
+    if (button && variant === "primary") {
+      const rect = button.getBoundingClientRect();
+      button.style.setProperty("--sia-wave-x", `${event.clientX - rect.left}px`);
+      button.style.setProperty("--sia-wave-y", `${event.clientY - rect.top}px`);
+      button.dataset.wave = "active";
+      window.setTimeout(() => delete button.dataset.wave, 360);
+    }
+    onClick?.(event);
+  }
+  const mergedStyle = block ? { ...style, width: "100%" } : style ?? {};
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setRef,
+      type: "button",
+      className: `sia-button sia-button--${variant} sia-button--${size}${danger ? " sia-button--danger" : ""} ${className}`.trim(),
+      "aria-busy": loading || void 0,
+      disabled: disabled || loading,
+      onClick: handleClick,
+      style: mergedStyle,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "sia-button__spinner", "aria-hidden": "true" }) : icon && iconPosition === "start" ? /* @__PURE__ */ jsx("span", { className: "sia-button__icon", children: icon }) : null,
+        children !== void 0 && children !== null ? /* @__PURE__ */ jsx("span", { children }) : null,
+        !loading && icon && iconPosition === "end" ? /* @__PURE__ */ jsx("span", { className: "sia-button__icon", children: icon }) : null
+      ]
+    }
+  );
+});
+
+export {
+  Button
+};

package/dist/chunk-NZAT2RUM.js

@@ -0,0 +1,60 @@
+// src/components/TextArea.tsx
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextArea = forwardRef(function TextArea2({
+  label,
+  hint,
+  status = "default",
+  showCount = false,
+  className = "",
+  id,
+  disabled,
+  value,
+  defaultValue,
+  maxLength,
+  onChange,
+  ...props
+}, ref) {
+  const fallbackId = useId();
+  const textAreaId = id ?? fallbackId;
+  const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue === void 0 ? "" : String(defaultValue));
+  const currentText = value !== void 0 ? String(value) : uncontrolledValue;
+  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: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        ref,
+        id: textAreaId,
+        className: "sia-textarea",
+        disabled,
+        value,
+        defaultValue,
+        maxLength,
+        "aria-describedby": describedBy,
+        "aria-invalid": status === "error" || void 0,
+        onChange: handleChange
+      }
+    ),
+    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
+    ] }) : null
+  ] });
+  if (!label && !hint) return /* @__PURE__ */ jsx("span", { className: `sia-field ${className}`.trim(), children: control });
+  return /* @__PURE__ */ jsxs("span", { className: `sia-field ${className}`.trim(), children: [
+    label ? /* @__PURE__ */ jsx("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
+    control,
+    hint ? /* @__PURE__ */ jsx("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
+  ] });
+});
+
+export {
+  TextArea
+};