musae 0.2.26 → 0.3.0

package/dist/components/select/select.cjs

@@ -0,0 +1,91 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var picker = require('../picker/picker.cjs');
+var hooks = require('./hooks.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var selector = require('./selector.cjs');
+var selections = require('./selections.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var Select = function Select(_ref) {
+  var mode = _ref.mode,
+    _ref$searchable = _ref.searchable,
+    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
+    onSearch = _ref.onSearch,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    onFilter = _ref.onFilter,
+    _ref$complex = _ref.complex,
+    complex = _ref$complex === void 0 ? false : _ref$complex,
+    value = _ref.value,
+    _onChange = _ref.onChange;
+  var ref = React.useRef(null);
+  var selectorRef = React.useRef(null);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Select);
+  var close = React.useCallback(function () {
+    var _ref$current;
+    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
+  }, []);
+  var _useOptions = hooks.useOptions({
+      options: options,
+      onFilter: onFilter,
+      onSearch: onSearch
+    }),
+    menuItems = _useOptions.menuItems,
+    readableOptions = _useOptions.readableOptions,
+    search = _useOptions.search,
+    searched = _useOptions.searched,
+    reset = _useOptions.reset;
+  var _useValue = hooks.useValue({
+      value: value,
+      readableOptions: readableOptions,
+      mode: mode,
+      close: close,
+      reset: reset,
+      onChange: _onChange,
+      isComplex: complex
+    }),
+    readableValues = _useValue.readableValues,
+    onChange = _useValue.onChange;
+  var click = function click() {
+    var _selectorRef$current;
+    (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
+  };
+  var styled = {
+    picker: {
+      className: "musaex-90xh4w musaex-1a02dak"
+    },
+    pickable: {
+      className: "musaex-1pgy25r"
+    }
+  };
+  return /*#__PURE__*/React.createElement(picker.default, {
+    ref: ref,
+    pickable: /*#__PURE__*/React.createElement(selections.default, {
+      items: menuItems,
+      onSelect: onChange,
+      selectedKeys: Array.from(readableValues.keys())
+    }),
+    className: relax.clsx(classNames[className.SelectClassToken.Select], className$1, styled.picker.className),
+    style: _objectSpread(_objectSpread({}, styled.picker.style), style),
+    onClick: click,
+    pickableClassName: styled.pickable.className,
+    pickableStyle: styled.pickable.style,
+    onPopperExite: reset
+  }, /*#__PURE__*/React.createElement(selector.default, {
+    value: readableValues,
+    mode: mode,
+    searchable: searchable,
+    ref: selectorRef,
+    searched: searched,
+    onSearch: search
+  }));
+};
+
+exports.default = Select;

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

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useRef, useCallback } from 'react';
-import Picker from '../picker/picker.js';
-import { useOptions, useValue } from './hooks.js';
-import { SelectClassToken } from '../../utils/class-name.js';
+import Picker from '../picker/picker.mjs';
+import { useOptions, useValue } from './hooks.mjs';
+import { SelectClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import Selector from './selector.js';
-import Selections from './selections.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Selector from './selector.mjs';
+import Selections from './selections.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Select = function Select(_ref) {
   var mode = _ref.mode,
@@ -85,6 +85,5 @@ var Select = function Select(_ref) {
     onSearch: search
   }));
 };
-var Select$1 = Select;
 
-export { Select$1 as default };
+export { Select as default };

package/dist/components/select/selections.cjs

@@ -0,0 +1,41 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var menu = require('../menu/menu.cjs');
+var context = require('../picker/context.cjs');
+var relax = require('@aiszlab/relax');
+var empty = require('../empty/empty.cjs');
+
+var _excluded = ["onSelect", "selectedKeys"];
+/**
+ * @description
+ * just display the selections for user selectable like options
+ * use `Menu` component for react render
+ *
+ * other way, use `memo` HOC to wrapper
+ * because in options close, we use timeout animations
+ * but in animation time, we do not need to re-render the component, keep options in last state
+ */
+var Selections = function Selections(_ref) {
+  var onSelect = _ref.onSelect,
+    selectedKeys = _ref.selectedKeys,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = React.useContext(context.Context),
+    isOpen = _useContext.isOpen;
+  var items = relax.useMemorable(function () {
+    return props.items;
+  }, [isOpen, props.items], function (prev, next) {
+    return next[0] && next[1] !== prev[1];
+  });
+  if (items.length === 0) {
+    return /*#__PURE__*/React.createElement(empty.default, null);
+  }
+  return /*#__PURE__*/React.createElement(menu.default, {
+    items: items,
+    onClick: onSelect,
+    selectedKeys: selectedKeys
+  });
+};
+
+exports.default = Selections;

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

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useContext } from 'react';
-import Menu from '../menu/menu.js';
-import { Context } from '../picker/context.js';
+import Menu from '../menu/menu.mjs';
+import { Context } from '../picker/context.mjs';
 import { useMemorable } from '@aiszlab/relax';
