musae 1.0.27-beta.26 → 1.0.27-beta.28

package/dist/components/input/input.cjs

@@ -7,16 +7,15 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var hooks$1 = require('./hooks.cjs');
+var hooks = require('./hooks.cjs');
 var relax = require('@aiszlab/relax');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.18.3/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
-var hooks = require('../theme/hooks.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
-var color = require('@aiszlab/fuzzy/color');
 var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
 var theme = require('../theme/theme.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
 var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing"];
 var styles = {
@@ -89,7 +88,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = React.useRef(null);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var theme$1 = hooks.useTheme();
+  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.thin]]);
   // controlled value
   var _useControlledState = relax.useControlledState(valueInProps, {
       defaultState: ""
@@ -113,7 +112,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   });
   // input events
-  var inputEvents = hooks$1.useInputEvents({
+  var inputEvents = hooks.useInputEvents({
     setValue: _setValue,
     onBlur: onBlur,
     onChange: onChange,
@@ -121,7 +120,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus: onFocus
   });
   // inputor events
-  var inputorEvents = hooks$1.useInputorEvents({
+  var inputorEvents = hooks.useInputorEvents({
     inputRef: inputRef
   });
   // is focused
@@ -140,13 +139,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/React.createElement("span", _objectSpread({
     className: className.stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className$1, styled.inputor.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.inputor.style), style), {}, {
-      "--color-outline": theme$1.colors.outline,
-      "--color-primary": theme$1.colors.primary,
-      "--color-error": theme$1.colors.error,
-      "--color-on-surface-opacity-08": color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thin).toString(),
-      "--color-on-surface-opacity-38": color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thickest).toString()
-    }),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.inputor.style), style), _themeColorVars),
     onClick: inputorEvents.click
   }, !disabled && {
     tabIndex: -1

package/dist/components/input/input.mjs

@@ -7,12 +7,11 @@ import { useInputEvents, useInputorEvents } from './hooks.mjs';
 import { useControlledState, useFocus } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.18.3/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
-import { useTheme } from '../theme/hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { hexToRgba } from '@aiszlab/fuzzy/color';
 import { stringify } from '@aiszlab/relax/class-name';
 import { CLASS_NAMES } from './context.mjs';
 import { $body } from '../theme/theme.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
 var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing"];
 var styles = {
@@ -85,7 +84,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
   var classNames = useClassNames(CLASS_NAMES);
-  var theme = useTheme();
+  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.thin]]);
   // controlled value
   var _useControlledState = useControlledState(valueInProps, {
       defaultState: ""
@@ -136,13 +135,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/React.createElement("span", _objectSpread({
     className: stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className, styled.inputor.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.inputor.style), style), {}, {
-      "--color-outline": theme.colors.outline,
-      "--color-primary": theme.colors.primary,
-      "--color-error": theme.colors.error,
-      "--color-on-surface-opacity-08": hexToRgba(theme.colors["on-surface"], OPACITY.thin).toString(),
-      "--color-on-surface-opacity-38": hexToRgba(theme.colors["on-surface"], OPACITY.thickest).toString()
-    }),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.inputor.style), style), _themeColorVars),
     onClick: inputorEvents.click
   }, !disabled && {
     tabIndex: -1

package/dist/components/picker/picker.cjs

@@ -16,6 +16,7 @@ var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var context$1 = require('../dialog/context.cjs');
 var stackLevel_context = require('../../contexts/stack-level.context.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
 
 var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -36,7 +37,9 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _onBlur = _ref.onBlur,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-    onClear = _ref.onClear;
+    onClear = _ref.onClear,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _trigger = React.useRef(null);
   var _useBoolean = relax.useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
@@ -47,7 +50,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     open = _useBoolean2$.turnOn;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var pickableRef = React.useRef(null);
-  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error"]);
+  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.thin]]);
   var _useContext = React.useContext(context$1.DialogContext),
     container = _useContext.container;
   var _useStackLevelContext = stackLevel_context.useStackLevelContextContext(),
@@ -64,6 +67,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   });
   var click = relax.useEvent(function (event) {
+    if (disabled) return;
     event.stopPropagation();
     onClick === null || onClick === void 0 || onClick(event);
     toggle();
@@ -87,7 +91,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClear === null || onClear === void 0 || onClear();
   });
   var styled = {
-    picker: stylex.props(theme.$body.medium, input.styles.inputor, invalid && input.styles.invalid),
+    picker: stylex.props(theme.$body.medium, input.styles.inputor, invalid && input.styles.invalid, disabled && input.styles.disabled),
     pickable: {
       className: "musaex-12ttxug"
     }
@@ -98,13 +102,15 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isFocused: isFocused,
       isOpen: isOpen
     }
-  }, /*#__PURE__*/React.createElement("span", _objectSpread({
+  }, /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
     className: className.stringify(classNames.picker, isFocused && classNames.focused, className$1, styled.picker.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.picker.style), style), _themeColorVars),
