musae 0.2.26 → 0.3.0

package/dist/components/notification/notification.cjs

@@ -0,0 +1,279 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var button = require('../button/button.cjs');
+var theme = require('../theme/theme.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var close = require('../icon/icons/navigation/close.cjs');
+var checkCircle = require('../icon/icons/action/check-circle.cjs');
+var error = require('../icon/icons/alert/error.cjs');
+var notificationImportant = require('../icon/icons/alert/notification-important.cjs');
+var warning = require('../icon/icons/alert/warning.cjs');
+var loading = require('../icon/icons/mock/loading.cjs');
+
+var AXIS = {
+  top: "top",
+  "top-left": "left",
+  "top-right": "right",
+  bottom: "bottom",
+  "bottom-left": "left",
+  "bottom-right": "right"
+};
+var PLACEMENTS = {
+  right: ["translateX(100%)", "translateX(0)"],
+  left: ["translateX(-100%)", "translateX(0)"],
+  bottom: ["translateY(100%)", "translateY(0)"],
+  top: ["translateY(-100%)", "translateY(0)"]
+};
+var LEADINGS = new Map([["success", checkCircle.default], ["error", error.default], ["loading", loading.default], ["info", notificationImportant.default], ["warning", warning.default]]);
+var styles = {
+  notification: {
+    "default": function _default(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        borderRadius: "musaex-ok3b7d",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        boxShadow: "musaex-sgc7hx",
+        maxWidth: "musaex-77asx0",
+        pointerEvents: "musaex-71s49j",
+        overflow: "musaex-b3r6kr",
+        overflowX: null,
+        overflowY: null,
+        transitionProperty: "musaex-1c9o64o",
+        transitionDuration: "musaex-13dflua",
+        transform: "musaex-1v0jg1i",
+        opacity: "musaex-g01cxk",
+        marginTop: "musaex-gqr9ew",
+        display: "musaex-rvj5dj",
+        gap: "musaex-1lsrmdg",
+        rowGap: null,
+        columnGap: null,
+        grid: "musaex-tdrehe",
+        gridTemplate: null,
+        gridTemplateAreas: null,
+        gridTemplateColumns: null,
+        gridTemplateRows: null,
+        gridAutoRows: null,
+        gridAutoColumns: null,
+        gridAutoFlow: null,
+        paddingBlock: "musaex-4g05pm",
+        paddingTop: null,
+        paddingBottom: null,
+        paddingInline: "musaex-y0sash",
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial",
+        "--transform": props.transform != null ? props.transform : "initial"
+      }];
+    },
+    simple: {
+      grid: "musaex-1t1eshv",
+      gridTemplate: null,
+      gridTemplateAreas: null,
+      gridTemplateColumns: null,
+      gridTemplateRows: null,
+      gridAutoRows: null,
+      gridAutoColumns: null,
+      gridAutoFlow: null,
+      paddingBlock: "musaex-15v7278",
+      paddingTop: null,
+      paddingBottom: null,
+      paddingInline: "musaex-1dhq86w",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      $$css: true
+    }
+  },
+  leading: {
+    "default": function _default(props) {
+      return [{
+        gridArea: "musaex-1kxrqrs",
+        gridRow: null,
+        gridRowStart: null,
+        gridRowEnd: null,
+        gridColumn: null,
+        gridColumnStart: null,
+        gridColumnEnd: null,
+        alignSelf: "musaex-amitd3",
+        display: "musaex-3nfvp2",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  title: {
+    "default": {
+      gridArea: "musaex-nyuz70",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    }
+  },
+  description: {
+    "default": {
+      gridArea: "musaex-19tbii3",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      display: "musaex-1rg5ohu",
+      wordBreak: "musaex-13faqbe",
+      $$css: true
+    },
+    simple: {
+      alignSelf: "musaex-amitd3",
+      $$css: true
+    }
+  },
+  closer: {
+    "default": {
+      gridArea: "musaex-1n8w83i",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      justifySelf: "musaex-15bdqvn",
+      $$css: true
+    }
+  }
+};
+var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var placement = _ref.placement,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 3000 : _ref$duration,
+    onClose = _ref.onClose,
+    description = _ref.description,
+    title = _ref.title,
+    type = _ref.type,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable;
+  var theme$1 = hooks.useTheme();
+  var _usePresence = framerMotion.usePresence(),
+    _usePresence2 = _slicedToArray(_usePresence, 2),
+    isPresent = _usePresence2[0],
+    safeToRemove = _usePresence2[1];
+  var axis = AXIS[placement];
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    scope = _useAnimate2[0],
+    animate = _useAnimate2[1];
+  var _placement = PLACEMENTS[axis];
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Notification);
+  var notificationRef = relax.useRefs(scope, ref);
+  // after duration, `Notification` will auto destroy
+  relax.useTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.t0 = placement;
+          _context.next = _context.t0 === "bottom" ? 3 : _context.t0 === "bottom-left" ? 3 : _context.t0 === "bottom-right" ? 3 : 6;
+          break;
+        case 3:
+          _context.next = 5;
+          return animate(scope.current, {
+            opacity: 0,
+            marginBlockEnd: scope.current.getBoundingClientRect().height * -1
+          });
+        case 5:
+          return _context.abrupt("break", 9);
+        case 6:
+          _context.next = 8;
+          return animate(scope.current, {
+            opacity: 0,
+            marginBlockStart: scope.current.getBoundingClientRect().height * -1
+          });
+        case 8:
+          return _context.abrupt("break", 9);
+        case 9:
+          onClose === null || onClose === void 0 || onClose();
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), duration);
+  var styled = {
+    notification: stylex.default.props(styles.notification["default"]({
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerLowest],
+      color: theme$1.colors[colors.ColorToken.OnSurface],
+      transform: _placement[0]
+    }), !title && styles.notification.simple),
+    leading: stylex.default.props(styles.leading["default"]({
+      color: type === "success" ? theme$1.colors[colors.ColorToken.Success] : type === "warning" ? theme$1.colors[colors.ColorToken.Warning] : type === "error" ? theme$1.colors[colors.ColorToken.Error] : theme$1.colors[colors.ColorToken.Primary]
+    })),
+    title: stylex.default.props(theme.typography.title.medium, styles.title["default"]),
+    description: stylex.default.props(theme.typography.body.medium, styles.description["default"], !title && styles.description.simple),
+    closer: stylex.default.props(styles.closer["default"])
+  };
+  React.useEffect(function () {
+    if (!isPresent) {
+      safeToRemove();
+      return;
+    }
+    // appear animation
+    animate(scope.current, {
+      opacity: 1,
+      transform: _placement[1]
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isPresent]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.NotificationClassToken.Notification], styled.notification.className),
+    style: styled.notification.style,
+    ref: notificationRef
+  }, LEADINGS.has(type) && (/*#__PURE__*/React.createElement("div", {
+    className: styled.leading.className,
+    style: styled.leading.style
+  }, /*#__PURE__*/React.createElement(LEADINGS.get(type)))), !!title && (/*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.NotificationClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.NotificationClassToken.Description], styled.description.className),
+    style: styled.description.style
+  }, description), closable && (/*#__PURE__*/React.createElement(button.Button, {
+    className: relax.clsx(classNames[className.NotificationClassToken.Closer], styled.closer.className),
+    shape: "circular",
+    variant: "text",
+    prefix: /*#__PURE__*/React.createElement(close.default, null),
+    onClick: onClose,
+    size: "small"
+  })));
+});
+
+exports.PLACEMENTS = PLACEMENTS;
+exports.default = Notification;

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

