musae 0.2.26 → 0.3.0

package/dist/components/image/hooks.cjs

@@ -0,0 +1,65 @@
+var React = require('react');
+var button = require('../button/button.cjs');
+var swapHoriz = require('../icon/icons/action/swap-horiz.cjs');
+var swapVert = require('../icon/icons/action/swap-vert.cjs');
+var zoomOut = require('../icon/icons/action/zoom-out.cjs');
+var zoomIn = require('../icon/icons/action/zoom-in.cjs');
+var rotateLeft = require('../icon/icons/image/rotate-left.cjs');
+var rotateRight = require('../icon/icons/image/rotate-right.cjs');
+
+/**
+ * @description
+ * handlers
+ */
+var useHandlers = function useHandlers(_ref) {
+  var onZoomIn = _ref.onZoomIn,
+    onZoomOut = _ref.onZoomOut,
+    onRotateRight = _ref.onRotateRight,
+    onRotateLeft = _ref.onRotateLeft,
+    onFlipX = _ref.onFlipX,
+    onFlipY = _ref.onFlipY;
+  var events = React.useMemo(function () {
+    return [{
+      child: /*#__PURE__*/React.createElement(swapHoriz.default, null),
+      onClick: onFlipX,
+      type: "flip-x"
+    }, {
+      child: /*#__PURE__*/React.createElement(swapVert.default, null),
+      onClick: onFlipY,
+      type: "flip-y"
+    }, {
+      child: /*#__PURE__*/React.createElement(rotateLeft.default, null),
+      onClick: onRotateLeft,
+      type: "rotate-left"
+    }, {
+      child: /*#__PURE__*/React.createElement(rotateRight.default, null),
+      onClick: onRotateRight,
+      type: "rotate-right"
+    }, {
+      child: /*#__PURE__*/React.createElement(zoomOut.default, null),
+      onClick: onZoomOut,
+      type: "zoom-out"
+    }, {
+      child: /*#__PURE__*/React.createElement(zoomIn.default, null),
+      onClick: onZoomIn,
+      type: "zoom-in"
+    }];
+  }, [onFlipX, onFlipY, onRotateLeft, onRotateRight, onZoomIn, onZoomOut]);
+  var handlers = React.useMemo(function () {
+    return events.map(function (_ref2) {
+      var type = _ref2.type,
+        onClick = _ref2.onClick,
+        child = _ref2.child;
+      return /*#__PURE__*/React.createElement(button.Button, {
+        onClick: onClick,
+        key: type,
+        variant: "text",
+        shape: "circular",
+        disabled: !onClick
+      }, child);
+    });
+  }, [events]);
+  return handlers;
+};
+
+exports.useHandlers = useHandlers;

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

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
-import Button from '../button/button.js';
-import SwapVert from '../icon/icons/action/swap-vert.js';
-import SwapHoriz from '../icon/icons/action/swap-horiz.js';
-import ZoomOut from '../icon/icons/action/zoom-out.js';
-import ZoomIn from '../icon/icons/action/zoom-in.js';
-import RotateLeft from '../icon/icons/image/rotate-left.js';
-import RotateRight from '../icon/icons/image/rotate-right.js';
+import { Button } from '../button/button.mjs';
+import SwapHoriz from '../icon/icons/action/swap-horiz.mjs';
+import SwapVert from '../icon/icons/action/swap-vert.mjs';
+import ZoomOut from '../icon/icons/action/zoom-out.mjs';
+import ZoomIn from '../icon/icons/action/zoom-in.mjs';
+import RotateLeft from '../icon/icons/image/rotate-left.mjs';
+import RotateRight from '../icon/icons/image/rotate-right.mjs';
 
 /**
  * @description

package/dist/components/image/image.cjs

@@ -0,0 +1,47 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var preview = require('./preview/preview.cjs');
+var context = require('./preview/context.cjs');
+var relax = require('@aiszlab/relax');
+
+var Image = function Image(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    width = _ref.width,
+    height = _ref.height;
+  var _useBoolean = relax.useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isOpen = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  var contextValue = React.useContext(context.default);
+  var status = relax.useImageLoader({
+    src: src
+  });
+  var click = relax.useEvent(function () {
+    // if current image is in preview group
+    // just use preview group to preview image
+    if (contextValue) {
+      contextValue.onClick(src);
+      return;
+    }
+    // not in preview group, render self
+    turnOn();
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    onClick: click,
+    width: width,
+    height: height
+  }), isOpen && !contextValue && /*#__PURE__*/React.createElement(preview.default, {
+    src: src,
+    onClose: turnOff,
+    alt: alt
+  }));
+};
+
+exports.default = Image;

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

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext } from 'react';
-import Preview from './preview/preview.js';
-import PreviewGroupContext from './preview/context.js';
+import Preview from './preview/preview.mjs';
+import PreviewGroupContext from './preview/context.mjs';
 import { useBoolean, useImageLoader, useEvent } from '@aiszlab/relax';
 
 var Image = function Image(_ref) {

package/dist/components/image/index.cjs

@@ -0,0 +1,8 @@
+var image = require('./image.cjs');
+var group = require('./preview/group.cjs');
+
+var Image = Object.assign(image.default, {
+  Group: group.default
+});
+
+exports.Image = Image;

package/dist/components/image/{index.js → index.mjs}

@@ -1,5 +1,5 @@
-import Image$1 from './image.js';
-import Group from './preview/group.js';
+import Image$1 from './image.mjs';
+import Group from './preview/group.mjs';
 
 var Image = Object.assign(Image$1, {
   Group: Group

package/dist/components/image/preview/context.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var PreviewGroupContext = /*#__PURE__*/React.createContext(null);
+
+exports.default = PreviewGroupContext;

package/dist/components/image/preview/group.cjs

@@ -0,0 +1,62 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var context = require('./context.cjs');
+var preview = require('./preview.cjs');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+var Group = function Group(_ref) {
+  var children = _ref.children,
+    items = _ref.items;
+  var min = 0;
+  var max = items.length - 1;
+  var _useCounter = relax.useCounter(0, {
+      min: 0,
+      max: items.length - 1
+    }),
+    _useCounter2 = _slicedToArray(_useCounter, 2),
+    currentAt = _useCounter2[0],
+    _useCounter2$ = _useCounter2[1],
+    add = _useCounter2$.add,
+    subtract = _useCounter2$.subtract,
+    setCurrentAt = _useCounter2$.setCount;
+  var _useBoolean = relax.useBoolean(),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isOpen = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOff = _useBoolean2$.turnOff,
+    turnOn = _useBoolean2$.turnOn;
+  var ref = React.useRef(null);
+  var source = React.useMemo(function () {
+    return items[currentAt];
+  }, [currentAt, items]);
+  /// when image is changed, reset styles
+  var prev = relax.useEvent(function () {
+    var _ref$current;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.reset();
+    subtract();
+  });
+  var next = relax.useEvent(function () {
+    var _ref$current2;
+    (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.reset();
+    add();
+  });
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: {
+      total: items.length,
+      onClick: function onClick(src) {
+        setCurrentAt(Math.max(items.indexOf(src), 0));
+        turnOn();
+      },
+      onSwitchLeft: currentAt <= min ? void 0 : prev,
+      onSwitchRight: currentAt >= max ? void 0 : next
+    }
+  }, children, isOpen && /*#__PURE__*/React.createElement(preview.default, {
+    src: source,
+    onClose: turnOff,
+    ref: ref
+  }));
+};
+
+exports.default = Group;

package/dist/components/image/preview/{group.js → group.mjs}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import PreviewGroupContext from './context.js';
-import Preview from './preview.js';
+import PreviewGroupContext from './context.mjs';
+import Preview from './preview.mjs';
 import React, { useRef, useMemo } from 'react';
 import { useCounter, useBoolean, useEvent } from '@aiszlab/relax';
 

package/dist/components/image/preview/operations.cjs

@@ -0,0 +1,148 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var portal = require('../../portal/portal.cjs');
+var hooks = require('../../theme/hooks.cjs');
+var colors = require('../../../utils/colors.cjs');
+var hooks$1 = require('../hooks.cjs');
+var button = require('../../button/button.cjs');
+var context = require('./context.cjs');
+var close = require('../../icon/icons/navigation/close.cjs');
+var keyboardArrowLeft = require('../../icon/icons/hardware/keyboard-arrow-left.cjs');
+var keyboardArrowRight = require('../../icon/icons/hardware/keyboard-arrow-right.cjs');
+
+var styles = {
+  footer: function footer(props) {
+    return [{
+      position: "musaex-ixxii4",
+      left: "musaex-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      right: "musaex-3m8u43",
+      bottom: "musaex-vw9jmq",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      alignItems: "musaex-6s0dn4",
+      color: "musaex-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  },
+  handlers: function handlers(props) {
+    return [{
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      gap: "musaex-90xh4w",
+      rowGap: null,
+      columnGap: null,
+      alignItems: "musaex-6s0dn4",
+      backgroundColor: "musaex-q1mx2j",
+      borderRadius: "musaex-z7qqyb",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      paddingInline: "musaex-ei3nwd",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: "musaex-1i37kmv",
+      paddingTop: null,
+      paddingBottom: null,
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  }
+};
+var Operations = function Operations(_ref) {
+  var _useContext;
+  var onClose = _ref.onClose,
+    onZoomIn = _ref.onZoomIn,
+    onZoomOut = _ref.onZoomOut,
+    onRotateRight = _ref.onRotateRight,
+    onRotateLeft = _ref.onRotateLeft,
+    onFlipX = _ref.onFlipX,
+    onFlipY = _ref.onFlipY;
+  var theme = hooks.useTheme();
+  var styled = {
+    operations: {
+      className: "musaex-ixxii4 musaex-5z12vg"
+    },
+    closer: {
+      className: "musaex-1mjgxse musaex-l9l3z8"
+    },
+    navigations: {
+      className: "musaex-ixxii4 musaex-u96u03 musaex-3m8u43 musaex-wa60dl musaex-1dhq86w musaex-78zum5 musaex-1q0g3np musaex-1qughib musaex-6s0dn4"
+    },
+    footer: stylex.default.props(styles.footer({
+      color: theme.colors[colors.ColorToken.OnSurface]
+    })),
+    handlers: stylex.default.props(styles.handlers({
+      backgroundColor: theme.colors[colors.ColorToken.Surface]
+    }))
+  };
+  var handlers = hooks$1.useHandlers({
+    onFlipX: onFlipX,
+    onFlipY: onFlipY,
+    onRotateLeft: onRotateLeft,
+    onRotateRight: onRotateRight,
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut
+  });
+  var _ref2 = (_useContext = React.useContext(context.default)) !== null && _useContext !== void 0 ? _useContext : {},
+    onSwitchLeft = _ref2.onSwitchLeft,
+    onSwitchRight = _ref2.onSwitchRight,
+    _ref2$total = _ref2.total,
+    total = _ref2$total === void 0 ? 1 : _ref2$total;
+  var isMultiple = total > 1;
+  return /*#__PURE__*/React.createElement(portal.default, {
+    lockable: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styled.operations.className,
+    style: styled.operations.style
+  }, /*#__PURE__*/React.createElement(button.Button, {
+    className: styled.closer.className,
+    style: _objectSpread(_objectSpread({}, styled.closer.style), {}, {
+      position: "fixed"
+    }),
+    variant: "text",
+    onClick: onClose,
+    shape: "circular"
+  }, /*#__PURE__*/React.createElement(close.default, {
+    size: 32
+  })), isMultiple && (/*#__PURE__*/React.createElement("div", {
+    className: styled.navigations.className,
+    style: styled.navigations.style
+  }, /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "circular",
+    onClick: onSwitchLeft,
+    disabled: !onSwitchLeft
+  }, /*#__PURE__*/React.createElement(keyboardArrowLeft.default, {
+    size: 32
+  })), /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "circular",
+    onClick: onSwitchRight,
+    disabled: !onSwitchRight
+  }, /*#__PURE__*/React.createElement(keyboardArrowRight.default, {
+    size: 32
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styled.footer.className,
+    style: styled.footer.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styled.handlers.className,
+    style: styled.handlers.style
+  }, handlers))));
+};
+
+exports.default = Operations;

package/dist/components/image/preview/{operations.js → operations.mjs}

@@ -1,15 +1,15 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useContext } from 'react';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import Portal from '../../portal/portal.js';
-import { useTheme } from '../../theme/hooks.js';
-import { ColorToken } from '../../../utils/colors.js';
-import { useHandlers } from '../hooks.js';
-import Button from '../../button/button.js';
-import PreviewGroupContext from './context.js';
-import Close from '../../icon/icons/navigation/close.js';
-import KeyboardArrowLeft from '../../icon/icons/hardware/keyboard-arrow-left.js';
-import KeyboardArrowRight from '../../icon/icons/hardware/keyboard-arrow-right.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import Portal from '../../portal/portal.mjs';
+import { useTheme } from '../../theme/hooks.mjs';
+import { ColorToken } from '../../../utils/colors.mjs';
+import { useHandlers } from '../hooks.mjs';
+import { Button } from '../../button/button.mjs';
+import PreviewGroupContext from './context.mjs';
+import Close from '../../icon/icons/navigation/close.mjs';
+import KeyboardArrowLeft from '../../icon/icons/hardware/keyboard-arrow-left.mjs';
+import KeyboardArrowRight from '../../icon/icons/hardware/keyboard-arrow-right.mjs';
 
 var styles = {
   footer: function footer(props) {

package/dist/components/image/preview/preview.cjs

@@ -0,0 +1,135 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var dialog = require('../../dialog/dialog.cjs');
+var operations = require('./operations.cjs');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+
+var styles = {
+  image: function image(props) {
+    return [{
+      transform: "musaex-1v0jg1i",
+      willChange: "musaex-1so62im",
+      transition: "musaex-1trvaba",
+      transitionBehavior: null,
+      transitionDelay: null,
+      transitionDuration: null,
+      transitionProperty: null,
+      transitionTimingFunction: null,
+      $$css: true
+    }, {
+      "--transform": "translate3d(0px, 0px, 0px) scale3d(".concat(props.scale * props.flipX, ", ").concat(props.scale * props.flipY, ", 1) rotate(").concat(props.rotate, "deg)") != null ? "translate3d(0px, 0px, 0px) scale3d(".concat(props.scale * props.flipX, ", ").concat(props.scale * props.flipY, ", 1) rotate(").concat(props.rotate, "deg)") : "initial"
+    }];
+  }
+};
+var DefaultStyle;
+(function (DefaultStyle) {
+  DefaultStyle[DefaultStyle["scale"] = 1] = "scale";
+  DefaultStyle[DefaultStyle["rotate"] = 0] = "rotate";
+  DefaultStyle[DefaultStyle["flipX"] = 0] = "flipX";
+  DefaultStyle[DefaultStyle["flipY"] = 0] = "flipY";
+})(DefaultStyle || (DefaultStyle = {}));
+var Preview = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var onClose = _ref.onClose,
+    src = _ref.src,
+    alt = _ref.alt;
+  var _useState = React.useState(DefaultStyle.scale),
+    _useState2 = _slicedToArray(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  var _useState3 = React.useState(DefaultStyle.rotate),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rotate = _useState4[0],
+    setRotate = _useState4[1];
+  var _useState5 = React.useState(!!DefaultStyle.flipX),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFlipX = _useState6[0],
+    setFlipX = _useState6[1];
+  var _useState7 = React.useState(!!DefaultStyle.flipY),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFlipY = _useState8[0],
+    setFlipY = _useState8[1];
+  var onZoomOut = function onZoomOut() {
+    setScale(function (prev) {
+      return Math.max(prev / 1.5, 1);
+    });
+  };
+  var onZoomIn = function onZoomIn() {
+    setScale(function (prev) {
+      return prev * 1.5;
+    });
+  };
+  var onRotateLeft = function onRotateLeft() {
+    setRotate(function (prev) {
+      return prev - 90;
+    });
+  };
+  var onRotateRight = function onRotateRight() {
+    setRotate(function (prev) {
+      return prev + 90;
+    });
+  };
+  var onFlipX = function onFlipX() {
+    setFlipX(function (prev) {
+      return !prev;
+    });
+  };
+  var onFlipY = function onFlipY() {
+    setFlipY(function (prev) {
+      return !prev;
+    });
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      reset: function reset() {
+        setScale(DefaultStyle.scale);
+        setRotate(DefaultStyle.rotate);
+        setFlipX(!!DefaultStyle.flipX);
+        setFlipY(!!DefaultStyle.flipY);
+      }
+    };
+  }, []);
+  var styled = stylex.default.props(styles.image({
+    scale: scale,
+    rotate: rotate,
+    flipX: isFlipX ? -1 : 1,
+    flipY: isFlipY ? -1 : 1
+  }));
+  var isSmallest = scale <= 1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(dialog.default, {
+    open: true,
+    onClose: onClose,
+    footer: false,
+    closable: ["esc"],
+    styles: {
+      panel: {
+        backgroundColor: "transparent",
+        margin: 0,
+        width: "100%",
+        height: "100%",
+        maxHeight: "100%"
+      },
+      body: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    className: styled.className,
+    style: styled.style,
+    alt: alt
+  })), /*#__PURE__*/React.createElement(operations.default, {
+    onZoomOut: isSmallest ? void 0 : onZoomOut,
+    onZoomIn: onZoomIn,
+    onRotateRight: onRotateRight,
+    onRotateLeft: onRotateLeft,
+    onFlipX: onFlipX,
+    onFlipY: onFlipY,
+    onClose: onClose
+  }));
+});
+
+exports.default = Preview;

package/dist/components/image/preview/{preview.js → preview.mjs}

@@ -1,8 +1,8 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useState, useImperativeHandle } from 'react';
-import Dialog from '../../dialog/dialog.js';
-import Operations from './operations.js';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Dialog from '../../dialog/dialog.mjs';
+import Operations from './operations.mjs';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 
 var styles = {
   image: function image(props) {

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

@@ -1,5 +1,5 @@
 import type { FC, ImgHTMLAttributes, MouseEvent, ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 import type { Partialable } from "@aiszlab/relax/types";
 /**
  * @description

package/dist/components/input/hooks.cjs

@@ -0,0 +1,69 @@
+var React = require('react');
+
+/**
+ * @description
+ * use events for input
+ */
+var useInputEvents = function useInputEvents(_ref) {
+  var setValue = _ref.setValue,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick,
+    onFocus = _ref.onFocus;
+  var focus = React.useCallback(function (e) {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+    e.stopPropagation();
+  }, [onFocus]);
+  var blur = React.useCallback(function (e) {
+    onBlur === null || onBlur === void 0 || onBlur(e);
+    e.stopPropagation();
+  }, [onBlur]);
+  /// change handler
+  var change = React.useCallback(function (e) {
+    setValue(e.target.value);
+    onChange === null || onChange === void 0 || onChange(e.target.value);
+  }, [setValue, onChange]);
+  /// click handler
+  var click = React.useCallback(function (e) {
+    onClick === null || onClick === void 0 || onClick(e);
+    e.stopPropagation();
+  }, [onClick]);
+  return {
+    focus: focus,
+    blur: blur,
+    change: change,
+    click: click
+  };
+};
+/**
+ * @description
+ * wrapper events
+ */
+var useWrapperEvents = function useWrapperEvents(props) {
+  /// focus
+  var focus = React.useCallback(function () {
+    var _props$inputRef$curre;
+    (_props$inputRef$curre = props.inputRef.current) === null || _props$inputRef$curre === void 0 || _props$inputRef$curre.focus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /// blur
+  var blur = React.useCallback(function () {
+    var _props$inputRef$curre2;
+    (_props$inputRef$curre2 = props.inputRef.current) === null || _props$inputRef$curre2 === void 0 || _props$inputRef$curre2.blur();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /// click
+  var click = React.useCallback(function () {
+    var _props$inputRef$curre3;
+    (_props$inputRef$curre3 = props.inputRef.current) === null || _props$inputRef$curre3 === void 0 || _props$inputRef$curre3.click();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    focus: focus,
+    blur: blur,
+    click: click
+  };
+};
+
+exports.useInputEvents = useInputEvents;
+exports.useWrapperEvents = useWrapperEvents;