musae 0.2.26 → 0.3.0

package/dist/components/rich-text-editor/rich-text-editor.cjs

@@ -0,0 +1,209 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var LexicalComposer = require('@lexical/react/LexicalComposer');
+var LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
+var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
+var LexicalLinkPlugin = require('@lexical/react/LexicalLinkPlugin');
+var LexicalClickableLinkPlugin = require('@lexical/react/LexicalClickableLinkPlugin');
+var LexicalListPlugin = require('@lexical/react/LexicalListPlugin');
+var index$2 = require('./plugins/check-list/index.cjs');
+var index$3 = require('./plugins/controlled-state/index.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('../message/hooks.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var richText = require('@lexical/rich-text');
+var link = require('@lexical/link');
+var list = require('@lexical/list');
+var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
+var code = require('@lexical/code');
+var checkableListItem = require('./nodes/checkable-list-item.cjs');
+var index$1 = require('./plugins/toolbar/index.cjs');
+var index = require('./plugins/markdown-shortcut/index.cjs');
+var theme = require('../theme/theme.cjs');
+require('../checkbox/index.cjs');
+var markdown = require('@lexical/markdown');
+var styles$1 = require('../checkbox/styles.cjs');
+
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange"];
+var styles = {
+  shell: function shell(props) {
+    return [{
+      backgroundColor: "musaex-q1mx2j",
+      borderRadius: "musaex-qwu505",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  variables: function variables(props) {
+    return [{
+      "--primary-color": "musaex-1w3qx2l",
+      "--on-primary-color": "musaex-1i66ttz",
+      "--outline-color": "musaex-1x71zss",
+      "--code-background-color": "musaex-1gm2eyx",
+      $$css: true
+    }, {
+      "----primary-color": props.primaryColor != null ? props.primaryColor : "initial",
+      "----on-primary-color": props.onPrimaryColor != null ? props.onPrimaryColor : "initial",
+      "----outline-color": props.outlineColor != null ? props.outlineColor : "initial",
+      "----code-background-color": props.codeBackgroundColor != null ? props.codeBackgroundColor : "initial"
+    }];
+  },
+  checkbox: {
+    position: "musaex-10l6tqk",
+    insetInlineStart: "musaex-1fx3lr6",
+    left: null,
+    right: null,
+    top: "musaex-13op6mf",
+    $$css: true
+  }
+};
+var RichTextEditor = function RichTextEditor(_ref) {
+  var _props$ariaPlacehold;
+  var placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 1),
+    id = _useIdentity2[0];
+  var _useMessage = hooks.useMessage(),
+    _useMessage2 = _slicedToArray(_useMessage, 2),
+    messager = _useMessage2[0],
+    holder = _useMessage2[1];
+  var theme$1 = hooks$1.useTheme();
+  var _use = relax.useDefault(function () {
+    var _props$use;
+    return (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "serialized";
+  });
+  var styled = {
+    shell: stylex.default.props(styles.shell({
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainer]
+    }), styles.variables({
+      primaryColor: theme$1.colors[colors.ColorToken.Primary],
+      onPrimaryColor: theme$1.colors[colors.ColorToken.OnPrimary],
+      outlineColor: theme$1.colors[colors.ColorToken.Outline],
+      codeBackgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest]
+    })),
+    editor: {
+      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-1y06zzy"
+    },
+    h1: stylex.default.props(theme.typography.display.large),
+    h2: stylex.default.props(theme.typography.display.medium),
+    h3: stylex.default.props(theme.typography.display.small),
+    h4: stylex.default.props(theme.typography.headline.large),
+    h5: stylex.default.props(theme.typography.headline.medium),
+    h6: stylex.default.props(theme.typography.headline.small),
+    code: {
+      className: "musaex-1x8l0va musaex-1pgy25r musaex-1fioaya musaex-1lliihq musaex-ysyzu8"
+    },
+    inlineCode: {
+      className: "musaex-1pgy25r musaex-1x8l0va musaex-1fioaya"
+    },
+    link: {
+      className: "musaex-1qlt0p8 musaex-1ed109x musaex-1hl2dhg musaex-t0b8zv"
+    },
+    listItem: {
+      "default": {
+        className: "musaex-1a2a7pz musaex-1n2onr6 musaex-ei3nwd"
+      },
+      checked: {
+        className: "musaex-mqliwb"
+      }
+    },
+    checkbox: {
+      unchecked: stylex.default.props(styles$1.default.trigger["default"], styles.checkbox),
+      checked: stylex.default.props(styles$1.default.trigger["default"], styles$1.default.trigger.checked, styles.checkbox)
+    }
+  };
+  var initialConfig = relax.useDefault(function () {
+    var theme = {
+      heading: {
+        h1: styled.h1.className,
+        h2: styled.h2.className,
+        h3: styled.h3.className,
+        h4: styled.h4.className,
+        h5: styled.h5.className,
+        h6: styled.h6.className
+      },
+      code: styled.code.className,
+      text: {
+        code: styled.inlineCode.className
+      },
+      link: styled.link.className,
+      list: {
+        listitem: styled.listItem["default"].className,
+        listitemChecked: styled.listItem.checked.className
+      },
+      checkList: {
+        checkbox: {
+          checked: styled.checkbox.checked.className,
+          unchecked: styled.checkbox.unchecked.className
+        }
+      }
+    };
+    return {
+      namespace: id,
+      onError: function onError(error) {
+        messager.error({
+          description: error.message
+        });
+      },
+      nodes: [richText.HeadingNode, richText.QuoteNode, code.CodeNode, link.LinkNode, list.ListNode, checkableListItem.CheckableListItemNode, checkableListItem.replacement, LexicalHorizontalRuleNode.HorizontalRuleNode],
+      theme: theme,
+      editable: !disabled,
+      editorState: defaultValue && function (editor) {
+        // different value usage, use different serialization
+        switch (_use) {
+          case "markdown":
+            markdown.$convertFromMarkdownString(defaultValue, index.TRANSFORMERS);
+            break;
+          default:
+            editor.setEditorState(editor.parseEditorState(defaultValue));
+            break;
+        }
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styled.shell.className,
+    style: styled.shell.style
+  }, !disabled && /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable.ContentEditable, {
+      className: styled.editor.className,
+      style: styled.editor.style,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : function () {
+        return null;
+      },
+      "aria-placeholder": (_props$ariaPlacehold = props["aria-placeholder"]) !== null && _props$ariaPlacehold !== void 0 ? _props$ariaPlacehold : ""
+    }),
+    ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
+  }), /*#__PURE__*/React.createElement(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(index.default, null), /*#__PURE__*/React.createElement(LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin.ClickableLinkPlugin, {
+    disabled: !disabled,
+    newTab: true
+  }), /*#__PURE__*/React.createElement(LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(index$2.default, null), /*#__PURE__*/React.createElement(index$3.default, {
+    use: _use,
+    onChange: onChange
+  }), holder));
+};
+
+exports.default = RichTextEditor;

package/dist/components/rich-text-editor/rich-text-editor.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { RichTextEditorProps } from "./types";
-declare const RichTextEditor: ({ placeholder, disabled, defaultValue, value, onChange, ...props }: RichTextEditorProps) => React.JSX.Element;
+declare const RichTextEditor: ({ placeholder, disabled, defaultValue, onChange, ...props }: RichTextEditorProps) => React.JSX.Element;
 export default RichTextEditor;

package/dist/components/rich-text-editor/{rich-text-editor.js → rich-text-editor.mjs}

@@ -9,27 +9,27 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import CheckListPlugin from './plugins/check-list/index.js';
-import ControlledStatePlugin from './plugins/controlled-state/index.js';
+import CheckListPlugin from './plugins/check-list/index.mjs';
+import ControlledStatePlugin from './plugins/controlled-state/index.mjs';
 import { useIdentity, useDefault } from '@aiszlab/relax';
-import { useMessage } from '../message/hooks.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import { useMessage } from '../message/hooks.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { LinkNode } from '@lexical/link';
 import { ListNode } from '@lexical/list';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { CodeNode } from '@lexical/code';
-import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.js';
-import ToolbarPlugin from './plugins/toolbar/index.js';
-import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.js';
-import { typography } from '../theme/theme.js';
-import '../checkbox/index.js';
+import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.mjs';
+import ToolbarPlugin from './plugins/toolbar/index.mjs';
+import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.mjs';
+import { typography } from '../theme/theme.mjs';
+import '../checkbox/index.mjs';
 import { $convertFromMarkdownString } from '@lexical/markdown';
-import styles$1 from '../checkbox/styles.js';
+import styles$1 from '../checkbox/styles.mjs';
 
-var _excluded = ["placeholder", "disabled", "defaultValue", "value", "onChange"];
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -77,7 +77,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     defaultValue = _ref.defaultValue,
-    value = _ref.value,
     onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = useIdentity(),
@@ -168,16 +167,14 @@ var RichTextEditor = function RichTextEditor(_ref) {
       nodes: [HeadingNode, QuoteNode, CodeNode, LinkNode, ListNode, CheckableListItemNode, replacement, HorizontalRuleNode],
       theme: theme,
       editable: !disabled,
-      editorState: function editorState(editor) {
-        var _value = value !== null && value !== void 0 ? value : defaultValue;
-        if (!_value) return;
+      editorState: defaultValue && function (editor) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            $convertFromMarkdownString(_value, TRANSFORMERS);
+            $convertFromMarkdownString(defaultValue, TRANSFORMERS);
             break;
           default:
-            editor.setEditorState(editor.parseEditorState(_value));
+            editor.setEditorState(editor.parseEditorState(defaultValue));
             break;
         }
       }
@@ -202,7 +199,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     disabled: !disabled,
     newTab: true
   }), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(CheckListPlugin, null), /*#__PURE__*/React.createElement(ControlledStatePlugin, {
-    value: value,
     use: _use,
     onChange: onChange
   }), holder));