@@ -1,23 +1,23 @@
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-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, { forwardRef, useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { useRefs, useTimeout, clsx } from '@aiszlab/relax';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { NotificationClassToken } from '../../utils/class-name.js';
-import Button from '../button/button.js';
-import { typography } from '../theme/theme.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import CheckCircle from '../icon/icons/action/check-circle.js';
-import Error from '../icon/icons/alert/error.js';
-import NotificationImportant from '../icon/icons/alert/notification-important.js';
-import Warning from '../icon/icons/alert/warning.js';
-import Loading from '../icon/icons/mock/loading.js';
-import Close from '../icon/icons/navigation/close.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { NotificationClassToken } from '../../utils/class-name.mjs';
+import { Button } from '../button/button.mjs';
+import { typography } from '../theme/theme.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import Close from '../icon/icons/navigation/close.mjs';
+import CheckCircle from '../icon/icons/action/check-circle.mjs';
+import Error from '../icon/icons/alert/error.mjs';
+import NotificationImportant from '../icon/icons/alert/notification-important.mjs';
+import Warning from '../icon/icons/alert/warning.mjs';
+import Loading from '../icon/icons/mock/loading.mjs';
 
 var AXIS = {
   top: "top",

package/dist/components/notification/notifier.cjs

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _classPrivateFieldInitSpec = require('@babel/runtime/helpers/classPrivateFieldInitSpec');
+var _classPrivateFieldSet = require('@babel/runtime/helpers/classPrivateFieldSet2');
+var _classPrivateFieldGet = require('@babel/runtime/helpers/classPrivateFieldGet2');
+var React = require('react');
+var client = require('react-dom/client');
+var holder = require('./holder.cjs');
+
+var METHODS = ["error", "info", "success", "warning"];
+var _holder = /*#__PURE__*/new WeakMap();
+var Notifier = /*#__PURE__*/function () {
+  function Notifier() {
+    var _notifier$_;
+    _classCallCheck(this, Notifier);
+    _classPrivateFieldInitSpec(this, _holder, null);
+    return (_notifier$_ = _notifier._) !== null && _notifier$_ !== void 0 ? _notifier$_ : _notifier._ = this;
+  }
+  return _createClass(Notifier, [{
+    key: "open",
+    value: function open(notification) {
+      var _this = this;
+      if (!_classPrivateFieldGet(_holder, this)) {
+        client.createRoot(document.createDocumentFragment()).render(/*#__PURE__*/React.createElement(holder.default, {
+          ref: function ref(holder) {
+            _classPrivateFieldSet(_holder, _this, holder);
+          },
+          defaultNotifications: [notification]
+        }));
+        return;
+      }
+      _classPrivateFieldGet(_holder, this).add(notification);
+    }
+  }]);
+}();
+// singleton mode
+var _notifier = {
+  _: null
+};
+var Notification = Object.assign.apply(Object, [{
+  open: function open(notification) {
+    return new Notifier().open(notification);
+  }
+}].concat(_toConsumableArray(METHODS.map(function (type) {
+  return _defineProperty({}, type, function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(notification) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            new Notifier().open(_objectSpread(_objectSpread({}, notification), {}, {
+              type: type
+            }));
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+}))));
+
+exports.Notifier = Notifier;
+exports.default = Notification;

package/dist/components/notification/{notifier.js → notifier.mjs}

@@ -10,7 +10,7 @@ import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet2'
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet2';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Holder from './holder.js';
+import Holder from './holder.mjs';
 
 var METHODS = ["error", "info", "success", "warning"];
 var _holder = /*#__PURE__*/new WeakMap();
@@ -66,6 +66,5 @@ var Notification = Object.assign.apply(Object, [{
     };
   }());
 }))));
