musae 0.3.1 → 0.3.3

package/dist/components/icon/icons/toggle/index.mjs

@@ -1,3 +1,11 @@
-export { default as Star } from './star.mjs';
-export { default as StarHalf } from './star-half.mjs';
-export { default as StarOutline } from './star-outline.mjs';
+import Star from './star.mjs';
+import StarHalf from './star-half.mjs';
+import StarOutline from './star-outline.mjs';
+
+var _ = {
+  Star: Star,
+  StarHalf: StarHalf,
+  StarOutline: StarOutline
+};
+
+export { Star, StarHalf, StarOutline, _ as default };

package/dist/components/icon/icons/toggle/star-half.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const StarHalf: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+declare const StarHalf: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
 export default StarHalf;

package/dist/components/icon/icons/toggle/star-outline.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const StarOutline: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+declare const StarOutline: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
 export default StarOutline;

package/dist/components/icon/icons/toggle/star.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const Star: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+declare const Star: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
 export default Star;

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

@@ -1,7 +1,2 @@
 import Icon from "./icon";
-/**
- * @description
- * icon component
- */
 export { Icon };
-export type { IconProps } from "./types";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { OperationsProps } from "./types";
+import type { OperationsProps } from "musae/types/image";
 /**
  * @description
  * handlers

package/dist/components/image/image.cjs

@@ -31,13 +31,13 @@ var Image = function Image(_ref) {
     // not in preview group, render self
     turnOn();
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && /*#__PURE__*/React.createElement("img", {
+  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, {
+  })), isOpen && !contextValue && /*#__PURE__*/React.createElement(preview.default, {
     src: src,
     onClose: turnOff,
     alt: alt

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type { ImageProps } from "./types";
+import type { ImageProps } from "musae/types/image";
 declare const Image: ({ src, alt, width, height }: ImageProps) => React.JSX.Element;
 export default Image;

package/dist/components/image/image.mjs

@@ -29,13 +29,13 @@ var Image = function Image(_ref) {
     // not in preview group, render self
     turnOn();
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && /*#__PURE__*/React.createElement("img", {
+  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, {
+  })), isOpen && !contextValue && /*#__PURE__*/React.createElement(Preview, {
     src: src,
     onClose: turnOff,
     alt: alt

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

@@ -1,4 +1,4 @@
-declare const Image: (({ src, alt, width, height }: import("./types").ImageProps) => import("react").JSX.Element) & {
-    Group: ({ children, items }: import("./types").PreviewGroupProps) => import("react").JSX.Element;
+declare const Image: (({ src, alt, width, height }: import("musae/types/image").ImageProps) => import("react").JSX.Element) & {
+    Group: ({ children, items }: import("musae/types/image").PreviewGroupProps) => import("react").JSX.Element;
 };
 export { Image };

package/dist/components/image/preview/context.d.ts

@@ -1,3 +1,3 @@
-import type { PreviewGroupContextValue } from "../types";
+import type { PreviewGroupContextValue } from "musae/types/image";
 declare const PreviewGroupContext: import("react").Context<PreviewGroupContextValue | null>;
 export default PreviewGroupContext;

package/dist/components/image/preview/group.d.ts

@@ -1,4 +1,4 @@
-import type { PreviewGroupProps } from "../types";
+import type { PreviewGroupProps } from "musae/types/image";
 import React from "react";
 declare const Group: ({ children, items }: PreviewGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/image/preview/operations.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { OperationsProps } from "../types";
+import type { OperationsProps } from "musae/types/image";
 declare const Operations: ({ onClose, onZoomIn, onZoomOut, onRotateRight, onRotateLeft, onFlipX, onFlipY, }: OperationsProps) => React.JSX.Element;
 export default Operations;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { PreviewRef } from "../types";
+import type { PreviewRef } from "musae/types/image";
 declare const Preview: React.ForwardRefExoticComponent<Pick<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
     src: string;
     onClose: () => void;

package/dist/components/input/hooks.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEventHandler, type Dispatch, type FocusEventHandler, type MouseEventHandler, type SetStateAction, type RefObject } from "react";
-import type { InputProps } from "./types";
+import type { InputProps } from "musae/types/input";
 /**
  * @description
  * use events for input

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

@@ -1,3 +1,2 @@
 import Input, { styles } from "./input";
-import type { InputRef } from "./types";
-export { Input, styles, type InputRef };
+export { Input, styles };

package/dist/components/input/input.d.ts

@@ -1,5 +1,5 @@
 import React, { type CSSProperties } from "react";
-import type { InputProps, InputRef } from "./types";
+import type { InputProps, InputRef } from "musae/types/input";
 export declare const styles: Readonly<{
     readonly wrapper: (props: {
         outlineColor: CSSProperties["borderColor"];

package/dist/components/kbd/kbd.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { KbdProps } from "./types";
+import type { KbdProps } from "musae/types/kbd";
 declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
 export default Kbd;

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

@@ -1,3 +1,3 @@
-import type { KbdKey } from "./types";
+import type { KbdKey } from "musae/types/kbd";
 export declare const KBD_KEYS: Record<KbdKey, string>;
 export declare const KBD_LABELS: Record<KbdKey, string>;

package/dist/components/layout/footer.d.ts

@@ -1,3 +1,3 @@
-import { MainProps } from "./types";
+import type { MainProps } from "musae/types/layout";
 declare const Footer: (props: MainProps) => null;
 export default Footer;

package/dist/components/layout/header.d.ts

@@ -1,4 +1,4 @@
-import { HeaderProps } from "./types";
+import type { HeaderProps } from "musae/types/layout";
 import React from "react";
 declare const Header: ({ className, style, children }: HeaderProps) => React.JSX.Element;
 export default Header;

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

@@ -1,2 +1,2 @@
-import { TypedLayout } from "./types";
+import type { TypedLayout } from "musae/types/layout";
 export declare const Layout: TypedLayout;

package/dist/components/layout/layout.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { LayoutProps } from "./types";
+import type { LayoutProps } from "musae/types/layout";
 declare const Layout: ({ className, style, ...props }: LayoutProps) => React.JSX.Element;
 export default Layout;

package/dist/components/layout/main.d.ts

@@ -1,3 +1,3 @@
-import { MainProps } from "./types";
+import type { MainProps } from "musae/types/layout";
 declare const Main: ({ children }: MainProps) => import("react").ReactNode;
 export default Main;

package/dist/components/layout/sider.d.ts

@@ -1,4 +1,4 @@
-import type { SiderProps } from "./types";
+import type { SiderProps } from "musae/types/layout";
 import React from "react";
 declare const Sider: ({ style, children, className }: SiderProps) => React.JSX.Element;
 export default Sider;

package/dist/components/loading/loading.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { LoadingProps } from "./types";
+import type { LoadingProps } from "musae/types/loading";
 declare const Loading: ({ size, overlay, children, className, style, loading, }: LoadingProps) => React.JSX.Element;
 export default Loading;

package/dist/components/menu/hooks.cjs

@@ -47,17 +47,17 @@ var useItemChildren = function useItemChildren(_ref) {
     hasChildren = _ref.hasChildren,
     isExpanded = _ref.isExpanded,
     isInline = _ref.isInline;
-  /// prefix
+  // prefix
   var _prefix = React.useMemo(function () {
     return prefix && /*#__PURE__*/React.createElement("span", _objectSpread({}, {
       className: "musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-1a1twg2"
     }), prefix);
   }, [prefix]);
-  /// child
+  // child
   var _label = React.useMemo(function () {
     return label && /*#__PURE__*/React.createElement("span", null, label);
   }, [label]);
-  /// suffix
+  // suffix
   var _suffix = React.useMemo(function () {
     if (!suffix && !hasChildren) return null;
     var styled = stylex.default.props(styles.collapser({
@@ -98,12 +98,12 @@ var useContextValue = function useContextValue(_ref2) {
     _expandedKeys = _useControlledState4[0],
     _setExpandedKeys = _useControlledState4[1];
   var selectedKeys = React.useMemo(function () {
-    return new Set(_selectedKeys);
+    return new Set(relax.toArray(_selectedKeys));
   }, [_selectedKeys]);
   var expandedKeys = React.useMemo(function () {
     return new Set(_expandedKeys);
   }, [_expandedKeys]);
-  /// click handler
+  // click handler
   var click = React.useCallback(/*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -122,7 +122,7 @@ var useContextValue = function useContextValue(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }(), [onClick, _setSelectedKeys]);
-  /// toggle expand
+  // toggle expand
   var toggle = React.useCallback(function (key) {
     var isExpanded = expandedKeys.has(key);
     _setExpandedKeys(function (prev) {
@@ -131,7 +131,7 @@ var useContextValue = function useContextValue(_ref2) {
       return Array.from(expanded);
     });
   }, [expandedKeys, _setExpandedKeys]);
-  /// collect item
+  // collect item
   var collect = React.useCallback(function (key, item) {
     if (!item) return;
     setTrigger(key, item);

package/dist/components/menu/hooks.mjs

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useMemo, useCallback, useContext } from 'react';
 import Context from './context.mjs';
-import { useControlledState } from '@aiszlab/relax';
+import { useControlledState, toArray } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.mjs';
 
@@ -47,17 +47,17 @@ var useItemChildren = function useItemChildren(_ref) {
     hasChildren = _ref.hasChildren,
     isExpanded = _ref.isExpanded,
     isInline = _ref.isInline;
-  /// prefix
+  // prefix
   var _prefix = useMemo(function () {
     return prefix && /*#__PURE__*/React.createElement("span", _objectSpread({}, {
       className: "musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-1a1twg2"
     }), prefix);
   }, [prefix]);
-  /// child
+  // child
   var _label = useMemo(function () {
     return label && /*#__PURE__*/React.createElement("span", null, label);
   }, [label]);
-  /// suffix
+  // suffix
   var _suffix = useMemo(function () {
     if (!suffix && !hasChildren) return null;
     var styled = _stylex.props(styles.collapser({
@@ -98,12 +98,12 @@ var useContextValue = function useContextValue(_ref2) {
     _expandedKeys = _useControlledState4[0],
     _setExpandedKeys = _useControlledState4[1];
   var selectedKeys = useMemo(function () {
-    return new Set(_selectedKeys);
+    return new Set(toArray(_selectedKeys));
   }, [_selectedKeys]);
   var expandedKeys = useMemo(function () {
     return new Set(_expandedKeys);
   }, [_expandedKeys]);
-  /// click handler
+  // click handler
   var click = useCallback(/*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -122,7 +122,7 @@ var useContextValue = function useContextValue(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }(), [onClick, _setSelectedKeys]);
-  /// toggle expand
+  // toggle expand
   var toggle = useCallback(function (key) {
     var isExpanded = expandedKeys.has(key);
     _setExpandedKeys(function (prev) {
@@ -131,7 +131,7 @@ var useContextValue = function useContextValue(_ref2) {
       return Array.from(expanded);
     });
   }, [expandedKeys, _setExpandedKeys]);
-  /// collect item
+  // collect item
   var collect = useCallback(function (key, item) {
     if (!item) return;
     setTrigger(key, item);

package/dist/components/message/hooks.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { Messager } from "./types";
+import type { Messager } from "musae/types/message";
 /**
  * @author murukal
  *

package/dist/components/message/messager.d.ts

@@ -1,3 +1,3 @@
-import type { TypedMessage } from "./types";
+import type { TypedMessage } from "musae/types/message";
 declare const Message: TypedMessage;
 export default Message;

package/dist/components/notification/holder.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { HolderProps, HolderRef } from "./types";
+import type { HolderProps, HolderRef } from "musae/types/notification";
 declare const Holder: React.ForwardRefExoticComponent<HolderProps & React.RefAttributes<HolderRef>>;
 export default Holder;

package/dist/components/notification/hooks.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { Notifier, UseNotificationProps } from "./types";
+import type { Notifier, UseNotificationProps } from "musae/types/notification";
 /**
  * @author murukal
  *

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

@@ -1,4 +1,4 @@
-import type { HolderRef, Notifier, Type, NotificationConfig } from "./types";
+import type { HolderRef, Notifier, Type, NotificationConfig } from "musae/types/notification";
 import Holder from "./holder";
 import { useNotification } from "./hooks";
 import Notification from "./notifier";

package/dist/components/notification/notification.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { NotificationProps, Axis } from "./types";
+import type { NotificationProps, Axis } from "musae/types/notification";
 export declare const PLACEMENTS: Record<Axis, [hidden: string, appeared: string]>;
 declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;
 export default Notification;

package/dist/components/notification/notifier.d.ts

@@ -1,4 +1,4 @@
-import type { NotificationConfig, TypedNotification } from "./types";
+import type { NotificationConfig, TypedNotification } from "musae/types/notification";
 export declare class Notifier {
     #private;
     constructor();

package/dist/components/number-input/number-input.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { NumberInputProps } from "./types";
+import type { NumberInputProps } from "musae/types/number-input";
 declare const NumberInput: ({ value: __value, formatter: _formatter }: NumberInputProps) => React.JSX.Element;
 export default NumberInput;

package/dist/components/otp-input/otp-input.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { OtpInputProps } from "./types";
+import type { OtpInputProps } from "musae/types/otp-input";
 declare const OtpInput: ({ length, onChange, value: _value }: OtpInputProps) => React.JSX.Element;
 export default OtpInput;

package/dist/components/pagination/hooks.cjs

@@ -2,7 +2,6 @@ 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
@@ -14,22 +13,27 @@ var usePagiantion = function usePagiantion(_ref) {
   var total = _ref.total,
     siblings = _ref.siblings,
     boundaries = _ref.boundaries,
-    _pageSize = _ref.pageSize;
+    _pageSize = _ref.pageSize,
+    _at = _ref.at,
+    _onChange = _ref.onChange,
+    _onPageSizeChange = _ref.onPageSizeChange;
   var _useControlledState = relax.useControlledState(_pageSize, {
       defaultState: 10
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     pageSize = _useControlledState2[0],
     setPageSize = _useControlledState2[1];
+  // convert total into page count
+  // at least 1 page
   var pages = React.useMemo(function () {
-    return Math.ceil(total / Math.max(1, pageSize));
+    return Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   }, [total, pageSize]);
-  var _useCounter = relax.useCounter(1, {
+  var _useCounter = relax.useCounter(_at, {
       min: 1,
       max: pages
     }),
     _useCounter2 = _slicedToArray(_useCounter, 2),
-    page = _useCounter2[0],
+    at = _useCounter2[0],
     _useCounter2$ = _useCounter2[1],
     add = _useCounter2$.add,
     subtract = _useCounter2$.subtract,
@@ -38,28 +42,33 @@ var usePagiantion = function usePagiantion(_ref) {
     // 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]);
+      return ["prev"].concat(_toConsumableArray(relax.range(1, pages)), ["next"]);
     }
-    var focusedAt = relax.clamp(page, boundaries + 3, pages - (boundaries + 2));
+    var focusedAt = relax.clamp(at, 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]);
+    return ["prev"].concat(_toConsumableArray(relax.range(1, boundaries)), _toConsumableArray(hasPrevMore ? ["more-prev"] : [boundaries + 1]), _toConsumableArray(relax.range(from, to)), _toConsumableArray(hasNextMore ? ["more-next"] : [pages - boundaries]), _toConsumableArray(relax.range(pages - (boundaries - 1), pages)), ["next"]);
+  }, [boundaries, at, pages, siblings]);
   // whether prev button is usable
-  var hasPrev = page > 1;
+  var hasPrev = at > 1;
   // whether next button is usable
-  var hasNext = page < pages;
-  var onPageSizeChange = function onPageSizeChange(pageSize) {
+  var hasNext = at < pages;
+  var onChange = relax.useEvent(function (at) {
+    _onChange === null || _onChange === void 0 || _onChange(at);
+    setCount(at);
+  });
+  var onPageSizeChange = relax.useEvent(function (pageSize) {
+    _onPageSizeChange === null || _onPageSizeChange === void 0 || _onPageSizeChange(pageSize);
     setPageSize(pageSize);
-  };
+  });
   return {
     paginationItems: paginationItems,
     add: add,
     subtract: subtract,
-    changePage: setCount,
-    page: page,
+    onChange: onChange,
+    at: at,
     hasPrev: hasPrev,
     hasNext: hasNext,
     pageSize: pageSize,

package/dist/components/pagination/hooks.d.ts

@@ -1,21 +1,24 @@
-import { type PaginationItems } from "./types";
+import type { PaginationItems } from "musae/types/pagination";
 /**
  * @author murukal
  *
  * @description
  * use pagination
  */
-export declare const usePagiantion: ({ total, siblings, boundaries, pageSize: _pageSize, }: {
+export declare const usePagiantion: ({ total, siblings, boundaries, pageSize: _pageSize, at: _at, onChange: _onChange, onPageSizeChange: _onPageSizeChange, }: {
     total: number;
     siblings: number;
     boundaries: number;
     pageSize?: number;
+    at?: number;
+    onChange?: (at: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
 }) => {
     paginationItems: PaginationItems;
     add: (step?: number) => void;
     subtract: (step?: number) => void;
-    changePage: import("react").Dispatch<import("react").SetStateAction<number>>;
-    page: number;
+    onChange: (at: number) => void;
+    at: number;
     hasPrev: boolean;
     hasNext: boolean;
     pageSize: number;

package/dist/components/pagination/hooks.mjs

@@ -1,8 +1,7 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useControlledState, useCounter, range, clamp } from '@aiszlab/relax';
+import { useControlledState, useCounter, range, clamp, useEvent } from '@aiszlab/relax';
 import { useMemo } from 'react';
-import { PaginationItemType } from './types.mjs';
 
 /**
  * @author murukal
@@ -14,22 +13,27 @@ var usePagiantion = function usePagiantion(_ref) {
   var total = _ref.total,
     siblings = _ref.siblings,
     boundaries = _ref.boundaries,
-    _pageSize = _ref.pageSize;
+    _pageSize = _ref.pageSize,
+    _at = _ref.at,
+    _onChange = _ref.onChange,
+    _onPageSizeChange = _ref.onPageSizeChange;
   var _useControlledState = useControlledState(_pageSize, {
       defaultState: 10
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     pageSize = _useControlledState2[0],
     setPageSize = _useControlledState2[1];
+  // convert total into page count
+  // at least 1 page
   var pages = useMemo(function () {
-    return Math.ceil(total / Math.max(1, pageSize));
+    return Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   }, [total, pageSize]);
-  var _useCounter = useCounter(1, {
+  var _useCounter = useCounter(_at, {
       min: 1,
       max: pages
     }),
     _useCounter2 = _slicedToArray(_useCounter, 2),
-    page = _useCounter2[0],
+    at = _useCounter2[0],
     _useCounter2$ = _useCounter2[1],
     add = _useCounter2$.add,
     subtract = _useCounter2$.subtract,
@@ -38,28 +42,33 @@ var usePagiantion = function usePagiantion(_ref) {
     // max renderable pages
     var renderable = siblings * 2 + 3 + boundaries * 2;
     if (renderable > pages) {
-      return [PaginationItemType.Prev].concat(_toConsumableArray(range(1, pages)), [PaginationItemType.Next]);
+      return ["prev"].concat(_toConsumableArray(range(1, pages)), ["next"]);
     }
-    var focusedAt = clamp(page, boundaries + 3, pages - (boundaries + 2));
+    var focusedAt = clamp(at, 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 [PaginationItemType.Prev].concat(_toConsumableArray(range(1, boundaries)), _toConsumableArray(hasPrevMore ? [PaginationItemType.MorePrev] : [boundaries + 1]), _toConsumableArray(range(from, to)), _toConsumableArray(hasNextMore ? [PaginationItemType.MoreNext] : [pages - boundaries]), _toConsumableArray(range(pages - (boundaries - 1), pages)), [PaginationItemType.Next]);
-  }, [boundaries, page, pages, siblings]);
+    return ["prev"].concat(_toConsumableArray(range(1, boundaries)), _toConsumableArray(hasPrevMore ? ["more-prev"] : [boundaries + 1]), _toConsumableArray(range(from, to)), _toConsumableArray(hasNextMore ? ["more-next"] : [pages - boundaries]), _toConsumableArray(range(pages - (boundaries - 1), pages)), ["next"]);
+  }, [boundaries, at, pages, siblings]);
   // whether prev button is usable
-  var hasPrev = page > 1;
+  var hasPrev = at > 1;
   // whether next button is usable
-  var hasNext = page < pages;
-  var onPageSizeChange = function onPageSizeChange(pageSize) {
+  var hasNext = at < pages;
+  var onChange = useEvent(function (at) {
+    _onChange === null || _onChange === void 0 || _onChange(at);
+    setCount(at);
+  });
+  var onPageSizeChange = useEvent(function (pageSize) {
+    _onPageSizeChange === null || _onPageSizeChange === void 0 || _onPageSizeChange(pageSize);
     setPageSize(pageSize);
-  };
+  });
   return {
     paginationItems: paginationItems,
     add: add,
     subtract: subtract,
-    changePage: setCount,
-    page: page,
+    onChange: onChange,
+    at: at,
     hasPrev: hasPrev,
     hasNext: hasNext,
     pageSize: pageSize,