musae 0.2.5 → 0.2.7

package/dist/components/grid/col.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   col: props => [{

package/dist/components/grid/row.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
 
 const styles = {

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { IconProps } from "./types";
-declare const Icon: ({ as, color, size, onClick, style, className }: IconProps) => React.JSX.Element;
+declare const Icon: ({ as, color, size, onClick, style, className, ...props }: IconProps) => React.JSX.Element;
 export default Icon;

package/dist/components/icon/icon.js

@@ -2,7 +2,7 @@ import React, { useMemo, createElement } from 'react';
 import { isFunction } from '@aiszlab/relax';
 import { ComponentToken, IconClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 
 const styles = {
@@ -26,7 +26,8 @@ const Icon = ({
   size,
   onClick,
   style,
-  className
+  className,
+  ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Icon);
   const asProps = useMemo(() => {
@@ -49,7 +50,8 @@ const Icon = ({
       ...styled.style,
       ...style
     },
-    onClick: onClick
+    onClick: onClick,
+    ...props$1
   }, children);
 };
 var Icon$1 = Icon;

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, FC, MouseEventHandler, ReactNode, ReactPortal } from "react";
+import type { CSSProperties, FC, HTMLAttributes, MouseEventHandler, ReactNode, ReactPortal } from "react";
 import { ComponentProps } from "../../types/element";
 export type AsProps = Required<Pick<IconProps, "size">>;
 type Size = "small" | "medium" | "large";
@@ -27,5 +27,10 @@ export interface IconProps extends ComponentProps {
      * click handler
      */
     onClick?: MouseEventHandler<HTMLSpanElement>;
+    /**
+     * @description
+     * role
+     */
+    role?: HTMLAttributes<HTMLSpanElement>["role"];
 }
 export {};

package/dist/components/image/image.js

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
 import Preview from './preview/preview.js';
 import PreviewGroupContext from './preview/context.js';
-import { useBoolean, useEvent } from '@aiszlab/relax';
+import { useBoolean, useImageLoader, useEvent } from '@aiszlab/relax';
 
 const Image = ({ src, alt, width, height }) => {
     const [isOpen, { turnOn, turnOff }] = useBoolean(false);
     const contextValue = useContext(PreviewGroupContext);
+    const status = useImageLoader({ src });
     const click = useEvent(() => {
         // if current image is in preview group
         // just use preview group to preview image
@@ -17,7 +18,7 @@ const Image = ({ src, alt, width, height }) => {
         turnOn();
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { src: src, alt: alt, onClick: click, width: width, height: height }),
+        status === "loaded" && React.createElement("img", { src: src, alt: alt, onClick: click, width: width, height: height }),
         isOpen && !contextValue && React.createElement(Preview, { src: src, onClose: turnOff, alt: alt })));
 };
 

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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.js';
 import Portal from '../../portal/portal.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
@@ -13,10 +13,10 @@ import KeyboardArrowRight from '../../icon/icons/hardware/keyboard-arrow-right.j
 const styles = {
   footer: props => [{
     position: "musae-ixxii4",
-    left: "musae-1tjciyl",
+    left: "musae-u96u03",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-15gpytn",
+    right: "musae-3m8u43",
     bottom: "musae-1ii70tt",
     display: "musae-78zum5",
     flexDirection: "musae-dt5ytf",
@@ -74,7 +74,7 @@ const Operations = ({
       className: "musae-1qtgrog musae-14l26ut"
     },
     navigations: {
-      className: "musae-ixxii4 musae-1tjciyl musae-15gpytn musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
+      className: "musae-ixxii4 musae-u96u03 musae-3m8u43 musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
     },
     footer: _stylex.props(styles.footer({
       color: theme.colors[ColorToken.OnSurface]
@@ -98,7 +98,7 @@ const Operations = ({
   } = useContext(PreviewGroupContext) ?? {};
   const isMultiple = total > 1;
   return React.createElement(Portal, {
-    open: true
+    lockable: true
   }, React.createElement("div", {
     className: styled.operations.className,
     style: styled.operations.style

package/dist/components/image/preview/preview.js

@@ -1,7 +1,7 @@
 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.6.1/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.js';
 
 const styles = {
   image: props => [{

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

@@ -4,22 +4,22 @@ export declare const styles: Readonly<{
     readonly wrapper: (props: {
         outlineColor: CSSProperties["borderColor"];
     }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
-        display: "flex";
+        display: "inline-flex";
         alignItems: "center";
         cursor: "text";
+        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        verticalAlign: string;
         minHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
         minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
-        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        maxWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
         boxShadow: string;
         margin: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
         paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
         paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
-        transition: string;
+        transitionProperty: string;
+        transitionDuration: string;
         willChange: string;
     }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
-    readonly flexible: Readonly<{
-        readonly minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minWidth", null>;
-    }>;
     readonly focused: (props: {
         outlineColor: CSSProperties["borderColor"];
     }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{

package/dist/components/input/input.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputEvents, useWrapperEvents } from './hooks.js';
 import { useControlledState, useFocus } from '@aiszlab/relax';
 import { ComponentToken, InputClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -12,11 +12,9 @@ import { typography } from '../theme/theme.js';
 
 const styles = {
   wrapper: props => [{
-    display: "musae-78zum5",
+    display: "musae-3nfvp2",
     alignItems: "musae-6s0dn4",
     cursor: "musae-1ed109x",
-    minHeight: "musae-1v3fk47",
-    minWidth: "musae-1fpxtso",
     borderRadius: "musae-7bdoj",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
@@ -26,6 +24,10 @@ const styles = {
     borderTopRightRadius: null,
     borderBottomLeftRadius: null,
     borderBottomRightRadius: null,
+    verticalAlign: "musae-3ajldb",
+    minHeight: "musae-1v3fk47",
+    minWidth: "musae-1fpxtso",
+    maxWidth: "musae-kfv0gj",
     boxShadow: "musae-igitpm",
     margin: "musae-ieb5ut",
     marginInline: null,
@@ -44,21 +46,13 @@ const styles = {
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    transition: "musae-nz68lp",
-    transitionBehavior: null,
-    transitionDelay: null,
-    transitionDuration: null,
-    transitionProperty: null,
-    transitionTimingFunction: null,
+    transitionProperty: "musae-kdsq27",
+    transitionDuration: "musae-13dflua",
     willChange: "musae-1o9dqaq",
     $$css: true
   }, {
     "--boxShadow": `inset 0px 0px 0px ${sizes.smallest} ${props.outlineColor}` != null ? `inset 0px 0px 0px ${sizes.smallest} ${props.outlineColor}` : "initial"
   }],
-  flexible: {
-    minWidth: null,
-    $$css: true
-  },
   focused: props => [{
     boxShadow: "musae-igitpm",
     $$css: true
@@ -182,7 +176,7 @@ const Input = forwardRef(({
       className: "musae-jbqb8w musae-ohadnq musae-2vzm80 musae-yumy05 musae-1vwksmh musae-98rzlu"
     }
   };
-  return React.createElement("div", {
+  return React.createElement("span", {
     ref: wrapperRef,
     className: clsx(classNames[InputClassToken.Wrapper], {
       [classNames[InputClassToken.Focused]]: isFocused,

package/dist/components/layout/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme } from '../theme/hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 
@@ -14,7 +14,7 @@ const styles = {
     paddingRight: null,
     marginBottom: "musae-hq7bbv",
     position: "musae-7wzq59",
-    top: "musae-9oc6z4",
+    top: "musae-13vifvy",
     zIndex: "musae-1ac462h",
     display: "musae-78zum5",
     alignItems: "musae-6s0dn4",

package/dist/components/layout/layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from '../grid/index.js';
 import { useChildren, ChildToken } from './hooks.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/loading/loading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, LoadingClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
@@ -66,7 +66,7 @@ const styles = {
     "::after_content": "musae-1s928wv",
     "::after_display": "musae-hkezso",
     "::after_position": "musae-1j6awrg",
-    "::after_inset": "musae-1799ia1",
+    "::after_inset": "musae-arstr8",
     "::after_insetInline": null,
     "::after_insetInlineStart": null,
     "::after_insetInlineEnd": null,

package/dist/components/menu/group.js

@@ -5,9 +5,9 @@ import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import Item from './item.js';
 import { useMenuContext } from './hooks.js';
-import { useRefs } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useRefs, useUpdateEffect } from '@aiszlab/relax';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useExpandable } from '../../hooks/use-expandable.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 
@@ -44,6 +44,20 @@ const styles = {
     }, {
       "--color": props.color != null ? props.color : "initial"
     }],
+    horizontal: {
+      display: "musae-78zum5",
+      flexDirection: "musae-1q0g3np",
+      gap: "musae-vbka3v",
+      rowGap: null,
+      columnGap: null,
+      $$css: true
+    },
+    vertical: {
+      $$css: true
+    },
+    inline: {
+      $$css: true
+    },
     hidden: {
       display: "musae-1s85apg",
       $$css: true
@@ -96,15 +110,21 @@ const Group = forwardRef(({
   const groupRef = useRefs(ref, scope);
   const theme = useTheme();
   const isInline = mode === "inline";
-  useExpandEffect({
-    animate,
-    target: scope,
-    expanded
-  });
+  const {
+    expand,
+    collapse
+  } = useExpandable();
+  useUpdateEffect(async () => {
+    if (expanded) {
+      await expand([scope, animate]);
+      return;
+    }
+    await collapse([scope, animate]);
+  }, [expanded]);
   const styled = {
     group: props(styles.group.default({
       color: theme.colors[ColorToken.OnSurface]
-    }), !expanded && styles.group.hidden),
+    }), styles.group[mode], !expanded && styles.group.hidden),
     submenu: props(styles.submenu[mode])
   };
   return React.createElement("ul", {

package/dist/components/menu/hooks.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback, useContext } from 'react';
 import Context from './context.js';
 import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.js';
 
 const styles = {

package/dist/components/menu/item.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import { useMenuContext, useItemChildren } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes, spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/menu/menu.js

@@ -60,7 +60,9 @@ const Menu = forwardRef(({
     ref: targetRef,
     items: items,
     mode: mode,
-    className: clsx(classNames[MenuClassToken.Menu], className, styled.className),
+    className: clsx(classNames[MenuClassToken.Menu], {
+      [classNames[MenuClassToken.MenuHorizontal]]: mode === "horizontal"
+    }, className, styled.className),
     style: {
       ...styled.style,
       ...style

package/dist/components/notification/holder.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Portal from '../portal/portal.js';
 import { AnimatePresence } from 'framer-motion';
 import Notification from './notification.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 
 const styles = {
@@ -25,8 +25,8 @@ const styles = {
     $$css: true
   },
   top: {
-    top: "musae-9oc6z4",
-    insetInline: "musae-l33w4x",
+    top: "musae-13vifvy",
+    insetInline: "musae-17y0mx6",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -35,22 +35,22 @@ const styles = {
     $$css: true
   },
   topRight: {
-    top: "musae-9oc6z4",
-    insetInlineEnd: "musae-hw0b42",
+    top: "musae-13vifvy",
+    insetInlineEnd: "musae-tijo5x",
     left: null,
     right: null,
     $$css: true
   },
   topLeft: {
-    top: "musae-9oc6z4",
-    insetInlineStart: "musae-1at4hj2",
+    top: "musae-13vifvy",
+    insetInlineStart: "musae-1o0tod",
     left: null,
     right: null,
     $$css: true
   },
   bottom: {
-    bottom: "musae-1sh2tzk",
-    insetInline: "musae-l33w4x",
+    bottom: "musae-1ey2m1c",
+    insetInline: "musae-17y0mx6",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -59,15 +59,15 @@ const styles = {
     $$css: true
   },
   bottomLeft: {
-    bottom: "musae-1sh2tzk",
-    insetInlineStart: "musae-1at4hj2",
+    bottom: "musae-1ey2m1c",
+    insetInlineStart: "musae-1o0tod",
     left: null,
     right: null,
     $$css: true
   },
   bottomRight: {
-    bottom: "musae-1sh2tzk",
-    insetInlineEnd: "musae-hw0b42",
+    bottom: "musae-1ey2m1c",
+    insetInlineEnd: "musae-tijo5x",
     left: null,
     right: null,
     $$css: true
@@ -114,8 +114,7 @@ const Holder = forwardRef((_, ref) => {
     return React.createElement(Portal, {
       destroyable: true,
       open: notifications.size > 0,
-      key: placement,
-      lockable: false
+      key: placement
     }, React.createElement("div", {
       className: styled.className,
       style: styled.style

package/dist/components/notification/notification.js

@@ -1,4 +1,4 @@
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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.js';
 import React, { useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
 import { useTheme } from '../theme/hooks.js';
@@ -52,7 +52,7 @@ const styles = {
       transitionDuration: "musae-13dflua",
       transform: "musae-1v0jg1i",
       opacity: "musae-g01cxk",
-      marginTop: "musae-1q12cbh",
+      marginTop: "musae-dj266r",
       display: "musae-rvj5dj",
       gap: "musae-vbka3v",
       rowGap: null,
@@ -172,7 +172,7 @@ const Notification = ({
   const [scope, animate] = useAnimate();
   const _placement = PLACEMENTS[direction];
   const classNames = useClassNames(ComponentToken.Notification);
-  // after duration, `Notification` will auto destory
+  // after duration, `Notification` will auto destroy
   useTimeout(async () => {
     await animate(scope.current, {
       opacity: 0,

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

@@ -67,7 +67,7 @@ const OtpInput = ({
       className: styled.input.className,
       style: {
         ...styled.input.style,
-        minWidth: "unset"
+        minWidth: 0
       },
       ref: inputRef => {
         inputRefs.current[index] = inputRef;

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

@@ -5,11 +5,11 @@ import { type PaginationItems } from "./types";
  * @description
  * use pagination
  */
-export declare const usePagiantion: ({ total, siblings, boundaries, ...props }: {
+export declare const usePagiantion: ({ total, siblings, boundaries, pageSize: _pageSize, }: {
     total: number;
     siblings: number;
     boundaries: number;
-    pageSize: number;
+    pageSize?: number;
 }) => {
     paginationItems: PaginationItems;
     add: (step?: number) => void;
@@ -18,4 +18,6 @@ export declare const usePagiantion: ({ total, siblings, boundaries, ...props }:
     page: number;
     hasPrev: boolean;
     hasNext: boolean;
+    pageSize: number;
+    onPageSizeChange: (pageSize: number) => void;
 };

package/dist/components/pagination/hooks.js

@@ -1,4 +1,4 @@
-import { useCounter, range, clamp } from '@aiszlab/relax';
+import { useControlledState, useCounter, range, clamp } from '@aiszlab/relax';
 import { useMemo } from 'react';
 import { PaginationItemType } from './types.js';
 
@@ -8,9 +8,9 @@ import { PaginationItemType } from './types.js';
  * @description
  * use pagination
  */
-const usePagiantion = ({ total, siblings, boundaries, ...props }) => {
-    const pageSize = props.pageSize;
-    const pages = Math.ceil(total / pageSize);
+const usePagiantion = ({ total, siblings, boundaries, pageSize: _pageSize, }) => {
+    const [pageSize, setPageSize] = useControlledState(_pageSize, { defaultState: 10 });
+    const pages = useMemo(() => Math.ceil(total / Math.max(1, pageSize)), [total, pageSize]);
     const [page, { add, subtract, setCount }] = useCounter(1, {
         min: 1,
         max: pages,
@@ -40,6 +40,9 @@ const usePagiantion = ({ total, siblings, boundaries, ...props }) => {
     const hasPrev = page > 1;
     // whether next button is usable
     const hasNext = page < pages;
+    const onPageSizeChange = (pageSize) => {
+        setPageSize(pageSize);
+    };
     return {
         paginationItems,
         add,
@@ -48,6 +51,8 @@ const usePagiantion = ({ total, siblings, boundaries, ...props }) => {
         page,
         hasPrev,
         hasNext,
+        pageSize,
+        onPageSizeChange,
     };
 };
 

package/dist/components/pagination/item.js

@@ -37,10 +37,7 @@ const Item = ({
   if (value === PaginationItemType.MorePrev || value === PaginationItemType.MoreNext) {
     const styled = {
       more: {
-        className: "musae-1pqvcko musae-13amitz"
-      },
-      hidden: {
-        className: "musae-1s85apg"
+        className: "musae-1aldg33 musae-1oew0n0"
       }
     };
     const isNegative = value === PaginationItemType.MorePrev;
@@ -51,11 +48,12 @@ const Item = ({
       className: styled.more.className,
       style: styled.more.style,
       onClick: () => {
-        isNegative ? add(5) : subtract(5);
+        isNegative ? subtract(5) : add(5);
       }
-    }, React.createElement(MoreHoriz, null), createElement(isNegative ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
-      className: styled.hidden.className,
-      style: styled.hidden.style
+    }, React.createElement(MoreHoriz, {
+      role: "separator"
+    }), createElement(isNegative ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
+      role: "button"
     }));
   }
   return React.createElement(Button, {

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PagiantionProps } from "./types";
-declare const Pagination: ({ total, siblings, boundaries, pageSize }: PagiantionProps) => React.JSX.Element;
+declare const Pagination: ({ total, siblings, boundaries, pageSize: _pageSize, pageSizes, }: PagiantionProps) => React.JSX.Element;
 export default Pagination;