@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/navigation/dropdown-menu.js

@@ -1,138 +1,418 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  Header,
+  Button as AriaButton,
+  Menu,
+  MenuItem,
+  MenuSection,
+  MenuTrigger,
+  OverlayTriggerStateContext,
+  Popover,
+  Pressable,
+  Separator,
+  OverlayArrow,
+  SubmenuTrigger
+} from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { useInertHiddenBackground } from "../general/inert-background.js";
-function DropdownMenu(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+import { Slot } from "../../lib/slot.js";
+const DROPDOWN_MENU_PLACEMENT = {
+  top: { side: "top", align: "center" },
+  topStart: { side: "top", align: "start" },
+  topEnd: { side: "top", align: "end" },
+  bottom: { side: "bottom", align: "center" },
+  bottomStart: { side: "bottom", align: "start" },
+  bottomEnd: { side: "bottom", align: "end" }
+};
+function borrowedTag(children, asChild) {
+  return asChild ? React.Children.only(children) : null;
+}
+function renderItemTag(tag, domProps, content) {
+  if (!tag) {
+    return /* @__PURE__ */ jsx("div", { ...domProps, children: content });
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...domProps, children: React.cloneElement(tag, void 0, content) });
 }
-function DropdownMenuTrigger(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+function radixItemState(state) {
+  return {
+    "data-highlighted": state.isFocused ? "" : void 0,
+    "data-disabled": state.isDisabled ? "" : void 0,
+    "data-state": state.hasSubmenu ? state.isOpen ? "open" : "closed" : state.selectionMode === "none" ? void 0 : state.isSelected ? "checked" : "unchecked"
+  };
 }
-function DropdownMenuPortal(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+function radixSurfaceState(state) {
+  return {
+    "data-state": state.isExiting ? "closed" : "open",
+    "data-side": state.placement && state.placement !== "center" ? state.placement : void 0
+  };
 }
-function DropdownMenuGroup(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+function toPlacement(side, align) {
+  const resolvedSide = side ?? "bottom";
+  if (!align || align === "center") return resolvedSide;
+  return `${resolvedSide} ${align}`;
 }
-function DropdownMenuRadioGroup(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+function selectEvent(name) {
+  return typeof CustomEvent === "function" ? new CustomEvent(name, { bubbles: false, cancelable: true }) : { defaultPrevented: false, preventDefault() {
+  } };
 }
-function DropdownMenuSub(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+const DropdownMenuModalContext = React.createContext({ modal: true });
+function DropdownMenu({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+  dir
+}) {
+  void dir;
+  const options = React.useMemo(() => ({ modal }), [modal]);
+  return /* @__PURE__ */ jsx(DropdownMenuModalContext.Provider, { value: options, children: /* @__PURE__ */ jsx(MenuTrigger, { isOpen: open, defaultOpen, onOpenChange, children }) });
 }
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
-  const contentRef = useInertHiddenBackground(ref);
-  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Content,
+function DropdownMenuTrigger({ asChild, children, ...props }) {
+  const state = React.useContext(OverlayTriggerStateContext);
+  const dataState = state?.isOpen ? "open" : "closed";
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(Pressable, { children: React.cloneElement(children, {
+      "data-slot": "dropdown-menu-trigger",
+      "data-state": dataState
+    }) });
+  }
+  return /* @__PURE__ */ jsx(
+    AriaButton,
+    {
+      ...props,
+      isDisabled: props.disabled,
+      "data-slot": "dropdown-menu-trigger",
+      "data-state": dataState,
+      children
+    }
+  );
+}
+function DropdownMenuPortal({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function DropdownMenuGroup({ children, className }) {
+  return /* @__PURE__ */ jsx(MenuSection, { "data-slot": "dropdown-menu-group", className, children });
+}
+function DropdownMenuRadioGroup({
+  children,
+  className,
+  value,
+  onValueChange
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuSection,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      className,
+      selectionMode: "single",
+      disallowEmptySelection: true,
+      selectedKeys: value == null ? [] : [value],
+      onSelectionChange: (keys) => {
+        if (keys === "all") return;
+        const [first] = [...keys];
+        if (first != null) onValueChange?.(String(first));
+      },
+      children
+    }
+  );
+}
+function DropdownMenuSub({ children }) {
+  const parts = React.Children.toArray(children).filter(React.isValidElement);
+  return /* @__PURE__ */ jsx(SubmenuTrigger, { children: parts });
+}
+function DropdownMenuContent({
+  children,
+  className,
+  side,
+  align,
+  sideOffset = 4,
+  placement,
+  arrow,
+  width,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  loop,
+  hideWhenDetached,
+  sticky,
+  forceMount
+}) {
+  void hideWhenDetached;
+  void sticky;
+  void forceMount;
+  const { modal } = React.useContext(DropdownMenuModalContext);
+  const anchor = placement ? DROPDOWN_MENU_PLACEMENT[placement] : void 0;
+  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
+    Popover,
     {
-      ref: contentRef,
       "data-slot": "dropdown-menu-content",
-      sideOffset,
+      isNonModal: !modal,
+      placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: collisionPadding,
       className: cn(
-        "ui-dropdown-menu-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
+        "ui-dropdown-menu-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--trigger-anchor-point)]",
         className
       ),
-      ...props
+      render: (props, state) => (
+        // `role={undefined}`: một menu không phải một dialog — xem radixSurfaceState.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            role: void 0,
+            ...radixSurfaceState(state),
+            "data-align": align ?? anchor?.align ?? "center",
+            "data-width": width
+          }
+        )
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children }),
+        arrow ? /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "data-slot": "dropdown-menu-arrow",
+            className: "ui-dropdown-menu-arrow",
+            viewBox: "0 0 10 5",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M0 0 L5 5 L10 0 Z" })
+          }
+        ) }) : null
+      ]
     }
   ) });
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    "data-slot": "dropdown-menu-item",
-    "data-inset": inset,
-    "data-variant": variant,
-    className: cn(
-      "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    "data-slot": "dropdown-menu-label",
-    "data-inset": inset,
-    className: cn("ui-dropdown-menu-label", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    "data-slot": "dropdown-menu-separator",
-    className: cn("ui-dropdown-menu-separator", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-checkbox-item",
-    className: cn("ui-dropdown-menu-checkbox-item", className),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "ui-dropdown-menu-indicator-slot", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "ui-dropdown-menu-check", "aria-hidden": "true" }) }) }),
+}
+function DropdownMenuItem({
+  children,
+  className,
+  inset,
+  variant = "default",
+  disabled,
+  onSelect,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      isDisabled: disabled,
+      textValue,
+      onAction: onSelect ? () => onSelect(selectEvent("dropdownmenu.itemSelect")) : void 0,
+      className: cn(
+        "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      render: (props, state) => {
+        const { children: content, ...rest } = props;
+        return renderItemTag(
+          tag,
+          {
+            ...rest,
+            "data-slot": "dropdown-menu-item",
+            "data-inset": inset,
+            "data-variant": variant,
+            ...radixItemState(state)
+          },
+          content
+        );
+      },
+      children: tag ? tag.props.children : children
+    }
+  );
+}
+function DropdownMenuLabel({ children, className, inset, asChild }) {
+  return /* @__PURE__ */ jsx(
+    Header,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("ui-dropdown-menu-label", className),
+      render: asChild ? (props) => /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ...props
+        }
+      ) : (props) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props
+        }
+      ),
       children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-radio-item",