-var Notification$1 = Notification;
 
-export { Notifier, Notification$1 as default };
+export { Notifier, Notification as default };

package/dist/components/number-input/hooks.cjs

@@ -0,0 +1,31 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+
+/**
+ * @description
+ * number input value hook
+ */
+var useValue = function useValue(_ref) {
+  var _value = _ref.value;
+  var _useControlledState = relax.useControlledState(_value === null || _value === void 0 ? void 0 : _value.toString()),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  var change = relax.useEvent(function (___value) {
+    // ignore invalid character
+    if (!/^-?(?:\d+)?(\.)?\d*$/.test(___value) && ___value !== "") {
+      return;
+    }
+    // uncontrolled, change state only
+    if (relax.isUndefined(_value)) {
+      setValue(___value);
+      return;
+    }
+  });
+  return {
+    value: value,
+    change: change
+  };
+};
+
+exports.useValue = useValue;

package/dist/components/number-input/number-input.cjs

@@ -0,0 +1,40 @@
+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 input = require('../input/input.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+
+var NumberInput = function NumberInput(_ref) {
+  var __value = _ref.value,
+    _formatter = _ref.formatter;
+  var _useFocus = relax.useFocus(),
+    _useFocus2 = _slicedToArray(_useFocus, 2),
+    isFocused = _useFocus2[0],
+    focusProps = _useFocus2[1];
+  var _useValue = hooks.useValue({
+      value: __value
+    }),
+    _value = _useValue.value,
+    change = _useValue.change;
+  /// formatter
+  var formatter = relax.useEvent(function (value) {
+    if (!_formatter) return _value;
+    formatter(value);
+  });
+  var value = React.useMemo(function () {
+    if (isFocused) {
+      return _value;
+    }
+    return formatter(_value);
+  }, [isFocused, formatter, _value]);
+  return /*#__PURE__*/React.createElement(input.default, _objectSpread({
+    type: "number",
+    value: value,
+    onChange: change
+  }, focusProps));
+};
+
+exports.default = NumberInput;

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

@@ -1,9 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import Input from '../input/input.js';
+import Input from '../input/input.mjs';
 import { useFocus, useEvent } from '@aiszlab/relax';
-import { useValue } from './hooks.js';
+import { useValue } from './hooks.mjs';
 
 var NumberInput = function NumberInput(_ref) {
   var __value = _ref.value,
@@ -34,6 +34,5 @@ var NumberInput = function NumberInput(_ref) {
     onChange: change
   }, focusProps));
 };