-import Empty from '../empty/empty.js';
+import Empty from '../empty/empty.mjs';
 
 var _excluded = ["onSelect", "selectedKeys"];
 /**

package/dist/components/select/selector.cjs

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var React = require('react');
+var tag = require('../tag/tag.cjs');
+var input = require('../input/input.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var context = require('../picker/context.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+
+var styles = {
+  input: function input(props) {
+    return [{
+      "::placeholder_color": "musaex-16q0lx9",
+      $$css: true
+    }, {
+      "--163tekb": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var mode = _ref.mode,
+    searchable = _ref.searchable,
+    value = _ref.value,
+    onSearch = _ref.onSearch,
+    searched = _ref.searched;
+  var inputRef = React.useRef(null);
+  var _useContext = React.useContext(context.Context),
+    isFocused = _useContext.isFocused,
+    open = _useContext.open;
+  var theme$1 = hooks.useTheme();
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }
+    };
+  });
+  var search = function search(e) {
+    open === null || open === void 0 || open();
+    // on user search input, trigger the search callback
+    onSearch(e.target.value);
+  };
+  /// multiple mode render
+  if (mode === "multiple") {
+    return [].concat(_toConsumableArray(Array.from(value.entries()).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        label = _ref3[1];
+      return /*#__PURE__*/React.createElement(tag.default, {
+        key: key,
+        size: "small"
+      }, label);
+    })), [searchable && /*#__PURE__*/React.createElement("input", {
+      ref: inputRef
+    })]);
+  }
+  var styled = stylex.default.props(input.styles.input, styles.input({
+    color: isFocused && searchable && theme$1.colors[colors.ColorToken.OnSurface] || void 0
+  }), theme.typography.body.small);
+  // single mode render
+  if (!searchable) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: styled.className,
+      style: styled.style
+    }, Array.from(value.values()).join(","));
+  }
+  return /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    value: searched,
+    placeholder: Array.from(value.values()).join(","),
+    className: styled.className,
+    style: styled.style,
+    onChange: search
+  });
+});
+
+exports.default = Selector;

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