package/dist/components/rich-text-editor/types.d.ts

@@ -1,6 +1,6 @@
 import { type Props as ContentEditableProps } from "@lexical/react/LexicalContentEditable";
 import { type EditorThemeClasses as _EditorThemeClasses } from "lexical";
-import type { MenuItem } from "../menu";
+import type { MenuItem } from "musae/types/menu";
 import type { HTMLAttributes, ReactNode } from "react";
 export type Use = "markdown" | "serialized";
 /**
@@ -23,11 +23,6 @@ export type RichTextEditorProps = Pick<HTMLAttributes<HTMLDivElement>, "aria-pla
      * default value
      */
     defaultValue?: string;
-    /**
-     * @description
-     * value
-     */
-    value?: string;
     /**
      * @description
      * use value type

package/dist/components/rich-text-editor/utils/get-element-by-node.cjs

@@ -0,0 +1,8 @@
+function getElementByNode(editor, node) {
+  var _editor$_keyToDOMMap$;
+  if (!node) return null;
+  var key = node.getKey();
+  return (_editor$_keyToDOMMap$ = editor._keyToDOMMap.get(key)) !== null && _editor$_keyToDOMMap$ !== void 0 ? _editor$_keyToDOMMap$ : null;
+}
+
+exports.getElementByNode = getElementByNode;

package/dist/components/ripple/hooks.cjs

@@ -0,0 +1,53 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+function useRipple() {
+  var _useState = React.useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    _ripples = _useState2[0],
+    _setRipples = _useState2[1];
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    unique = _useIdentity2[1];
+  var add = React.useCallback(function (event) {
+    var trigger = event.currentTarget;
+    var size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    var _trigger$getBoundingC = trigger.getBoundingClientRect(),
+      x = _trigger$getBoundingC.x,
+      y = _trigger$getBoundingC.y;
+    _setRipples(function (prev) {
+      return new Map(prev).set(unique(), {
+        size: size,
+        x: event.clientX - x - size / 2,
+        y: event.clientY - y - size / 2
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var clear = React.useCallback(function (key) {
+    _setRipples(function (prev) {
+      var next = new Map(prev);
+      next["delete"](key);
+      return next;
+    });
+  }, []);
+  var ripples = React.useMemo(function () {
+    return Array.from(_ripples.entries()).map(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      return _objectSpread(_objectSpread({}, value), {}, {
+        key: key
+      });
+    });
+  }, [_ripples]);
+  return {
+    ripples: ripples,
+    add: add,
+    clear: clear
+  };
+}
+
+exports.useRipple = useRipple;

package/dist/components/ripple/ripple.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+
+var styles = {
+  ripple: {
+    backgroundColor: "musaex-twfq29",
+    borderRadius: "musaex-z7qqyb",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    transformOrigin: "musaex-1bndym7",
+    pointerEvents: "musaex-47corl",
+    $$css: true
+  },
+  position: function position(props) {
+    return [{
+      position: "musaex-10l6tqk",
+      top: "musaex-rzbxsz",
+      left: "musaex-101gtxs",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      $$css: true
+    }, {
+      "--top": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.y),
+      "--left": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.x)
+    }];
+  },
+  size: function size(props) {
+    return [{
+      width: "musaex-17fnjtu",
+      height: "musaex-1jwls1v",
+      $$css: true
+    }, {
+      "--width": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.size),
+      "--height": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.size)
+    }];
+  }
+};
+var Ripple = function Ripple(_ref) {
+  var _ref$ripples = _ref.ripples,
+    ripples = _ref$ripples === void 0 ? [] : _ref$ripples,
+    onClear = _ref.onClear;
+  return ripples.map(function (ripple) {
+    var styled = stylex.default.props(styles.ripple, styles.position({
+      x: ripple.x,
+      y: ripple.y
+    }), styles.size({
+      size: ripple.size
+    }));
+    return /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
+      key: ripple.key,
+      mode: "popLayout"
+    }, /*#__PURE__*/React.createElement(framerMotion.motion.span, {
+      className: styled.className,
+      style: styled.style,
+      initial: {
+        transform: "scale(0)",
+        opacity: 0.35
+      },
+      animate: {
+        transform: "scale(2)",
+        opacity: 0
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        duration: 0.5
+      },
+      onAnimationComplete: function onAnimationComplete() {
+        onClear(ripple.key);
+      }
+    }));
+  });
+};
+
+exports.default = Ripple;