-    ref: _trigger,
-    tabIndex: -1,
+    ref: _trigger
+  }, !disabled && {
+    tabIndex: -1
+  }), {}, {
     onClick: click
-  }, focusProps), children, !!onClear && /*#__PURE__*/React.createElement(close.default, {
+  }, focusProps), children, !!onClear && !disabled && /*#__PURE__*/React.createElement(close.default, {
     onClick: clear
   })), /*#__PURE__*/React.createElement(popper.default, {
     trigger: function trigger() {

package/dist/components/picker/picker.mjs

@@ -12,6 +12,7 @@ import { $body } from '../theme/theme.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import { DialogContext } from '../dialog/context.mjs';
 import { useStackLevelContextContext } from '../../contexts/stack-level.context.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
 import Close from '../icon/icons/navigation/close.mjs';
 
 var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -32,7 +33,9 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _onBlur = _ref.onBlur,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-    onClear = _ref.onClear;
+    onClear = _ref.onClear,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _trigger = useRef(null);
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
@@ -43,7 +46,7 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open = _useBoolean2$.turnOn;
   var classNames = useClassNames(CLASS_NAMES);
   var pickableRef = useRef(null);
-  var _themeColorVars = useThemeColorVars(["primary", "outline", "error"]);
+  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.thin]]);
   var _useContext = useContext(DialogContext),
     container = _useContext.container;
   var _useStackLevelContext = useStackLevelContextContext(),
@@ -60,6 +63,7 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   });
   var click = useEvent(function (event) {
+    if (disabled) return;
     event.stopPropagation();
     onClick === null || onClick === void 0 || onClick(event);
     toggle();
@@ -83,7 +87,7 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClear === null || onClear === void 0 || onClear();
   });
   var styled = {
-    picker: props($body.medium, styles.inputor, invalid && styles.invalid),
+    picker: props($body.medium, styles.inputor, invalid && styles.invalid, disabled && styles.disabled),
     pickable: {
       className: "musaex-12ttxug"
     }
@@ -94,13 +98,15 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isFocused: isFocused,
       isOpen: isOpen
     }
-  }, /*#__PURE__*/React.createElement("span", _objectSpread({
+  }, /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
     className: stringify(classNames.picker, isFocused && classNames.focused, className, styled.picker.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.picker.style), style), _themeColorVars),