-    className: cn("ui-dropdown-menu-radio-item", className),
-    ...props,
-    children
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-trigger",
-    "data-inset": inset,
-    className: cn(
-      "ui-dropdown-menu-sub-trigger [&_svg:not([class*='text-'])]:text-muted-foreground",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ui-dropdown-menu-sub-trigger-icon", "aria-hidden": "true" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-content",
-    className: cn(
-      "ui-dropdown-menu-sub-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+    }
+  );
+}
+function DropdownMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("ui-dropdown-menu-separator", className)
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  children,
+  className,
+  checked,
+  onCheckedChange,
+  disabled,
+  textValue,
+  asChild
+}) {
+  const checkboxKey = React.useId();
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuSection,
+    {
+      selectionMode: "multiple",
+      shouldCloseOnSelect: true,
+      selectedKeys: checked ? [checkboxKey] : [],
+      onSelectionChange: (keys) => {
+        onCheckedChange?.(keys === "all" ? true : keys.has(checkboxKey));
+      },
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          id: checkboxKey,
+          isDisabled: disabled,
+          textValue,
+          className: cn("ui-dropdown-menu-checkbox-item", className),
+          render: (props, state) => {
+            const { children: content, ...rest } = props;
+            return renderItemTag(
+              tag,
+              { ...rest, "data-slot": "dropdown-menu-checkbox-item", ...radixItemState(state) },
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "ui-dropdown-menu-indicator-slot", children: state.isSelected ? /* @__PURE__ */ jsx(Check, { className: "ui-dropdown-menu-check", "aria-hidden": "true" }) : null }),
+                content
+              ] })
+            );
+          },
+          children: tag ? tag.props.children : children
+        }
+      )
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  children,
+  className,
+  value,
+  disabled,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      id: value,
+      isDisabled: disabled,
+      textValue,
+      className: cn("ui-dropdown-menu-radio-item", className),
+      render: (props, state) => {
+        const { children: content, ...rest } = props;
+        return renderItemTag(
+          tag,
+          { ...rest, "data-slot": "dropdown-menu-radio-item", ...radixItemState(state) },
+          content
+        );
+      },
+      children: tag ? tag.props.children : children
+    }
+  );
+}
+function DropdownMenuSubTrigger({
+  children,
+  className,
+  inset,
+  disabled,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      isDisabled: disabled,
+      textValue,
+      className: cn(
+        "ui-dropdown-menu-sub-trigger [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      render: (props, state) => {
+        const { children: content, ...rest } = props;
+        return renderItemTag(
+          tag,
+          {
+            ...rest,
+            "data-slot": "dropdown-menu-sub-trigger",
+            "data-inset": inset,
+            ...radixItemState(state)
+          },
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            content,
+            /* @__PURE__ */ jsx(ChevronRight, { className: "ui-dropdown-menu-sub-trigger-icon", "aria-hidden": "true" })
+          ] })
+        );
+      },
+      children: tag ? tag.props.children : children
+    }
+  );
+}
+function DropdownMenuSubContent({
+  children,
+  className,
+  align,
+  alignOffset,
+  sideOffset,
+  avoidCollisions,
+  collisionPadding,
+  loop,
+  forceMount,
+  hideWhenDetached,
+  sticky
+}) {
+  void forceMount;
+  void hideWhenDetached;
+  void sticky;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      placement: align ? toPlacement("right", align) : void 0,
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: collisionPadding,
+      className: cn(
+        "ui-dropdown-menu-sub-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--trigger-anchor-point)]",
+        className
+      ),
+      render: (props, state) => (
+        // `role={undefined}`: một menu không phải một dialog — xem radixSurfaceState.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            role: void 0,
+            ...radixSurfaceState(state),
+            "data-align": align ?? "center"
+          }
+        )
+      ),
+      children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
+    }
+  );
+}
 const DropdownMenuShortcut = ({
   className,
   ...props
@@ -159,5 +439,9 @@ export {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
+  radixItemState,
+  radixSurfaceState,
+  selectEvent,
+  toPlacement
 };

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

@@ -8,5 +8,7 @@ export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.j
 export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
+export { AppSettingToggle } from "./app-setting-toggle.js";
+export type { AppSettingToggleProp, AppSettingToggleProps, AppSettingToggleKind, } from "./app-setting-toggle.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";

package/dist/components/navigation/index.js

@@ -53,6 +53,7 @@ import {
 import { Steps } from "./steps.js";
 import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
+import { AppSettingToggle } from "./app-setting-toggle.js";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -72,6 +73,7 @@ import {
 } from "./dropdown-menu.js";
 export {
   AppSettingPicker,
+  AppSettingToggle,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,

package/dist/components/navigation/pagination-utils.d.ts

@@ -1,5 +1,6 @@
 /**
- * Build visible page numbers with ellipsis — Ant Design / MUI pagination style. The item count is
+ * Build visible page numbers with ellipsis — the conventional enterprise / MUI pagination style.
+ * The item count is
  * CONSTANT wherever the current page sits.
  */
 export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number, boundaryCount?: number): (number | "ellipsis")[];

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { PaginationProp } from "../../props/components/navigation.prop.js";
-export type { PaginationProp, PaginationProp as PaginationProps, } from "../../props/components/navigation.prop.js";
+export type { PaginationProp, PaginationProp as PaginationProps, PaginationSizeProp, PaginationAlignProp, } from "../../props/components/navigation.prop.js";
 declare const PaginationContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
 declare const PaginationItem: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
 declare const PaginationLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "type"> & {
@@ -22,5 +22,5 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, disabled, className, onValueChange, }: PaginationProp): React.JSX.Element | null;
+export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, showQuickJumper, size, align, responsive, disabled, className, onValueChange, }: PaginationProp): React.JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };