musae 0.2.26 → 0.3.1

package/dist/components/otp-input/{otp-input.js → otp-input.mjs}

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useState } from 'react';
-import { useValue, useInputEvents } from './hooks.js';
-import Input from '../input/input.js';
+import { useValue, useInputEvents } from './hooks.mjs';
+import Input from '../input/input.mjs';
 import { useEvent, clamp } from '@aiszlab/relax';
 
 var OtpInput = function OtpInput(_ref) {
@@ -83,6 +83,5 @@ var OtpInput = function OtpInput(_ref) {
     });
   }));
 };
-var OtpInput$1 = OtpInput;
 
-export { OtpInput$1 as default };
+export { OtpInput as default };

package/dist/components/pagination/hooks.cjs

@@ -0,0 +1,70 @@
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+var types = require('./types.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * use pagination
+ */
+var usePagiantion = function usePagiantion(_ref) {
+  var total = _ref.total,
+    siblings = _ref.siblings,
+    boundaries = _ref.boundaries,
+    _pageSize = _ref.pageSize;
+  var _useControlledState = relax.useControlledState(_pageSize, {
+      defaultState: 10
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    pageSize = _useControlledState2[0],
+    setPageSize = _useControlledState2[1];
+  var pages = React.useMemo(function () {
+    return Math.ceil(total / Math.max(1, pageSize));
+  }, [total, pageSize]);
+  var _useCounter = relax.useCounter(1, {
+      min: 1,
+      max: pages
+    }),
+    _useCounter2 = _slicedToArray(_useCounter, 2),
+    page = _useCounter2[0],
+    _useCounter2$ = _useCounter2[1],
+    add = _useCounter2$.add,
+    subtract = _useCounter2$.subtract,
+    setCount = _useCounter2$.setCount;
+  var paginationItems = React.useMemo(function () {
+    // max renderable pages
+    var renderable = siblings * 2 + 3 + boundaries * 2;
+    if (renderable > pages) {
+      return [types.PaginationItemType.Prev].concat(_toConsumableArray(relax.range(1, pages)), [types.PaginationItemType.Next]);
+    }
+    var focusedAt = relax.clamp(page, boundaries + 3, pages - (boundaries + 2));
+    var from = Math.max(focusedAt - siblings, boundaries);
+    var to = Math.min(focusedAt + siblings, pages - (boundaries - 1));
+    var hasPrevMore = from > boundaries + 2;
+    var hasNextMore = to < pages - (boundaries + 1);
+    return [types.PaginationItemType.Prev].concat(_toConsumableArray(relax.range(1, boundaries)), _toConsumableArray(hasPrevMore ? [types.PaginationItemType.MorePrev] : [boundaries + 1]), _toConsumableArray(relax.range(from, to)), _toConsumableArray(hasNextMore ? [types.PaginationItemType.MoreNext] : [pages - boundaries]), _toConsumableArray(relax.range(pages - (boundaries - 1), pages)), [types.PaginationItemType.Next]);
+  }, [boundaries, page, pages, siblings]);
+  // whether prev button is usable
+  var hasPrev = page > 1;
+  // whether next button is usable
+  var hasNext = page < pages;
+  var onPageSizeChange = function onPageSizeChange(pageSize) {
+    setPageSize(pageSize);
+  };
+  return {
+    paginationItems: paginationItems,
+    add: add,
+    subtract: subtract,
+    changePage: setCount,
+    page: page,
+    hasPrev: hasPrev,
+    hasNext: hasNext,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange
+  };
+};
+
+exports.usePagiantion = usePagiantion;

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

@@ -2,7 +2,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useControlledState, useCounter, range, clamp } from '@aiszlab/relax';
 import { useMemo } from 'react';
-import { PaginationItemType } from './types.js';
+import { PaginationItemType } from './types.mjs';
 
 /**
  * @author murukal

package/dist/components/pagination/item.cjs

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var types = require('./types.cjs');
+var button = require('../button/button.cjs');
+var keyboardArrowLeft = require('../icon/icons/hardware/keyboard-arrow-left.cjs');
+var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.cjs');
+var moreHoriz = require('../icon/icons/navigation/more-horiz.cjs');
+var keyboardDoubleArrowLeft = require('../icon/icons/hardware/keyboard-double-arrow-left.cjs');
+var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-arrow-right.cjs');
+
+var Item = function Item(_ref) {
+  var value = _ref.value,
+    onPageChange = _ref.onPageChange,
+    add = _ref.add,
+    subtract = _ref.subtract,
+    checked = _ref.checked,
+    hasNext = _ref.hasNext,
+    hasPrev = _ref.hasPrev;
+  if (value === types.PaginationItemType.Prev) {
+    return /*#__PURE__*/React.createElement(button.Button, {
+      onClick: function onClick() {
+        return subtract();
+      },
+      shape: "circular",
+      variant: "text",
+      color: "secondary",
+      disabled: !hasPrev
+    }, /*#__PURE__*/React.createElement(keyboardArrowLeft.default, null));
+  }
+  if (value === types.PaginationItemType.Next) {
+    return /*#__PURE__*/React.createElement(button.Button, {
+      onClick: function onClick() {
+        return add();
+      },
+      shape: "circular",
+      variant: "text",
+      color: "secondary",
+      disabled: !hasNext
+    }, /*#__PURE__*/React.createElement(keyboardArrowRight.default, null));
+  }
+  if (value === types.PaginationItemType.MorePrev || value === types.PaginationItemType.MoreNext) {
+    var styled = {
+      more: {
+        className: "musaex-1aldg33 musaex-1oew0n0"
+      }
+    };
+    var isNegative = value === types.PaginationItemType.MorePrev;
+    return /*#__PURE__*/React.createElement(button.Button, {
+      shape: "circular",
+      variant: "text",
+      color: "secondary",
+      className: styled.more.className,
+      style: styled.more.style,
+      onClick: function onClick() {
+        isNegative ? subtract(5) : add(5);
+      }
+    }, /*#__PURE__*/React.createElement(moreHoriz.default, {
+      role: "separator"
+    }), /*#__PURE__*/React.createElement(isNegative ? keyboardDoubleArrowLeft.default : keyboardDoubleArrowRight.default, {
+      role: "button"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(button.Button, {
+    shape: "circular",
+    color: checked ? "primary" : "secondary",
+    variant: checked ? "filled" : "text",
+    onClick: function onClick() {
+      onPageChange(value);
+    }
+  }, value);
+};
+
+exports.default = Item;

package/dist/components/pagination/{item.js → item.mjs}

@@ -1,11 +1,11 @@
 import React, { createElement } from 'react';
-import { PaginationItemType } from './types.js';
-import Button from '../button/button.js';
-import MoreHoriz from '../icon/icons/navigation/more-horiz.js';
-import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.js';
-import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
-import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.js';
-import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.js';
+import { PaginationItemType } from './types.mjs';
+import { Button } from '../button/button.mjs';
+import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.mjs';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.mjs';
+import MoreHoriz from '../icon/icons/navigation/more-horiz.mjs';
+import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.mjs';
+import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.mjs';
 
 var Item = function Item(_ref) {
   var value = _ref.value,

package/dist/components/pagination/pagination.cjs

@@ -0,0 +1,90 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var item = require('./item.cjs');
+var select = require('../select/select.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var relax = require('@aiszlab/relax');
+
+var Pagination = function Pagination(_ref) {
+  var _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
+    _ref$siblings = _ref.siblings,
+    siblings = _ref$siblings === void 0 ? 1 : _ref$siblings,
+    _ref$boundaries = _ref.boundaries,
+    boundaries = _ref$boundaries === void 0 ? 1 : _ref$boundaries,
+    _pageSize = _ref.pageSize,
+    _ref$pageSizes = _ref.pageSizes,
+    pageSizes = _ref$pageSizes === void 0 ? [10, 20, 50, 100] : _ref$pageSizes;
+  var _usePagiantion = hooks.usePagiantion({
+      boundaries: boundaries,
+      pageSize: _pageSize,
+      siblings: siblings,
+      total: total
+    }),
+    paginationItems = _usePagiantion.paginationItems,
+    add = _usePagiantion.add,
+    subtract = _usePagiantion.subtract,
+    changePage = _usePagiantion.changePage,
+    page = _usePagiantion.page,
+    hasNext = _usePagiantion.hasNext,
+    hasPrev = _usePagiantion.hasPrev,
+    pageSize = _usePagiantion.pageSize,
+    onPageSizeChange = _usePagiantion.onPageSizeChange;
+  var styled = {
+    pagination: {
+      className: "musaex-78zum5 musaex-13bbkc7"
+    },
+    sizer: {
+      className: "musaex-78zum5 musaex-6s0dn4"
+    }
+  };
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Pagination);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Pagination),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var sizeOptions = React.useMemo(function () {
+    return Array.from(new Set(pageSizes)).map(function (size) {
+      return {
+        value: size,
+        label: relax.toFunction(locale.size)(size)
+      };
+    });
+  }, [locale, pageSizes]);
+  return /*#__PURE__*/React.createElement("nav", {
+    "aria-label": "pagination navigation",
+    className: classNames[className.PaginationClassToken.Pagination]
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styled.pagination.className,
+    style: styled.pagination.style
+  }, paginationItems.map(function (item$1) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: item$1
+    }, /*#__PURE__*/React.createElement(item.default, {
+      value: item$1,
+      add: add,
+      subtract: subtract,
+      onPageChange: changePage,
+      checked: page === item$1,
+      hasNext: hasNext,
+      hasPrev: hasPrev
+    }));
+  }), /*#__PURE__*/React.createElement("li", {
+    className: relax.clsx(classNames[className.PaginationClassToken.SizeSelector], styled.sizer.className),
+    style: styled.sizer.style
+  }, /*#__PURE__*/React.createElement(select.default, {
+    options: sizeOptions,
+    value: pageSize,
+    style: {
+      minWidth: 0
+    },
+    onChange: onPageSizeChange
+  }))));
+};
+
+exports.default = Pagination;

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

@@ -1,12 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import { usePagiantion } from './hooks.js';
-import Item from './item.js';
-import Select from '../select/select.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { PaginationClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import { useLocale } from '../../locale/use-locale.js';
+import { usePagiantion } from './hooks.mjs';
+import Item from './item.mjs';
+import Select from '../select/select.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { PaginationClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
 import { toFunction, clsx } from '@aiszlab/relax';
 
 var Pagination = function Pagination(_ref) {
@@ -84,6 +84,5 @@ var Pagination = function Pagination(_ref) {
     onChange: onPageSizeChange
   }))));
 };
-var Pagination$1 = Pagination;
 
-export { Pagination$1 as default };
+export { Pagination as default };

package/dist/components/pagination/types.cjs

@@ -0,0 +1,11 @@
+/**
+ * @description
+ * pagiantion item type
+ */
+exports.PaginationItemType = void 0;
+(function (PaginationItemType) {
+  PaginationItemType["Prev"] = "prev";
+  PaginationItemType["Next"] = "next";
+  PaginationItemType["MorePrev"] = "more-prev";
+  PaginationItemType["MoreNext"] = "more-next";
+})(exports.PaginationItemType || (exports.PaginationItemType = {}));

package/dist/components/picker/context.cjs

@@ -0,0 +1,9 @@
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext({
+  open: null,
+  isFocused: false,
+  isOpen: false
+});
+
+exports.Context = Context;

package/dist/components/picker/context.d.ts

@@ -1,2 +1,2 @@
-import { ContextValue } from "./types";
+import { ContextValue } from "../../types/picker";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/picker/index.d.ts

@@ -1,4 +1,3 @@
 import Picker from "./picker";
-import type { PickerRef, PickerProps } from "./types";
 import { Context } from "./context";
-export { Picker, Context, type PickerRef, type PickerProps };
+export { Picker, Context };

package/dist/components/picker/picker.cjs

@@ -0,0 +1,123 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var popper = require('../popper/popper.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+var input = require('../input/input.cjs');
+var context = require('./context.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  pickable: function pickable(props) {
+    return [{
+      minWidth: "musaex-13to73x",
+      $$css: true
+    }, {
+      "--minWidth": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.minWidth)
+    }];
+  }
+};
+var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var pickable = _ref.pickable,
+    className$1 = _ref.className,
+    _ref$popupWidth = _ref.popupWidth,
+    popupWidth = _ref$popupWidth === void 0 ? "match" : _ref$popupWidth,
+    style = _ref.style,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    pickableClassName = _ref.pickableClassName,
+    pickableStyle = _ref.pickableStyle,
+    onPopperEntered = _ref.onPopperEntered,
+    onPopperExited = _ref.onPopperExited,
+    onPopperExite = _ref.onPopperExite,
+    _onBlur = _ref.onBlur;
+  var trigger = React.useRef(null);
+  var _useBoolean = relax.useBoolean(),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isOpen = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    close = _useBoolean2$.turnOff,
+    toggle = _useBoolean2$.toggle,
+    open = _useBoolean2$.turnOn;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Picker);
+  var theme$1 = hooks.useTheme();
+  var pickableRef = React.useRef(null);
+  var getDropdownWidth = React.useCallback(function () {
+    if (!popupWidth) return void 0;
+    if (!trigger.current) return void 0;
+    return Math.max(trigger.current.getBoundingClientRect().width, popupWidth === "match" ? 0 : popupWidth);
+  }, [popupWidth]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      close: close
+    };
+  });
+  var click = relax.useEvent(function (event) {
+    event.stopPropagation();
+    onClick === null || onClick === void 0 || onClick(event);
+    toggle();
+  });
+  var onBlur = relax.useEvent(function (e) {
+    e.stopPropagation();
+    _onBlur === null || _onBlur === void 0 || _onBlur(e);
+    close();
+  });
+  var _useFocus = relax.useFocus({
+      onBlur: onBlur
+    }),
+    _useFocus2 = _slicedToArray(_useFocus, 2),
+    isFocused = _useFocus2[0],
+    focusProps = _useFocus2[1];
+  var onDropdownClick = React.useCallback(function (e) {
+    return e.preventDefault();
+  }, []);
+  var styled = {
+    picker: stylex.default.props(theme.typography.body.medium, input.styles.wrapper({
+      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+    }), isFocused && input.styles.focused({
+      outlineColor: theme$1.colors[colors.ColorToken.Primary]
+    })),
+    pickable: stylex.default.props(styles.pickable({
+      minWidth: getDropdownWidth()
+    }))
+  };
+  return /*#__PURE__*/React.createElement(context.Context.Provider, {
+    value: {
+      open: open,
+      isFocused: isFocused,
+      isOpen: isOpen
+    }
+  }, /*#__PURE__*/React.createElement("span", _objectSpread({
+    className: relax.clsx(classNames[className.PickerClassToken.Picker], _defineProperty({}, classNames[className.PickerClassToken.Focused], isFocused), className$1, styled.picker.className),
+    style: _objectSpread(_objectSpread({}, styled.picker.style), style),
+    ref: trigger,
+    tabIndex: -1,
+    onClick: click
+  }, focusProps), children), /*#__PURE__*/React.createElement(popper.default, {
+    trigger: trigger.current,
+    open: isOpen,
+    className: classNames[className.PickerClassToken.Dropdown],
+    onEntered: onPopperEntered,
+    onExit: onPopperExite,
+    onExited: onPopperExited,
+    // click on popper, keep select focused
+    onMouseDown: onDropdownClick
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: pickableRef,
+    className: relax.clsx(pickableClassName, styled.pickable.className),
+    style: _objectSpread(_objectSpread({}, styled.pickable.style), pickableStyle)
+  }, pickable)));
+});
+
+exports.default = Picker;

