@crab-dev/rc-select 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @crab-dev/rc-select
+
+## 0.0.5
+
+### Patch Changes
+
+- [`3a32293`](https://github.com/hotlif/crab-dev/commit/3a32293c30ac0e77d5f0a6fa0e2173e9293cd462) Thanks [@hotlif](https://github.com/hotlif)! - Use cached axis metrics, binary-search range lookup, configurable overscan, and animation-frame coalescing to reduce virtual scrolling work.
+
+- [`01b9bde`](https://github.com/hotlif/crab-dev/commit/01b9bde4201bf08eced59f222a53bb3d018460e3) Thanks [@hotlif](https://github.com/hotlif)! - Remove the extra leading line box before the first virtualized select option.
+- Updated dependencies [[`35d5f5a`](https://github.com/hotlif/crab-dev/commit/35d5f5ab65b8e038d34e1c889de56e1aecad53d0), [`3a32293`](https://github.com/hotlif/crab-dev/commit/3a32293c30ac0e77d5f0a6fa0e2173e9293cd462), [`f991b0e`](https://github.com/hotlif/crab-dev/commit/f991b0eede1ead4d70534302bd51f47b0a4ab143)]:
+  - @crab-dev/rc-button@0.0.3
+  - @crab-dev/rc-virtual@0.1.4
+  - @crab-dev/rc-dropdown-container@0.0.5
+  - @crab-dev/rc-line-edit@0.0.5
+  - @crab-dev/rc-spin@0.0.4
+  - @crab-dev/rc-checkbox@0.0.4
+  - @crab-dev/rc-config-provider@0.0.2
+  - @crab-dev/rc-tag@0.0.3

package/README.md

@@ -1,20 +1,15 @@
-下拉选择器，支持单选、多选和搜索
+# @crab-dev/rc-select
 
-## ✨ 特性
+在下拉列表中选择一个或多个值，支持搜索选项。
 
-- 提供下拉选择能力，适用于结构化选项录入
-- 支持在有限空间内高效完成选项检索与选择
-- 适用于表单字段、筛选面板与配置项编辑
-- 当前版本：`0.0.1`
-- 示例数量：`10` 个 Demo
-- 主题能力：支持 Design Token（token.toml）
+## 主要功能
 
-## 🔨 使用示例
+- 支持单选、多选、搜索过滤和禁用选项。
+- 提供受控与非受控用法，适用于表单和筛选面板。
 
-<demos />
+## 文档
 
-## API
+- [使用说明与 API](./docs/index.mdx)
+- [示例源码](./docs/demos/)
 
-<api />
-
-> 其余原生属性按底层实现透传，详见 API。
+在当前包目录运行 `yarn start` 可打开组件工作台，查看交互示例。

package/cjs/_wake/src/hooks/useKeyboardNavigation.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react");
+;
+;
+const useKeyboardNavigation = ({ filteredOptions, open }) => {
+  const [highlightIndex, setHighlightIndex] = (0, __wake_namespace_0["useState"])(-1);
+  const findNextEnabledIndex = (startIndex, direction) => {
+    const len = filteredOptions.length;
+    if (len === 0) {
+      return -1;
+    }
+    let index = startIndex;
+    for (let i = 0; i < len; i += 1) {
+      index = ((index + direction) % len + len) % len;
+      const opt = filteredOptions[index];
+      if (!opt.disabled && !opt.isGroupLabel) {
+        return index;
+      }
+    }
+    return -1;
+  };
+  const moveHighlight = (direction) => {
+    if (!open) {
+      return;
+    }
+    setHighlightIndex((prev) => {
+      const start = prev === -1 ? direction === 1 ? -1 : 0 : prev;
+      return findNextEnabledIndex(start, direction);
+    });
+  };
+  const resetHighlight = () => {
+    setHighlightIndex(-1);
+  };
+  const highlightedOption = highlightIndex >= 0 && highlightIndex < filteredOptions.length ? filteredOptions[highlightIndex] : undefined;
+  return { highlightIndex, highlightedOption, moveHighlight, resetHighlight, setHighlightIndex };
+};
+const __wake_default_export = useKeyboardNavigation;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/select.cjs

@@ -0,0 +1,139 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react/jsx-runtime");
+const __wake_namespace_1 = require("@crab-dev/rc-config-provider");
+const __wake_namespace_2 = require("@crab-dev/rc-dropdown-container");
+const __wake_namespace_3 = require("react");
+const __wake_namespace_4 = require("@crab-dev/rc-hooks");
+const __wake_namespace_5 = require("./hooks/useKeyboardNavigation.cjs");
+const __wake_namespace_6 = require("./selectInput.cjs");
+const __wake_namespace_7 = require("./selectOverlay.cjs");
+require("./token.cjs");
+;
+const isGroup = (item) => "options" in item && Array.isArray(item.options);
+const asArray = (value) => {
+  if (value == null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+};
+const flattenOptions = (options) => {
+  const result = [];
+  options.forEach((item, index) => {
+    if (isGroup(item)) {
+      result.push({ label: item.label, value: `__group_${index}`, isGroupLabel: true });
+      for (const opt of item.options) {
+        result.push(opt);
+      }
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
+};
+const flattenPlainOptions = (options) => {
+  const result = [];
+  for (const item of options) {
+    if (isGroup(item)) {
+      for (const opt of item.options) {
+        result.push(opt);
+      }
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+};
+const filterOptions = (flatOptions, searchable, searchText) => {
+  if (!searchable || searchText.trim() === "") {
+    return flatOptions;
+  }
+  const keyword = searchText.trim().toLowerCase();
+  return flatOptions.filter((opt) => {
+    if (opt.isGroupLabel) {
+      return false;
+    }
+    if (typeof opt.label === "string") {
+      return opt.label.toLowerCase().includes(keyword);
+    }
+    return opt.value.toLowerCase().includes(keyword);
+  });
+};
+const firstEnabledIndex = (flatOptions) => flatOptions.findIndex((opt) => !opt.disabled && !opt.isGroupLabel);
+const fieldStyle = "rc-select-0f3ecf945b98";
+const supportingStyle = "rc-select-3bd2a27273ad";
+const Select = ({ ref, id, options, placeholder = "请选择", disabled = false, searchable = false, multiple = false, size: sizeProp, status, appearance = "outlined", label, supportingText, errorText, required, allowClear = false, loading = false, maxTagCount, autoFocus = false, notFoundContent, popupClassName, popupMatchSelectWidth = true, optionRender, tagRender, dropdownRender, value, defaultValue, onChange, onOpenChange, onFocus, onBlur, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...restProps }) => {
+  const size = (0, __wake_namespace_1["useComponentSize"])(sizeProp);
+  const listboxId = (0, __wake_namespace_3["useId"])();
+  const generatedId = (0, __wake_namespace_3["useId"])();
+  const inputId = id ?? generatedId;
+  const labelId = `${generatedId}-label`;
+  const descriptionId = `${generatedId}-description`;
+  const fieldStatus = errorText ? "error" : status;
+  const description = errorText || supportingText;
+  const [searchText, setSearchText] = (0, __wake_namespace_3["useState"])("");
+  const [selectedValues, setSelectedValues] = (0, __wake_namespace_4["useControllableValue"])({ value: value !== undefined ? asArray(value) : undefined, defaultValue: asArray(defaultValue) });
+  const [triggerWidth, setTriggerWidth] = (0, __wake_namespace_3["useState"])(0);
+  const onOpenChangeRef = (0, __wake_namespace_3["useRef"])(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const allPlainOptions = flattenPlainOptions(options);
+  const selectedOptions = allPlainOptions.filter((opt) => selectedValues.includes(opt.value));
+  const flatOptions = flattenOptions(options);
+  const filteredOptions = filterOptions(flatOptions, searchable, searchText);
+  const { highlightIndex, highlightedOption, moveHighlight, resetHighlight, setHighlightIndex } = (0, __wake_namespace_5 && __wake_namespace_5.__esModule ? __wake_namespace_5.default : __wake_namespace_5)({ filteredOptions, open: true });
+  const emitOpenChange = (nextOpen) => {
+    if (nextOpen) {
+      if (!multiple && selectedValues.length > 0) {
+        const selectedIndex = filteredOptions.findIndex((opt) => opt.value === selectedValues[0]);
+        setHighlightIndex(selectedIndex);
+      }
+    } else {
+      setSearchText("");
+      resetHighlight();
+    }
+    onOpenChangeRef.current?.(nextOpen);
+  };
+  const updateValue = (nextValues) => {
+    setSelectedValues(nextValues);
+    if (multiple) {
+      const nextOptions = allPlainOptions.filter((opt) => nextValues.includes(opt.value));
+      onChange?.(nextValues, nextOptions);
+      return;
+    }
+    const nextValue = nextValues[0] ?? null;
+    const nextOption = allPlainOptions.find((opt) => opt.value === nextValue);
+    onChange?.(nextValue, nextOption);
+  };
+  const handleOptionSelect = (option) => {
+    if (option.disabled || option.isGroupLabel) {
+      return;
+    }
+    if (multiple) {
+      const exists = selectedValues.includes(option.value);
+      const nextValues = exists ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+      updateValue(nextValues);
+      return;
+    }
+    updateValue([option.value]);
+  };
+  const handleClear = () => {
+    updateValue([]);
+    setSearchText("");
+  };
+  const handleRemoveTag = (val) => {
+    updateValue(selectedValues.filter((v) => v !== val));
+  };
+  const handleTriggerWidthChange = (width) => {
+    setTriggerWidth(width);
+  };
+  const handleSearchTextChange = (text) => {
+    setSearchText(text);
+    const nextFiltered = filterOptions(flatOptions, searchable, text);
+    setHighlightIndex(firstEnabledIndex(nextFiltered));
+  };
+  const floatingStyle = popupMatchSelectWidth ? { width: triggerWidth } : { minWidth: triggerWidth };
+  return (0, __wake_namespace_0["jsx"])(__wake_namespace_2 && __wake_namespace_2.__esModule ? __wake_namespace_2.default : __wake_namespace_2, { size: size, ...restProps, className: className, overlay: (0, __wake_namespace_0["jsx"])(__wake_namespace_7 && __wake_namespace_7.__esModule ? __wake_namespace_7.default : __wake_namespace_7, { multiple: multiple, loading: loading, filteredOptions: filteredOptions, selectedValues: selectedValues, triggerWidth: triggerWidth, highlightIndex: highlightIndex, listboxId: listboxId, notFoundContent: notFoundContent, popupClassName: popupClassName, optionRender: optionRender, dropdownRender: dropdownRender, onOptionSelect: handleOptionSelect, onOpenChange: emitOpenChange, onHighlightChange: setHighlightIndex }), floatingContainerProps: { style: floatingStyle }, children: (0, __wake_namespace_0["jsxs"])("div", { className: fieldStyle, children: [(0, __wake_namespace_0["jsx"])(__wake_namespace_6 && __wake_namespace_6.__esModule ? __wake_namespace_6.default : __wake_namespace_6, { ref: ref, id: inputId, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy ?? (label ? labelId : undefined), ariaDescribedBy: [ariaDescribedBy, description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined, disabled: disabled, searchable: searchable, multiple: multiple, size: size, status: fieldStatus, appearance: appearance, label: label, labelId: labelId, required: required, allowClear: allowClear, loading: loading, maxTagCount: maxTagCount, autoFocus: autoFocus, placeholder: placeholder, selectedOptions: selectedOptions, searchText: searchText, highlightIndex: highlightIndex, highlightedOption: highlightedOption, listboxId: listboxId, tagRender: tagRender, onSearchTextChange: handleSearchTextChange, onOpenChange: emitOpenChange, onWidthChange: handleTriggerWidthChange, onMoveHighlight: moveHighlight, onSelectHighlighted: handleOptionSelect, onClear: handleClear, onRemoveTag: handleRemoveTag, onFocus: onFocus, onBlur: onBlur }), description && (0, __wake_namespace_0["jsx"])("div", { id: descriptionId, className: supportingStyle, "data-status": fieldStatus, children: description })] }) });
+};
+const __wake_default_export = Select;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/selectInput.cjs

@@ -0,0 +1,222 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react/jsx-runtime");
+const __wake_namespace_1 = require("@crab-dev/rc-dropdown-container");
+const __wake_namespace_2 = require("@crab-dev/rc-line-edit");
+const __wake_namespace_3 = require("@crab-dev/rc-button");
+const __wake_namespace_4 = require("@crab-dev/rc-spin");
+const __wake_namespace_5 = require("@crab-dev/rc-tag");
+const __wake_namespace_6 = require("@crab-dev/css");
+const __wake_namespace_7 = require("react");
+require("./token.cjs");
+;
+const setRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+};
+const controlStyle = "rc-select-208f8e064cef";
+const materialFieldStyle = "rc-select-de4f87d60f05";
+const fieldLabelStyle = "rc-select-608ca49a02dc";
+const controlDisabledStyle = "rc-select-238e884e6a17";
+const controlErrorStyle = "rc-select-e0726e9ad481";
+const controlWarningStyle = "rc-select-79b739b32fcb";
+const valueWrapStyle = "rc-select-1356dfc74a7f";
+const singleValueStyle = "rc-select-52cbc5cc4f0f";
+const placeholderStyle = "rc-select-37ce25dfcd13";
+const searchInputStyle = "rc-select-50dd3c70bcdc";
+const caretStyle = "rc-select-d7edabfe7361";
+const caretOpenStyle = "rc-select-30173f5e3d41";
+const tagLabelStyle = "rc-select-2e4337f305d8";
+const suffixWrapStyle = "rc-select-ee9f2054c459";
+const actionStyle = "rc-select-8504d95b52bc";
+const loadingIconStyle = "rc-select-3ab2c2f8c427";
+const sizeMetricsMap = { large: "rc-select-df4a743b55e1", middle: "rc-select-de4a743b542e", small: "rc-select-dd4a743b527b" };
+const sizeHeightFixedMap = { large: "rc-select-b8fc5925a597", middle: "rc-select-b7fc5925a3e4", small: "rc-select-bafc5925a8fd" };
+const sizeHeightFlexibleMap = { large: "rc-select-5d07f79a2f4a", middle: "rc-select-5e07f79a30fd", small: "rc-select-5b07f79a2be4" };
+const CaretIcon = () => (0, __wake_namespace_0["jsx"])("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "currentColor", children: (0, __wake_namespace_0["jsx"])("path", { d: "m7 10 5 5 5-5z" }) });
+const ClearIcon = () => (0, __wake_namespace_0["jsx"])("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, __wake_namespace_0["jsx"])("path", { d: "m18 6-12 12M6 6l12 12" }) });
+;
+const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disabled, searchable, multiple, size, status, appearance, label, labelId, required, allowClear, loading, maxTagCount, autoFocus, placeholder, selectedOptions, searchText, highlightIndex, highlightedOption, listboxId, tagRender, onSearchTextChange, onOpenChange, onWidthChange, onMoveHighlight, onSelectHighlighted, onClear, onRemoveTag, onFocus, onBlur }) => {
+  const { state, refs, dispatch } = (0, __wake_namespace_1["useDropdownContext"])();
+  const controlRef = (0, __wake_namespace_7["useRef"])(null);
+  const inputRef = (0, __wake_namespace_7["useRef"])(null);
+  const open = state.open;
+  const [hovered, setHovered] = (0, __wake_namespace_7["useState"])(false);
+  const [actionFocused, setActionFocused] = (0, __wake_namespace_7["useState"])(false);
+  const [withoutHover, setWithoutHover] = (0, __wake_namespace_7["useState"])(false);
+  (0, __wake_namespace_7["useEffect"])(() => {
+    const media = window.matchMedia?.("(hover: none)");
+    if (!media) return;
+    const update = () => setWithoutHover(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  const onOpenChangeRef = (0, __wake_namespace_7["useRef"])(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const mergeRef = (0, __wake_namespace_7["useCallback"])((node) => {
+    controlRef.current = node;
+    if (typeof refs.setReference === "function") {
+      refs.setReference(node);
+    }
+    setRef(ref, node);
+  }, [refs.setReference, ref]);
+  (0, __wake_namespace_7["useEffect"])(() => {
+    const el = controlRef.current;
+    if (!el) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        onWidthChange(entry.target.getBoundingClientRect().width);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [onWidthChange]);
+  (0, __wake_namespace_7["useEffect"])(() => {
+    if (open && searchable) {
+      queueMicrotask(() => inputRef.current?.focus());
+    }
+  }, [open, searchable]);
+  (0, __wake_namespace_7["useEffect"])(() => {
+    if (autoFocus && controlRef.current) {
+      controlRef.current.focus();
+    }
+  }, [autoFocus]);
+  const isFirstOpenRender = (0, __wake_namespace_7["useRef"])(true);
+  (0, __wake_namespace_7["useEffect"])(() => {
+    if (isFirstOpenRender.current) {
+      isFirstOpenRender.current = false;
+      return;
+    }
+    onOpenChangeRef.current(open);
+  }, [open]);
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+    dispatch({ type: "setOpen", payload: !open });
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) {
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) {
+          dispatch({ type: "setOpen", payload: true });
+        }
+        onMoveHighlight(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) {
+          dispatch({ type: "setOpen", payload: true });
+        }
+        onMoveHighlight(-1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (open && highlightedOption) {
+          onSelectHighlighted(highlightedOption);
+          if (!multiple) {
+            dispatch({ type: "setOpen", payload: false });
+          }
+        } else if (!open) {
+          dispatch({ type: "setOpen", payload: true });
+        }
+        break;
+      case " ":
+        if (!searchable || !open) {
+          e.preventDefault();
+          if (!open) {
+            dispatch({ type: "setOpen", payload: true });
+          }
+        }
+        break;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          dispatch({ type: "setOpen", payload: false });
+        }
+        break;
+      case "Backspace":
+        if (multiple && searchText === "" && selectedOptions.length > 0) {
+          const lastOption = selectedOptions[selectedOptions.length - 1];
+          onRemoveTag(lastOption.value);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  const triggerClear = () => {
+    controlRef.current?.focus();
+    onClear();
+    if (open) {
+      dispatch({ type: "setOpen", payload: false });
+    }
+  };
+  const handleClearClick = (e) => {
+    e.stopPropagation();
+    triggerClear();
+  };
+  const handleClearKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.stopPropagation();
+    }
+  };
+  const canClear = allowClear && !disabled && selectedOptions.length > 0;
+  const showClear = canClear && (hovered || actionFocused || withoutHover);
+  const renderTag = (opt) => {
+    const handleClose = () => onRemoveTag(opt.value);
+    if (tagRender) {
+      return (0, __wake_namespace_0["jsx"])("span", { children: tagRender(opt, handleClose) }, opt.value);
+    }
+    return (0, __wake_namespace_0["jsx"])(__wake_namespace_5 && __wake_namespace_5.__esModule ? __wake_namespace_5.default : __wake_namespace_5, { size: "small", closable: true, closeAriaLabel: `Remove ${typeof opt.label === "string" ? opt.label : opt.value}`, onClose: handleClose, children: (0, __wake_namespace_0["jsx"])("span", { className: tagLabelStyle, children: opt.label }) }, opt.value);
+  };
+  const renderTags = () => {
+    if (maxTagCount !== undefined && selectedOptions.length > maxTagCount) {
+      const visible = selectedOptions.slice(0, maxTagCount);
+      const overflowCount = selectedOptions.length - maxTagCount;
+      return (0, __wake_namespace_0["jsxs"])(__wake_namespace_0["Fragment"], { children: [visible.map(renderTag), (0, __wake_namespace_0["jsxs"])(__wake_namespace_5 && __wake_namespace_5.__esModule ? __wake_namespace_5.default : __wake_namespace_5, { size: "small", children: ["+", overflowCount] })] });
+    }
+    return selectedOptions.map(renderTag);
+  };
+  const renderContent = () => {
+    if (searchable && open) {
+      return (0, __wake_namespace_0["jsxs"])(__wake_namespace_0["Fragment"], { children: [multiple && renderTags(), (0, __wake_namespace_0["jsx"])(__wake_namespace_2 && __wake_namespace_2.__esModule ? __wake_namespace_2.default : __wake_namespace_2, { ref: inputRef, bordered: false, value: searchText, placeholder: multiple && selectedOptions.length > 0 ? "" : placeholder, onChange: (e) => onSearchTextChange(e.target.value), onClick: (e) => e.stopPropagation(), className: searchInputStyle })] });
+    }
+    if (multiple) {
+      if (selectedOptions.length === 0) {
+        return (0, __wake_namespace_0["jsx"])("span", { className: placeholderStyle, children: placeholder });
+      }
+      return renderTags();
+    }
+    if (selectedOptions.length === 0) {
+      return (0, __wake_namespace_0["jsx"])("span", { className: placeholderStyle, children: placeholder });
+    }
+    return (0, __wake_namespace_0["jsx"])("span", { className: singleValueStyle, children: selectedOptions[0]?.label });
+  };
+  const activeDescendantId = open && highlightIndex >= 0 ? `${listboxId}-option-${highlightIndex}` : undefined;
+  return (0, __wake_namespace_0["jsxs"])("div", { id: id, role: "combobox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": required || undefined, "aria-expanded": open, "aria-disabled": disabled, "aria-busy": loading || undefined, "aria-haspopup": "listbox", "aria-controls": open ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-invalid": status === "error" ? true : undefined, "data-appearance": appearance, "data-clearable": canClear, "data-labeled": Boolean(label), "data-floating": Boolean(open || selectedOptions.length > 0 || searchText), "data-status": status, tabIndex: disabled ? -1 : 0, ref: mergeRef, className: __wake_namespace_6["cx"].call(undefined, controlStyle, sizeMetricsMap[size], multiple ? sizeHeightFlexibleMap[size] : sizeHeightFixedMap[size], disabled && controlDisabledStyle, status === "error" && controlErrorStyle, status === "warning" && controlWarningStyle, materialFieldStyle), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerOver: (event) => {
+    if (event.pointerType !== "touch") setHovered(true);
+  }, onPointerOut: (event) => {
+    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+      setHovered(false);
+    }
+  }, children: [label && (0, __wake_namespace_0["jsxs"])("span", { id: labelId, "data-role": "select-label", className: fieldLabelStyle, children: [label, required ? " *" : ""] }), (0, __wake_namespace_0["jsx"])("div", { "data-role": "select-value", className: valueWrapStyle, children: renderContent() }), (0, __wake_namespace_0["jsxs"])("span", { "data-role": "select-suffix", className: suffixWrapStyle, children: [loading ? (0, __wake_namespace_0["jsx"])("span", { "aria-hidden": "true", className: loadingIconStyle, children: (0, __wake_namespace_0["jsx"])(__wake_namespace_4["SpinIndicator"], {}) }) : null, (0, __wake_namespace_0["jsx"])(__wake_namespace_3 && __wake_namespace_3.__esModule ? __wake_namespace_3.default : __wake_namespace_3, { "data-role": showClear ? "select-clear" : "select-caret", className: actionStyle, type: "button", appearance: "text", shape: "circle", size: size, disabled: disabled, "aria-label": showClear ? "Clear" : open ? "Close options" : "Open options", "aria-expanded": showClear ? undefined : open, icon: showClear ? (0, __wake_namespace_0["jsx"])(ClearIcon, {}) : (0, __wake_namespace_0["jsx"])("span", { "aria-hidden": "true", className: __wake_namespace_6["cx"].call(undefined, caretStyle, open && caretOpenStyle), children: (0, __wake_namespace_0["jsx"])(CaretIcon, {}) }), onFocus: () => setActionFocused(true), onBlur: () => setActionFocused(false), onClick: (event) => {
+    if (showClear) handleClearClick(event); else {
+      event.stopPropagation();
+      handleClick();
+    }
+  }, onKeyDown: handleClearKeyDown })] })] });
+};
+const __wake_default_export = SelectInput;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/selectOverlay.cjs

@@ -0,0 +1,102 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("react/jsx-runtime");
+const __wake_namespace_1 = require("@crab-dev/rc-checkbox");
+const __wake_namespace_2 = require("@crab-dev/rc-spin");
+const __wake_namespace_3 = require("@crab-dev/rc-virtual");
+const __wake_namespace_4 = require("@crab-dev/rc-hooks");
+const __wake_namespace_5 = require("@crab-dev/css");
+const __wake_namespace_6 = require("@crab-dev/rc-dropdown-container");
+const __wake_namespace_7 = require("react");
+require("./token.cjs");
+;
+const hasGroups = (options) => options.some((opt) => opt.isGroupLabel);
+const overlayStyle = "rc-select-8032ea9d3fcc";
+const optionStyle = "rc-select-41a9c05e6999";
+const optionHighlightStyle = "rc-select-787681543371";
+const measureStyle = "rc-select-9fccdf1a17f8";
+const optionSelectedStyle = "rc-select-afbd832dfa96";
+const optionSelectedSingleStyle = "rc-select-92da46dc013a";
+const optionDisabledStyle = "rc-select-b51a97d11fd1";
+const optionLabelStyle = "rc-select-462ffe03d1f7";
+const checkIconStyle = "rc-select-4d7b259b317b";
+const checkboxIndicatorStyle = "rc-select-8509288b81d2";
+const emptyStyle = "rc-select-742133f23b03";
+const groupLabelStyle = "rc-select-4222a3b1548f";
+const groupedOptionStyle = "rc-select-fa0b905ad8a1";
+const virtualTopSpacerStyle = "rc-select-25c250ff4ce4";
+const virtualBottomSpacerStyle = "rc-select-bf5e0c73c29c";
+const loadingStyle = "rc-select-0ed119f292d0";
+const DROPDOWN_PADDING = 4;
+const ROW_HEIGHT = 48;
+const MAX_VIEWPORT_HEIGHT = 256;
+;
+const SelectOverlay = ({ multiple, loading, filteredOptions, selectedValues, triggerWidth, highlightIndex, listboxId, notFoundContent, popupClassName, optionRender, dropdownRender, onOptionSelect, onOpenChange, onHighlightChange }) => {
+  const { dispatch } = (0, __wake_namespace_6["useDropdownContext"])();
+  const coarsePointer = (0, __wake_namespace_4["useMediaQuery"])("(pointer: coarse)");
+  const overlayRef = (0, __wake_namespace_7["useRef"])(null);
+  const [measuredRowHeight, setMeasuredRowHeight] = (0, __wake_namespace_7["useState"])(ROW_HEIGHT);
+  const rowHeight = Math.max(coarsePointer ? 48 : ROW_HEIGHT, measuredRowHeight);
+  (0, __wake_namespace_7["useLayoutEffect"])(() => {
+    const option = overlayRef.current?.querySelector("[data-select-option-measure]");
+    if (!option) return;
+    const measure = () => {
+      const height = option.getBoundingClientRect().height;
+      if (height > 0) {
+        overlayRef.current?.style.setProperty("--select-option-measured-height", `${height}px`);
+        setMeasuredRowHeight(height);
+      }
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(option);
+    return () => observer.disconnect();
+  }, [coarsePointer, filteredOptions.length, loading]);
+  const gridRef = (0, __wake_namespace_7["useRef"])(null);
+  (0, __wake_namespace_7["useEffect"])(() => {
+    if (highlightIndex < 0) {
+      return;
+    }
+    gridRef.current?.scrollToCell({ rowIndex: highlightIndex });
+  }, [highlightIndex]);
+  const rowCount = filteredOptions.length;
+  const contentWidth = Math.max(triggerWidth - DROPDOWN_PADDING * 2, 160);
+  const viewportHeight = Math.min(MAX_VIEWPORT_HEIGHT, rowCount * rowHeight);
+  const rows = Array(rowCount).fill(rowHeight);
+  const columns = [contentWidth];
+  if (loading) {
+    return (0, __wake_namespace_0["jsx"])("div", { id: listboxId, role: "listbox", "aria-busy": "true", "data-select-overlay": true, className: __wake_namespace_5["cx"].call(undefined, overlayStyle, popupClassName), children: (0, __wake_namespace_0["jsx"])("div", { className: loadingStyle, children: (0, __wake_namespace_0["jsx"])(__wake_namespace_2["SpinIndicator"], {}) }) });
+  }
+  if (filteredOptions.length === 0) {
+    return (0, __wake_namespace_0["jsx"])("div", { id: listboxId, role: "listbox", "data-select-overlay": true, className: __wake_namespace_5["cx"].call(undefined, overlayStyle, popupClassName), children: (0, __wake_namespace_0["jsx"])("div", { className: emptyStyle, children: notFoundContent ?? "无匹配选项" }) });
+  }
+  const isGrouped = hasGroups(filteredOptions);
+  const menu = (0, __wake_namespace_0["jsx"])(__wake_namespace_3 && __wake_namespace_3.__esModule ? __wake_namespace_3.default : __wake_namespace_3, { gridRef: gridRef, viewportWidth: contentWidth, viewportHeight: viewportHeight, gridTemplateColumns: columns, gridTemplateRows: rows, overscanRowCount: 4, renderRows: (rowRange) => {
+    const nodes = [(0, __wake_namespace_0["jsx"])("div", { "data-select-virtual-spacer": "top", className: virtualTopSpacerStyle }, "__select-top-padding__")];
+    for (let i = rowRange[0]; i <= rowRange[1]; i += 1) {
+      const option = filteredOptions[i];
+      if (option.isGroupLabel) {
+        nodes.push((0, __wake_namespace_0["jsx"])("div", { "data-group-label": true, className: groupLabelStyle, children: option.label }, option.value));
+        continue;
+      }
+      const selected = selectedValues.includes(option.value);
+      const highlighted = i === highlightIndex;
+      const content = optionRender ? optionRender(option, { selected }) : (0, __wake_namespace_0["jsxs"])(__wake_namespace_0["Fragment"], { children: [multiple ? (0, __wake_namespace_0["jsx"])(__wake_namespace_1 && __wake_namespace_1.__esModule ? __wake_namespace_1.default : __wake_namespace_1, { className: checkboxIndicatorStyle, checked: selected, disabled: option.disabled, tabIndex: -1, "aria-label": typeof option.label === "string" ? option.label : option.value }) : null, (0, __wake_namespace_0["jsx"])("span", { className: optionLabelStyle, children: option.label }), !multiple && selected ? (0, __wake_namespace_0["jsx"])("span", { className: checkIconStyle, children: (0, __wake_namespace_0["jsx"])("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, __wake_namespace_0["jsx"])("path", { d: "M20 6 9 17l-5-5" }) }) }) : null] });
+      const optionAriaLabel = multiple ? typeof option.label === "string" ? option.label : option.value : undefined;
+      nodes.push((0, __wake_namespace_0["jsx"])("div", { id: `${listboxId}-option-${i}`, role: "option", "aria-selected": selected, "aria-disabled": option.disabled || undefined, "aria-label": optionAriaLabel, className: __wake_namespace_5["cx"].call(undefined, optionStyle, isGrouped && groupedOptionStyle, selected && (multiple ? optionSelectedStyle : optionSelectedSingleStyle), highlighted && optionHighlightStyle, option.disabled && optionDisabledStyle), onMouseEnter: () => onHighlightChange(i), onClick: () => {
+        onOptionSelect(option);
+        if (!multiple && !option.disabled) {
+          dispatch({ type: "setOpen", payload: false });
+          onOpenChange(false);
+        }
+      }, children: content }, option.value));
+    }
+    nodes.push((0, __wake_namespace_0["jsx"])("div", { "data-select-virtual-spacer": "bottom", className: virtualBottomSpacerStyle }, "__select-bottom-padding__"));
+    return nodes;
+  } });
+  return (0, __wake_namespace_0["jsxs"])("div", { id: listboxId, ref: overlayRef, "data-select-overlay": true, className: __wake_namespace_5["cx"].call(undefined, overlayStyle, popupClassName), role: "listbox", "aria-multiselectable": multiple || undefined, children: [(0, __wake_namespace_0["jsx"])("div", { "aria-hidden": "true", "data-select-option-measure": "", className: (0, __wake_namespace_5["cx"])(optionStyle, measureStyle), children: "M" }), dropdownRender ? dropdownRender(menu) : menu] });
+};
+const __wake_default_export = SelectOverlay;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });

package/cjs/_wake/src/token.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const __wake_namespace_0 = require("@crab-dev/css");
+const vars = (0, __wake_namespace_0["defineTokens"])({ "option.checkbox.width": "--select-option-checkbox-width", "option.background-color-hover": "--select-option-background-color-hover", "option.color-selected": "--select-option-color-selected", "option.background-color-selected": "--select-option-background-color-selected", "option.color-disabled": "--select-option-color-disabled", "option.highlight.background-color": "--select-option-highlight-background-color", "option.background-color-active": "--select-option-background-color-active", "option.height": "--select-option-height", "option.padding-block": "--select-option-padding-block", "option.font-size": "--select-option-font-size", "option.line-height": "--select-option-line-height", "root.transition": "--select-root-transition", "root.opacity-disabled": "--select-root-opacity-disabled", "root.touch.min-height": "--select-root-touch-min-height", "root.outline-width-focus": "--select-root-outline-width-focus", "root.outline-offset-focus": "--select-root-outline-offset-focus", "root.border-width": "--select-root-border-width", "root.border-style": "--select-root-border-style", "root.border-color": "--select-root-border-color", "root.border-color-hover": "--select-root-border-color-hover", "root.border-color-focus": "--select-root-border-color-focus", "root.border-color-error": "--select-root-border-color-error", "root.border-color-warning": "--select-root-border-color-warning", "root.border-radius": "--select-root-border-radius", "root.background-color": "--select-root-background-color", "root.background-color-disabled": "--select-root-background-color-disabled", "root.box-shadow": "--select-root-box-shadow", "root.box-shadow-focus": "--select-root-box-shadow-focus", "root.validation.box-shadow-error": "--select-root-validation-box-shadow-error", "root.validation.box-shadow-warning": "--select-root-validation-box-shadow-warning", "root.color-loading": "--select-root-color-loading", "motion.interaction.transition": "--select-motion-interaction-transition", "motion.spatial.transition": "--select-motion-spatial-transition", "text.color": "--select-text-color", "text.color-placeholder": "--select-text-color-placeholder", "text.color-disabled": "--select-text-color-disabled", "tag.background-color": "--select-tag-background-color", "tag.color": "--select-tag-color", "tag.close.color-hover": "--select-tag-close-color-hover", "clear.color": "--select-clear-color", "clear.color-hover": "--select-clear-color-hover", "clear.width": "--select-clear-width", "clear.height": "--select-clear-height", "clear.touch.width": "--select-clear-touch-width", "clear.box-shadow-focus": "--select-clear-box-shadow-focus", "icon.width": "--select-icon-width", "icon.color": "--select-icon-color", "field.gap": "--select-field-gap", "field.padding-inline": "--select-field-padding-inline", "field.label.top": "--select-field-label-top", "field.label.padding-inline": "--select-field-label-padding-inline", "field.label.font-size": "--select-field-label-font-size", "field.label.line-height": "--select-field-label-line-height", "field.label.color": "--select-field-label-color", "field.label.color-focus": "--select-field-label-color-focus", "field.input.padding-top": "--select-field-input-padding-top", "field.transition": "--select-field-transition", "field.filled.background-color": "--select-field-filled-background-color", "field.filled.background-color-hover": "--select-field-filled-background-color-hover", "field.indicator.border-color": "--select-field-indicator-border-color", "field.indicator.box-shadow-focus": "--select-field-indicator-box-shadow-focus", "field.indicator.box-shadow-error": "--select-field-indicator-box-shadow-error", "field.indicator.box-shadow-warning": "--select-field-indicator-box-shadow-warning", "field.color-error": "--select-field-color-error", "field.color-warning": "--select-field-color-warning", "field.support.line-height": "--select-field-support-line-height", "group.color": "--select-group-color", "group.font-size": "--select-group-font-size", "size.large.height": "--select-size-large-height", "size.large.padding": "--select-size-large-padding", "size.large.font-size": "--select-size-large-font-size", "size.large.line-height": "--select-size-large-line-height", "size.large.action.width": "--select-size-large-action-width", "size.middle.height": "--select-size-middle-height", "size.middle.padding": "--select-size-middle-padding", "size.middle.font-size": "--select-size-middle-font-size", "size.middle.line-height": "--select-size-middle-line-height", "size.middle.action.width": "--select-size-middle-action-width", "size.small.height": "--select-size-small-height", "size.small.padding": "--select-size-small-padding", "size.small.font-size": "--select-size-small-font-size", "size.small.line-height": "--select-size-small-line-height", "size.small.action.width": "--select-size-small-action-width", "dropdown.margin": "--select-dropdown-margin", "dropdown.max-height": "--select-dropdown-max-height", "dropdown.padding": "--select-dropdown-padding", "dropdown.option.padding": "--select-dropdown-option-padding", "dropdown.border-radius": "--select-dropdown-border-radius" });
+Object.defineProperty(exports, "vars", { enumerable: true, get: function() {
+  return vars;
+} });
+const token = (0, __wake_namespace_0["defineTokens"])({ "option": { "checkbox": { "width": `var(${vars["option.checkbox.width"]}, 18px)` }, "background-color-hover": `var(${vars["option.background-color-hover"]}, var(--token-semantic-color-state-hover, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))))`, "color-selected": `var(${vars["option.color-selected"]}, var(--token-semantic-color-brand-on-container, var(--token-semantic-color-selection-foreground, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))))`, "background-color-selected": `var(${vars["option.background-color-selected"]}, var(--token-semantic-color-brand-container, var(--token-semantic-color-selection-background, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510)))))`, "color-disabled": `var(${vars["option.color-disabled"]}, var(--token-semantic-color-text-disabled, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "highlight": { "background-color": `var(${vars["option.highlight.background-color"]}, var(--token-semantic-color-state-hover, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))))` }, "background-color-active": `var(${vars["option.background-color-active"]}, var(--token-semantic-color-state-pressed, var(--token-semantic-color-background-active-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-pressed, var(--token-global-opacity-12, 0.12)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))))`, "height": `var(${vars["option.height"]}, var(--token-semantic-density-item, var(--token-global-size-48, 48px)))`, "padding-block": `var(${vars["option.padding-block"]}, var(--token-semantic-space-component-gap, var(--token-global-space-2, 8px)))`, "font-size": `var(${vars["option.font-size"]}, var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["option.line-height"]}, var(--token-semantic-typography-body-large-line-height, var(--token-global-line-height-16-24, 1.5)))` }, "root": { "transition": `var(${vars["root.transition"]}, background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), border-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), box-shadow var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))))`, "opacity-disabled": `var(${vars["root.opacity-disabled"]}, var(--token-semantic-opacity-disabled, var(--token-global-opacity-38, 0.38)))`, "touch": { "min-height": `var(${vars["root.touch.min-height"]}, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)))` }, "outline-width-focus": `var(${vars["root.outline-width-focus"]}, 2px)`, "outline-offset-focus": `var(${vars["root.outline-offset-focus"]}, 2px)`, "border-width": `var(${vars["root.border-width"]}, 1px)`, "border-style": `var(${vars["root.border-style"]}, solid)`, "border-color": `var(${vars["root.border-color"]}, var(--token-semantic-color-border-default, var(--token-global-material-neutral-variant-50, oklch(0.56674707 0.01627446 308.142182))))`, "border-color-hover": `var(${vars["root.border-color-hover"]}, var(--token-semantic-color-border-hover, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "border-color-focus": `var(${vars["root.border-color-focus"]}, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))))`, "border-color-error": `var(${vars["root.border-color-error"]}, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))))`, "border-color-warning": `var(${vars["root.border-color-warning"]}, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))))`, "border-radius": `var(${vars["root.border-radius"]}, var(--token-semantic-shape-extra-small, var(--token-global-radius-2, 4px)))`, "background-color": `var(${vars["root.background-color"]}, var(--token-semantic-color-surface-content, var(--token-semantic-color-background-surface, var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957)))))`, "background-color-disabled": `var(${vars["root.background-color-disabled"]}, var(--token-semantic-color-background-disabled, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144))))`, "box-shadow": `var(${vars["root.box-shadow"]}, none)`, "box-shadow-focus": `var(${vars["root.box-shadow-focus"]}, inset 0 0 0 2px var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))))`, "validation": { "box-shadow-error": `var(${vars["root.validation.box-shadow-error"]}, inset 0 0 0 2px var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))))`, "box-shadow-warning": `var(${vars["root.validation.box-shadow-warning"]}, inset 0 0 0 2px var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))))` }, "color-loading": `var(${vars["root.color-loading"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))` }, "motion": { "interaction": { "transition": `var(${vars["motion.interaction.transition"]}, var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))))` }, "spatial": { "transition": `var(${vars["motion.spatial.transition"]}, var(--token-semantic-motion-spatial-fast, var(--token-global-duration-350, 350ms) var(--token-global-easing-expressive-spatial-fast, cubic-bezier(0.42, 1.67, 0.21, 0.90))))` } }, "text": { "color": `var(${vars["text.color"]}, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "color-placeholder": `var(${vars["text.color-placeholder"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "color-disabled": `var(${vars["text.color-disabled"]}, var(--token-semantic-color-text-disabled, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))` }, "tag": { "background-color": `var(${vars["tag.background-color"]}, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957)))))`, "color": `var(${vars["tag.color"]}, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "close": { "color-hover": `var(${vars["tag.close.color-hover"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))` } }, "clear": { "color": `var(${vars["clear.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "color-hover": `var(${vars["clear.color-hover"]}, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "width": `var(${vars["clear.width"]}, var(--token-semantic-size-48, var(--token-global-size-48, 48px)))`, "height": `var(${vars["clear.height"]}, var(--token-semantic-size-48, var(--token-global-size-48, 48px)))`, "touch": { "width": `var(${vars["clear.touch.width"]}, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)))` }, "box-shadow-focus": `var(${vars["clear.box-shadow-focus"]}, inset 0 0 0 1px var(--token-semantic-color-focus-ring, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))))` }, "icon": { "width": `var(${vars["icon.width"]}, var(--token-semantic-space-group-gap, var(--token-global-space-6, 24px)))`, "color": `var(${vars["icon.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))` }, "field": { "gap": `var(${vars["field.gap"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "padding-inline": `var(${vars["field.padding-inline"]}, var(--token-semantic-space-section-gap, var(--token-global-space-4, 16px)))`, "label": { "top": `var(${vars["field.label.top"]}, var(--token-semantic-space-component-gap, var(--token-global-space-2, 8px)))`, "padding-inline": `var(${vars["field.label.padding-inline"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "font-size": `var(${vars["field.label.font-size"]}, var(--token-semantic-typography-body-small-font-size, var(--token-global-font-size-xs, 12px)))`, "line-height": `var(${vars["field.label.line-height"]}, var(--token-semantic-typography-body-small-line-height, var(--token-global-line-height-12-16, 1.3333333333333333)))`, "color": `var(${vars["field.label.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "color-focus": `var(${vars["field.label.color-focus"]}, var(--token-semantic-color-brand-primary, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))))` }, "input": { "padding-top": `var(${vars["field.input.padding-top"]}, var(--token-semantic-space-section-gap, var(--token-global-space-4, 16px)))` }, "transition": `var(${vars["field.transition"]}, top var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), font-size var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))))`, "filled": { "background-color": `var(${vars["field.filled.background-color"]}, var(--token-semantic-color-surface-highest, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144))))`, "background-color-hover": `var(${vars["field.filled.background-color-hover"]}, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-semantic-color-surface-highest, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144)))))` }, "indicator": { "border-color": `var(${vars["field.indicator.border-color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "box-shadow-focus": `var(${vars["field.indicator.box-shadow-focus"]}, inset 0 -2px 0 var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))))`, "box-shadow-error": `var(${vars["field.indicator.box-shadow-error"]}, inset 0 -2px 0 var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))))`, "box-shadow-warning": `var(${vars["field.indicator.box-shadow-warning"]}, inset 0 -2px 0 var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))))` }, "color-error": `var(${vars["field.color-error"]}, var(--token-semantic-color-feedback-error-text, var(--token-global-material-error-10, oklch(0.25390329 0.07937181 27.605486))))`, "color-warning": `var(${vars["field.color-warning"]}, var(--token-semantic-color-feedback-warning-text, var(--token-global-amber-900, oklch(0.414 0.112 68))))`, "support": { "line-height": `var(${vars["field.support.line-height"]}, var(--token-semantic-typography-body-small-line-height, var(--token-global-line-height-12-16, 1.3333333333333333)))` } }, "group": { "color": `var(${vars["group.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "font-size": `var(${vars["group.font-size"]}, var(--token-semantic-typography-caption-font-size, var(--token-global-font-size-xs, 12px)))` }, "size": { "large": { "height": `var(${vars["size.large.height"]}, var(--token-semantic-sizing-large-field, var(--token-global-size-64, 64px)))`, "padding": `var(${vars["size.large.padding"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)))`, "font-size": `var(${vars["size.large.font-size"]}, var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["size.large.line-height"]}, calc(var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)) * var(--token-semantic-typography-body-large-line-height, var(--token-global-line-height-16-24, 1.5))))`, "action": { "width": `var(${vars["size.large.action.width"]}, var(--token-semantic-sizing-large-action, var(--token-global-size-48, 48px)))` } }, "middle": { "height": `var(${vars["size.middle.height"]}, var(--token-semantic-sizing-middle-field, var(--token-global-size-56, 56px)))`, "padding": `var(${vars["size.middle.padding"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)))`, "font-size": `var(${vars["size.middle.font-size"]}, var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["size.middle.line-height"]}, calc(var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)) * var(--token-semantic-typography-body-large-line-height, var(--token-global-line-height-16-24, 1.5))))`, "action": { "width": `var(${vars["size.middle.action.width"]}, var(--token-semantic-sizing-middle-action, var(--token-global-size-40, 40px)))` } }, "small": { "height": `var(${vars["size.small.height"]}, var(--token-semantic-sizing-small-field, var(--token-global-size-48, 48px)))`, "padding": `var(${vars["size.small.padding"]}, 0 var(--token-semantic-space-control-padding-x-small, var(--token-global-space-2, 8px)))`, "font-size": `var(${vars["size.small.font-size"]}, var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["size.small.line-height"]}, calc(var(--token-semantic-typography-body-large-font-size, var(--token-global-font-size-md, 16px)) * var(--token-semantic-typography-body-large-line-height, var(--token-global-line-height-16-24, 1.5))))`, "action": { "width": `var(${vars["size.small.action.width"]}, var(--token-semantic-sizing-small-action, var(--token-global-size-32, 32px)))` } } }, "dropdown": { "margin": `var(${vars["dropdown.margin"]}, 6px)`, "max-height": `var(${vars["dropdown.max-height"]}, 240px)`, "padding": `var(${vars["dropdown.padding"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "option": { "padding": `var(${vars["dropdown.option.padding"]}, var(--token-semantic-space-component-gap, var(--token-global-space-2, 8px)))` }, "border-radius": `var(${vars["dropdown.border-radius"]}, var(--token-semantic-shape-extra-small, var(--token-global-radius-2, 4px)))` } });
+const __wake_default_export = token;
+Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+  return __wake_default_export;
+} });