@@ -1,13 +1,13 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'react';
-import Tag from '../tag/tag.js';
-import { styles as styles$1 } from '../input/input.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { Context } from '../picker/context.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { typography } from '../theme/theme.js';
+import Tag from '../tag/tag.mjs';
+import { styles as styles$1 } from '../input/input.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { Context } from '../picker/context.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { typography } from '../theme/theme.mjs';
 
 var styles = {
   input: function input(props) {

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

@@ -1,7 +1,7 @@
 import type { Key } from "react";
-import type { Option } from "../../types/option";
-import type { MenuItem, MenuProps } from "../menu";
-import type { ComponentProps } from "../../types/element";
+import type { Option } from "musae/types/option";
+import type { MenuItem, MenuProps } from "musae/types/menu";
+import type { ComponentProps } from "musae/types/element";
 import type { RequiredIn } from "@aiszlab/relax/types";
 export type Mode = "multiple";
 export type Value = Key | Pick<Option, "value" | "label">;

package/dist/components/select/utils.cjs

@@ -0,0 +1,67 @@
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _typeof = require('@babel/runtime/helpers/typeof');
+var relax = require('@aiszlab/relax');
+
+/**
+ * @description
+ * convert to value array
+ */
+var toValues = function toValues(valueOrValues) {
+  // empty
+  if (relax.isVoid(valueOrValues)) return [];
+  // already array
+  if (relax.isArray(valueOrValues)) return valueOrValues;
+  // convert to array
+  return [valueOrValues];
+};
+/**
+ * @description
+ * convert to key
+ */
+var toKey = function toKey(value) {
+  if (_typeof(value) === "object") {
+    return value.value;
+  }
+  return value;
+};
+/**
+ * @description
+ * deep read options
+ */
+var _readOptions = function readOptions(options, toMenuItem, filter) {
+  return options.reduce(function (prev, option) {
+    // first step, check current option is valid by filter
+    if (!filter(option)) {
+      return prev;
+    }
+    // has child, read deeply
+    var _ref = option.children ? _readOptions(option.children, toMenuItem, filter) : [],
+      _ref2 = _slicedToArray(_ref, 2),
+      _additions = _ref2[0],
+      _readableOptions = _ref2[1];
+    // convert with children
+    prev[0].push(_objectSpread(_objectSpread({}, toMenuItem(option)), {}, {
+      children: _additions
+    }));
+    if (_readableOptions) {
+      prev[1] = new Map([].concat(_toConsumableArray(prev[1].entries()), _toConsumableArray(_readableOptions.entries())));
+    } else {
+      var _option$label;
+      prev[1].set(option.value, (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value.toString());
+    }
+    return prev;
+  }, [[], new Map()]);
+};
+var toMenuItems = function toMenuItems(option) {
+  return {
+    key: option.value,
+    label: option.label
+  };
+};
+
+exports.readOptions = _readOptions;
+exports.toKey = toKey;
+exports.toMenuItems = toMenuItems;
+exports.toValues = toValues;

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

@@ -1,6 +1,6 @@
 import type { Filter, ReadableOptions, ToMenuItem, Value, ValueOrValues } from "./types";
-import type { Option } from "../../types/option";
-import type { MenuItem } from "../menu";
+import type { Option } from "musae/types/option";
+import type { MenuItem } from "musae/types/menu";
 /**
  * @description
  * convert to value array

package/dist/components/skeleton/skeleton.cjs

@@ -0,0 +1,101 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  title: {
+    width: "musaex-1fvqbsf",
+    height: "musaex-1bti5vo",
+    borderRadius: "musaex-ok3b7d",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  button: {
+    width: "musaex-1lwsb27",
+    height: "musaex-1bti5vo",
+    borderRadius: "musaex-z7qqyb",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  avatar: {
+    width: "musaex-rdd3y",
+    height: "musaex-1bti5vo",
+    borderRadius: "musaex-z7qqyb",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  skeleton: {
+    background: "musaex-1csrv2e",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    $$css: true
+  },
+  animation: {
+    background: "musaex-1jvh8g2",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: "musaex-1db4oza",
+    animationName: "musaex-pxjozy",
+    animationDuration: "musaex-mg6eyc",
+    animationTimingFunction: "musaex-1debuo4",
+    animationIterationCount: "musaex-a4qsjk",
+    $$css: true
+  }
+};
+var Skeleton = function Skeleton(_ref) {
+  var _ref$animation = _ref.animation,
+    animation = _ref$animation === void 0 ? false : _ref$animation,
+    variant = _ref.variant,
+    className$1 = _ref.className,
+    style = _ref.style;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Skeleton);
+  var styled = stylex.default.props(!!variant && styles[variant], animation && styles.animation);
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.SkeletonClassToken.Skeleton], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  });
+};
+
+exports.default = Skeleton;

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

@@ -1,10 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _stylex 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';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { SkeletonClassToken } from '../../utils/class-name.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { SkeletonClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   title: {
@@ -95,6 +95,5 @@ var Skeleton = function Skeleton(_ref) {
     style: _objectSpread(_objectSpread({}, styled.style), style)
   });
 };
-var Skeleton$1 = Skeleton;
 
-export { Skeleton$1 as default };
+export { Skeleton as default };

package/dist/components/skeleton/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 type Variant = "button" | "avatar" | "title";
 /**
  * @description

package/dist/components/space/space.cjs

@@ -0,0 +1,61 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useGutters = require('../../hooks/use-gutters.cjs');
+var relax = require('@aiszlab/relax');
+
+var styles = {
+  space: function space(props) {
+    return [{
+      display: "musaex-78zum5",
+      columnGap: "musaex-4rvf3u",
+      rowGap: "musaex-m8a6f2",
+      $$css: true
+    }, {
+      "--columnGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.columnGap),
+      "--rowGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.rowGap)
+    }];
+  },
+  horizontal: {
+    flexDirection: "musaex-1q0g3np",
+    alignItems: "musaex-6s0dn4",
+    $$css: true
+  },
+  vertical: {
+    flexDirection: "musaex-dt5ytf",
+    justifyContent: "musaex-l56j7k",
+    $$css: true
+  }
+};
+var Space = function Space(_ref) {
+  var _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 4 : _ref$gutter,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
+  var _useGutters = useGutters.useGutters({
+      gutter: gutter
+    }),
+    _useGutters2 = _slicedToArray(_useGutters, 2),
+    columnGap = _useGutters2[0],
+    rowGap = _useGutters2[1];
+  var styled = stylex.default.props(styles.space({
+    columnGap: columnGap,
+    rowGap: rowGap
+  }), styles[orientation]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(className, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children);
+};
+
+exports.default = Space;

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

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useGutters } from '../../hooks/use-gutters.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useGutters } from '../../hooks/use-gutters.mjs';
 import { clsx } from '@aiszlab/relax';
 
 var styles = {
@@ -46,7 +46,7 @@ var Space = function Space(_ref) {
     _useGutters2 = _slicedToArray(_useGutters, 2),
     columnGap = _useGutters2[0],
     rowGap = _useGutters2[1];
-  var styled = props(styles.space({
+  var styled = _stylex.props(styles.space({
     columnGap: columnGap,
     rowGap: rowGap
   }), styles[orientation]);
@@ -55,6 +55,5 @@ var Space = function Space(_ref) {
     style: _objectSpread(_objectSpread({}, styled.style), style)
   }, children);
 };
-var Space$1 = Space;
 
-export { Space$1 as default };
+export { Space as default };

package/dist/components/space/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { Gutter } from "../../hooks/use-gutters";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 type Orientation = "horizontal" | "vertical";
 /**
  * @description

package/dist/components/steps/context.cjs

@@ -0,0 +1,9 @@
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext({
+  type: "horizontal",
+  max: 0,
+  value: 0
+});
+
+exports.Context = Context;