-    ref: _trigger,
-    tabIndex: -1,
+    ref: _trigger
+  }, !disabled && {
+    tabIndex: -1
+  }), {}, {
     onClick: click
-  }, focusProps), children, !!onClear && /*#__PURE__*/React.createElement(Close, {
+  }, focusProps), children, !!onClear && !disabled && /*#__PURE__*/React.createElement(Close, {
     onClick: clear
   })), /*#__PURE__*/React.createElement(Popper, {
     trigger: function trigger() {

package/dist/components/select/select.cjs

@@ -32,7 +32,9 @@ var Select = function Select(_ref) {
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     placeholder = _ref.placeholder,
-    onClear = _ref.onClear;
+    onClear = _ref.onClear,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var ref = React.useRef(null);
   var selectorRef = React.useRef(null);
   var close = React.useCallback(function () {
@@ -76,6 +78,7 @@ var Select = function Select(_ref) {
   });
   var click = function click() {
     var _selectorRef$current;
+    if (disabled) return;
     (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
   };
   var styled = {
@@ -100,6 +103,7 @@ var Select = function Select(_ref) {
     pickableStyle: styled.pickable.style,
     onPopperExite: clearKeyword,
     invalid: invalid,
+    disabled: disabled,
     onClear: onClear ? clear : void 0
   }, !searchable && {
     onBlur: onBlur
@@ -114,7 +118,8 @@ var Select = function Select(_ref) {
   }, searchable && {
     onBlur: onBlur
   }), {}, {
-    placeholder: placeholder
+    placeholder: placeholder,
+    disabled: disabled
   })));
 };
 

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps, ValueOrValues } from "../../types/select";
-declare const Select: <T extends ValueOrValues = ValueOrValues>({ mode, searchable: _searchable, onSearch, className, style, options, onFilter, complex, value, onChange, onBlur, invalid, placeholder, onClear, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends ValueOrValues = ValueOrValues>({ mode, searchable: _searchable, onSearch, className, style, options, onFilter, complex, value, onChange, onBlur, invalid, placeholder, onClear, disabled, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/dist/components/select/select.mjs

@@ -28,7 +28,9 @@ var Select = function Select(_ref) {
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     placeholder = _ref.placeholder,
-    onClear = _ref.onClear;
+    onClear = _ref.onClear,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var ref = useRef(null);
   var selectorRef = useRef(null);
   var close = useCallback(function () {
@@ -72,6 +74,7 @@ var Select = function Select(_ref) {
   });
   var click = function click() {
     var _selectorRef$current;
+    if (disabled) return;
     (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
   };
   var styled = {
@@ -96,6 +99,7 @@ var Select = function Select(_ref) {
     pickableStyle: styled.pickable.style,
     onPopperExite: clearKeyword,
     invalid: invalid,
+    disabled: disabled,
     onClear: onClear ? clear : void 0
   }, !searchable && {
     onBlur: onBlur
@@ -110,7 +114,8 @@ var Select = function Select(_ref) {
   }, searchable && {
     onBlur: onBlur
   }), {}, {
-    placeholder: placeholder
+    placeholder: placeholder,
+    disabled: disabled
   })));
 };
 

package/dist/components/select/selector.cjs

@@ -34,7 +34,9 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     keyword = _ref.keyword,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    placeholder = _ref.placeholder;
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var inputRef = React.useRef(null);
   var _useContext = React.useContext(context.Context),
     isFocused = _useContext.isFocused,
@@ -68,7 +70,7 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/React.createElement(tag.default, {
         key: key,
         size: "small",
-        closable: true,
+        closable: !disabled,
         onClose: function onClose(event) {
           // stop event: in `Select`, it will trigger and open the popup
           event.stopPropagation();
@@ -82,7 +84,8 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
       onChange: search,
       onBlur: onBlur,
-      placeholder: placeholder
+      placeholder: placeholder,
+      disabled: disabled
     })));
   }
   // single mode render
@@ -102,7 +105,8 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: styled.input.className,
     style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
     onChange: search,
-    onBlur: onBlur
+    onBlur: onBlur,
+    disabled: disabled
   });
 });
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { SelectorRef } from "../../types/select";
-declare const Selector: React.ForwardRefExoticComponent<Pick<import("@aiszlab/relax/types").RequiredIn<import("../../types/select").SelectProps<import("../../types/select").ValueOrValues>, "searchable" | "onSearch">, "onBlur" | "mode" | "placeholder" | "searchable" | "onSearch"> & {
+declare const Selector: React.ForwardRefExoticComponent<Pick<import("@aiszlab/relax/types").RequiredIn<import("../../types/select").SelectProps<import("../../types/select").ValueOrValues>, "searchable" | "onSearch">, "onBlur" | "mode" | "disabled" | "placeholder" | "searchable" | "onSearch"> & {
     value: Map<React.Key, React.ReactNode>;
     keyword: string;
     onChange: (key: React.Key) => void;

package/dist/components/select/selector.mjs

@@ -30,7 +30,9 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     keyword = _ref.keyword,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    placeholder = _ref.placeholder;
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var inputRef = useRef(null);
   var _useContext = useContext(Context),
     isFocused = _useContext.isFocused,
@@ -64,7 +66,7 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return /*#__PURE__*/React.createElement(Tag, {
         key: key,
         size: "small",
-        closable: true,
+        closable: !disabled,
         onClose: function onClose(event) {
           // stop event: in `Select`, it will trigger and open the popup
           event.stopPropagation();
@@ -78,7 +80,8 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
       style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
       onChange: search,
       onBlur: onBlur,
-      placeholder: placeholder
+      placeholder: placeholder,
+      disabled: disabled
     })));
   }
   // single mode render
@@ -98,7 +101,8 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: styled.input.className,
     style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
     onChange: search,
-    onBlur: onBlur
+    onBlur: onBlur,
+    disabled: disabled
   });
 });
 

package/dist/types/picker.d.ts

@@ -68,6 +68,12 @@ export interface PickerProps extends ComponentProps, Pick<HTMLAttributes<HTMLSpa
      * @default void 0
      */
     onClear?: () => void;
+    /**
+     * @description
+     * disabled state of the picker
+     * @default false
+     */
+    disabled?: boolean;
 }
 /**
  * @description

package/dist/types/select.d.ts

@@ -80,6 +80,12 @@ export type SelectProps<T extends ValueOrValues = ValueOrValues> = ComponentProp
      * @default void 0
      */
     onClear?: () => void;
+    /**
+     * @description
+     * disabled state of the select component
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * @description
@@ -91,7 +97,7 @@ export type Filter = (option: Option) => boolean;
  * @description
  * selected props
  */
-export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearch">, "searchable" | "mode" | "onSearch" | "onBlur" | "placeholder"> & {
+export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearch">, "searchable" | "mode" | "onSearch" | "onBlur" | "placeholder" | "disabled"> & {
     /**
      * @description
      * value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.27-beta.26",
+  "version": "1.0.27-beta.28",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@aiszlab/fuzzy": "^2.1.1",
-    "@aiszlab/relax": "2.1.2",
+    "@aiszlab/relax": "2.1.3-beta.3",
     "@babel/runtime": "^7.28.6",
     "@floating-ui/dom": "^1.7.5",
     "@lexical/code": "^0.40.0",
@@ -132,7 +132,6 @@
     "test:coverage": "jest --coverage",
     "dev": "rollup -c -w --environment NODE_ENV:development",
     "build": "z rm dist && rollup -c --environment NODE_ENV:production",
-    "preinstall": "npx @aiszlab/watchdog preinstall",
     "authors": "zx scripts/contributors.mjs",
     "changesets": "z cs",
     "version": "z cs version",