-var NumberInput$1 = NumberInput;
 
-export { NumberInput$1 as default };
+export { NumberInput as default };

package/dist/components/otp-input/hooks.cjs

@@ -0,0 +1,82 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+var keyboard = require('../../utils/keyboard.cjs');
+
+/**
+ * @description
+ * use value
+ */
+var useValue = function useValue(_ref) {
+  var length = _ref.length,
+    onChange = _ref.onChange,
+    _value = _ref.value;
+  var _useControlledState = relax.useControlledState(_value, {
+      defaultState: ""
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  var values = React.useMemo(function () {
+    return Array.from({
+      length: length
+    }, function (_, index) {
+      return value.charAt(index);
+    });
+  }, [length, value]);
+  var change = relax.useEvent(function (index, otp) {
+    var changed = Array.from(values);
+    changed[index] = otp;
+    var changedValue = changed.join("");
+    if (relax.isUndefined(_value)) {
+      setValue(changedValue);
+      return;
+    }
+    onChange === null || onChange === void 0 || onChange(changedValue);
+  });
+  return {
+    value: values,
+    change: change
+  };
+};
+/**
+ * @description
+ * events
+ */
+var useInputEvents = function useInputEvents(_ref2) {
+  var refocus = _ref2.refocus,
+    focusedAt = _ref2.focusedAt,
+    value = _ref2.value,
+    changeValue = _ref2.changeValue;
+  var keyDown = relax.useEvent(function (e) {
+    switch (e.key) {
+      case keyboard.Keyboard.Backspace:
+        e.preventDefault();
+        changeValue("");
+        refocus(focusedAt - 1);
+        break;
+      case keyboard.Keyboard.Delete:
+        e.preventDefault();
+        changeValue("");
+        break;
+      case keyboard.Keyboard.ArrowLeft:
+        e.preventDefault();
+        refocus(focusedAt - 1);
+        break;
+      case keyboard.Keyboard.Space:
+        e.preventDefault();
+        break;
+      case keyboard.Keyboard.ArrowRight:
+      case value[focusedAt]:
+        e.preventDefault();
+        refocus(focusedAt + 1);
+        break;
+    }
+  });
+  return {
+    keyDown: keyDown
+  };
+};
+
+exports.useInputEvents = useInputEvents;
+exports.useValue = useValue;

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

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useControlledState, useEvent, isUndefined } from '@aiszlab/relax';
 import { useMemo } from 'react';
-import { Keyboard } from '../../utils/keyboard.js';
+import { Keyboard } from '../../utils/keyboard.mjs';
 
 /**
  * @description

package/dist/components/otp-input/otp-input.cjs

@@ -0,0 +1,89 @@
+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 hooks = require('./hooks.cjs');
+var input = require('../input/input.cjs');
+var relax = require('@aiszlab/relax');
+
+var OtpInput = function OtpInput(_ref) {
+  var _ref$length = _ref.length,
+    length = _ref$length === void 0 ? 6 : _ref$length,
+    onChange = _ref.onChange,
+    _value = _ref.value;
+  var _useValue = hooks.useValue({
+      length: length,
+      onChange: onChange,
+      value: _value
+    }),
+    value = _useValue.value,
+    _change = _useValue.change;
+  var inputRefs = React.useRef(Array.from({
+    length: length
+  }).fill(null));
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedAt = _useState2[0],
+    setFocusedAt = _useState2[1];
+  var refocus = relax.useEvent(function (_foucsAt) {
+    var _inputRefs$current$fo, _inputRefs$current$fo2, _inputRefs$current$fo3, _inputRefs$current$fo4;
+    var foucsAt = relax.clamp(_foucsAt, 0, length - 1);
+    // handle input, only select when prev input
+    (_inputRefs$current$fo = inputRefs.current[foucsAt]) === null || _inputRefs$current$fo === void 0 || (_inputRefs$current$fo2 = _inputRefs$current$fo.focus) === null || _inputRefs$current$fo2 === void 0 || _inputRefs$current$fo2.call(_inputRefs$current$fo);
+    _foucsAt < length && ((_inputRefs$current$fo3 = inputRefs.current[foucsAt]) === null || _inputRefs$current$fo3 === void 0 || (_inputRefs$current$fo4 = _inputRefs$current$fo3.select) === null || _inputRefs$current$fo4 === void 0 ? void 0 : _inputRefs$current$fo4.call(_inputRefs$current$fo3));
+    setFocusedAt(foucsAt);
+  });
+  var changeValue = relax.useEvent(function (value) {
+    _change(focusedAt, value);
+  });
+  var change = relax.useEvent(function (otp) {
+    // value
+    changeValue(otp);
+    // focus
+    refocus(focusedAt + 1);
+  });
+  var focus = relax.useEvent(function (e, index) {
+    setFocusedAt(index);
+    e.target.select();
+  });
+  var _useInputEvents = hooks.useInputEvents({
+      refocus: refocus,
+      focusedAt: focusedAt,
+      value: value,
+      changeValue: changeValue
+    }),
+    keyDown = _useInputEvents.keyDown;
+  var styled = {
+    otp: {
+      className: "musaex-78zum5 musaex-1q0g3np musaex-1lsrmdg"
+    },
+    input: {
+      className: "musaex-16b21pk"
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.otp.className,
+    style: styled.otp.style
+  }, value.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(input.default, {
+      key: index,
+      value: item,
+      maxLength: 1,
+      className: styled.input.className,
+      style: _objectSpread(_objectSpread({}, styled.input.style), {}, {
+        minWidth: 0
+      }),
+      ref: function ref(inputRef) {
+        inputRefs.current[index] = inputRef;
+      },
+      onChange: change,
+      onKeyDown: keyDown,
+      onFocus: function onFocus(e) {
+        return focus(e, index);
+      }
+    });
+  }));
+};
+
+exports.default = OtpInput;