package/dist/components/ripple/{ripple.js → ripple.mjs}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 
 var styles = {
   ripple: {
@@ -55,7 +55,7 @@ var Ripple = function Ripple(_ref) {
     ripples = _ref$ripples === void 0 ? [] : _ref$ripples,
     onClear = _ref.onClear;
   return ripples.map(function (ripple) {
-    var styled = props(styles.ripple, styles.position({
+    var styled = _stylex.props(styles.ripple, styles.position({
       x: ripple.x,
       y: ripple.y
     }), styles.size({

package/dist/components/select/hooks.cjs

@@ -0,0 +1,145 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var utils = require('./utils.cjs');
+
+var _excluded = ["mode", "close", "isComplex", "readableOptions"],
+  _excluded2 = ["options", "onSearch"];
+/**
+ * @description
+ * use value
+ */
+var useValue = function useValue(_ref) {
+  var mode = _ref.mode,
+    close = _ref.close,
+    isComplex = _ref.isComplex,
+    readableOptions = _ref.readableOptions,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isControlled = !relax.isUndefined(props.value);
+  var _useControlledState = relax.useControlledState(props.value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  /// convert prop value into a map
+  /// in this component, only use map for controlled state
+  /// only effect by value change
+  var readableValues = React.useMemo(function () {
+    return utils.toValues(value).reduce(function (prev, _value) {
+      var _ref2, _value$label;
+      var key = utils.toKey(_value);
+      return prev.set(key, // @ts-ignore
+      (_ref2 = (_value$label = _value.label) !== null && _value$label !== void 0 ? _value$label : readableOptions.get(key)) !== null && _ref2 !== void 0 ? _ref2 : _value.toString());
+    }, new Map());
+  }, [value, readableOptions]);
+  var onChange = relax.useEvent(function (key) {
+    var _readableOptions$get;
+    // convert to complex value
+    var _value = {
+      value: key,
+      label: (_readableOptions$get = readableOptions.get(key)) !== null && _readableOptions$get !== void 0 ? _readableOptions$get : key.toString()
+    };
+    // single mode
+    if (!mode) {
+      close();
+      // same value, do not toggle again
+      if (readableValues.has(key)) return;
+      if (isControlled) {
+        var _props$onChange;
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, isComplex ? _value : key);
+        return;
+      }
+      setValue(_value);
+      return;
+    }
+    // in multiple mode
+    // click menu item twice mean cancel it
+    // else add current values
+    var prev = new Map(readableValues);
+    var isRemoved = prev.has(key) && prev["delete"](key);
+    var next = isRemoved ? prev : prev.set(key, _value.label);
+    if (isControlled) {
+      var _props$onChange2;
+      (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, isComplex ? Array.from(next.entries()).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          value = _ref4[0],
+          label = _ref4[1];
+        return {
+          value: value,
+          label: label
+        };
+      }) : Array.from(next.keys()));
+      return;
+    }
+    setValue(Array.from(next.entries()).map(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        value = _ref6[0],
+        label = _ref6[1];
+      return {
+        value: value,
+        label: label
+      };
+    }));
+  });
+  return {
+    value: value,
+    readableValues: readableValues,
+    onChange: onChange
+  };
+};
+/**
+ * @description
+ * options
+ */
+var useOptions = function useOptions(_ref7) {
+  var options = _ref7.options,
+    onSearch = _ref7.onSearch,
+    props = _objectWithoutProperties(_ref7, _excluded2);
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searched = _useState2[0],
+    setSearched = _useState2[1];
+  var onFilterGetter = relax.useEvent(function () {
+    var _props$onFilter;
+    return (_props$onFilter = props.onFilter) !== null && _props$onFilter !== void 0 ? _props$onFilter : true;
+  });
+  var filter = React.useMemo(function () {
+    if (!searched) return null;
+    var onFilter = onFilterGetter();
+    if (!onFilter) return null;
+    if (relax.isFunction(onFilter)) return function (option) {
+      return onFilter(searched, option);
+    };
+    return function (option) {
+      var _option$label;
+      return !!((_option$label = option.label) !== null && _option$label !== void 0 && _option$label.includes(searched));
+    };
+  }, [searched, onFilterGetter]);
+  /// wrapper search handler, set react state
+  var search = relax.useEvent(function (searched) {
+    setSearched(searched);
+    onSearch === null || onSearch === void 0 || onSearch(searched);
+  });
+  /// reset search value
+  var reset = relax.useEvent(function () {
+    return setSearched("");
+  });
+  var _useMemo = React.useMemo(function () {
+      return utils.readOptions(options, utils.toMenuItems, filter !== null && filter !== void 0 ? filter : function () {
+        return true;
+      });
+    }, [options, filter]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    menuItems = _useMemo2[0],
+    readableOptions = _useMemo2[1];
+  return {
+    menuItems: menuItems,
+    readableOptions: readableOptions,
+    search: search,
+    searched: searched,
+    reset: reset
+  };
+};
+
+exports.useOptions = useOptions;
+exports.useValue = useValue;

package/dist/components/select/hooks.d.ts

@@ -1,6 +1,6 @@
 import { type Key } from "react";
 import type { Mode, ReadableOptions, SelectProps, ValueOrValues } from "./types";
-import type { Option } from "../../types/option";
+import type { Option } from "musae/types/option";
 /**
  * @description
  * use value
@@ -27,7 +27,7 @@ export declare const useOptions: ({ options, onSearch, ...props }: {
     onFilter: SelectProps["onFilter"];
     onSearch: SelectProps["onSearch"];
 }) => {
-    menuItems: import("../menu").MenuItem[];
+    menuItems: import("../../types/menu").MenuItem[];
     readableOptions: ReadableOptions;
     search: (searched: string) => void;
     searched: string;

package/dist/components/select/{hooks.js → hooks.mjs}

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useMemo, useState } from 'react';
 import { isUndefined, useControlledState, useEvent, isFunction } from '@aiszlab/relax';
-import { toValues, toKey, readOptions as _readOptions, toMenuItems } from './utils.js';
+import { toValues, toKey, readOptions as _readOptions, toMenuItems } from './utils.mjs';
 
 var _excluded = ["mode", "close", "isComplex", "readableOptions"],
   _excluded2 = ["options", "onSearch"];