package/dist/components/picker/picker.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PickerProps, PickerRef } from "./types";
+import type { PickerProps, PickerRef } from "../../types/picker";
 declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<PickerRef>>;
 export default Picker;

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

@@ -2,17 +2,17 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
-import Popper from '../popper/popper.js';
+import Popper from '../popper/popper.mjs';
 import { useBoolean, useEvent, useFocus, clsx } from '@aiszlab/relax';
-import { PickerClassToken } from '../../utils/class-name.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } 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 { typography } from '../theme/theme.js';
-import { styles as styles$1 } from '../input/input.js';
-import { Context } from './context.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { PickerClassToken } from '../../utils/class-name.mjs';
+import { useClassNames } from '../../hooks/use-class-names.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 { typography } from '../theme/theme.mjs';
+import { styles as styles$1 } from '../input/input.mjs';
+import { Context } from './context.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   pickable: function pickable(props) {
@@ -38,7 +38,8 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pickableStyle = _ref.pickableStyle,
     onPopperEntered = _ref.onPopperEntered,
     onPopperExited = _ref.onPopperExited,
-    onPopperExite = _ref.onPopperExite;
+    onPopperExite = _ref.onPopperExite,
+    _onBlur = _ref.onBlur;
   var trigger = useRef(null);
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
@@ -62,11 +63,12 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   var click = useEvent(function (event) {
     event.stopPropagation();
-    toggle();
     onClick === null || onClick === void 0 || onClick(event);
+    toggle();
   });
   var onBlur = useEvent(function (e) {
     e.stopPropagation();
+    _onBlur === null || _onBlur === void 0 || _onBlur(e);
     close();
   });
   var _useFocus = useFocus({
@@ -79,12 +81,12 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return e.preventDefault();
   }, []);
   var styled = {
-    picker: props(typography.body.medium, styles$1.wrapper({
+    picker: _stylex.props(typography.body.medium, styles$1.wrapper({
       outlineColor: theme.colors[ColorToken.Outline]
     }), isFocused && styles$1.focused({
       outlineColor: theme.colors[ColorToken.Primary]
     })),
-    pickable: props(styles.pickable({
+    pickable: _stylex.props(styles.pickable({
       minWidth: getDropdownWidth()
     }))
   };