@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/navigation/dropdown-menu.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { type MenuItemRenderProps, type PopoverProps, type PopoverRenderProps } from "react-aria-components";
+import type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
+export type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
 /**
  * Dịch trạng thái item của RAC sang bộ `data-*` mà Radix phát ra và CSS của kho đang bám.
  *
@@ -98,7 +100,17 @@ type DropdownMenuSubProps = React.PropsWithChildren<DropdownMenuSubPropsOwn>;
  * popover — nên thứ tự `<SubTrigger/>` rồi `<SubContent/>` của Radix ánh xạ thẳng.
  */
 export declare function DropdownMenuSub({ children }: DropdownMenuSubProps): React.JSX.Element;
+/**
+ * Width axis of the menu surface (gh#396) — the vocabulary `Select` already publishes, extended to
+ * the one member of the family that never got it. `"trigger"` matches the anchor, `"auto"` releases
+ * the floor and shrinks to the content, and `sm | md | lg` select the `--menu-content-width-*`
+ * ladder. Unset = today's `--dropdown-content-min-width`, so nothing moves.
+ */
+type DropdownMenuContentWidth = "trigger" | "auto" | "sm" | "md" | "lg";
 interface DropdownMenuContentPropsOwn {
+    placement?: DropdownMenuPlacementProp;
+    arrow?: boolean;
+    width?: DropdownMenuContentWidth;
     className?: string;
     side?: "top" | "right" | "bottom" | "left";
     align?: "start" | "center" | "end";
@@ -125,7 +137,7 @@ type DropdownMenuContentProps = React.PropsWithChildren<DropdownMenuContentProps
  * NGAY ở ý định đóng: đúng lớp lỗi gh#385, đã sửa ở thượng nguồn. Phép đo là
  * `src/components/__tests__/overlay-inert-release-385.test.tsx`.
  */
-export declare function DropdownMenuContent({ children, className, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, loop, hideWhenDetached, sticky, forceMount, }: DropdownMenuContentProps): React.JSX.Element;
+export declare function DropdownMenuContent({ children, className, side, align, sideOffset, placement, arrow, width, alignOffset, avoidCollisions, collisionPadding, loop, hideWhenDetached, sticky, forceMount, }: DropdownMenuContentProps): React.JSX.Element;
 interface DropdownMenuItemPropsOwn {
     className?: string;
     inset?: boolean;
@@ -150,6 +162,17 @@ type DropdownMenuLabelProps = React.PropsWithChildren<DropdownMenuLabelPropsOwn>
  *
  * `Header` không đi qua `useRenderProps`, nên `props.children` trong `render` CHÍNH là children của
  * consumer — không có `Provider` chen vào như ở `MenuItem`. `Slot` vì thế nhận thẳng gói props.
+ *
+ * NHƯNG PHẢI RENDER RA `<div>`, KHÔNG PHẢI `<header>`. `<header>` mang vai trò ngầm `banner`, và
+ * `banner` không nằm trong danh sách con hợp lệ của `role="menu"` (axe: aria-required-children,
+ * ARIA 1.2 — menu chỉ nhận menuitem / menuitemcheckbox / menuitemradio / group / separator). Radix
+ * dựng `<div>`, vai trò `generic`, nên nó không bao giờ vấp lỗi này.
+ *
+ * `Header` vẫn được dùng chứ không thay bằng `<div>` trần: bộ dựng collection của RAC chỉ nhận các
+ * nút nó biết, một phần tử lạ đặt thẳng trong `Menu` sẽ bị nó bỏ. Nên giữ nút, đổi thẻ.
+ *
+ * Lỗi này ẩn suốt vì helper a11y dùng chung soi container của lần render, còn menu thì portal ra
+ * `document.body` — phép kiểm mang tên "open, fully-composed menu" thực chất soi một hộp rỗng.
  */
 export declare function DropdownMenuLabel({ children, className, inset, asChild }: DropdownMenuLabelProps): React.JSX.Element;
 interface DropdownMenuSeparatorProps {
@@ -166,6 +189,12 @@ interface DropdownMenuCheckboxItemPropsOwn {
     asChild?: boolean;
 }
 type DropdownMenuCheckboxItemProps = React.PropsWithChildren<DropdownMenuCheckboxItemPropsOwn>;
+/**
+ * Ở Radix mỗi CheckboxItem tự giữ `checked`. Ở RAC không có `isSelected` trên item: `aria-checked`
+ * và `role="menuitemcheckbox"` chỉ xuất hiện khi collection BAO QUANH khai báo `selectionMode`.
+ * Nên mỗi hàng độc lập được bọc trong một `MenuSection` một-phần-tử — đó là cái giá để giữ đúng
+ * vai trò ARIA mà consumer đang test.
+ */
 export declare function DropdownMenuCheckboxItem({ children, className, checked, onCheckedChange, disabled, textValue, asChild, }: DropdownMenuCheckboxItemProps): React.JSX.Element;
 interface DropdownMenuRadioItemPropsOwn {
     className?: string;
@@ -202,4 +231,3 @@ interface DropdownMenuSubContentPropsOwn {
 type DropdownMenuSubContentProps = React.PropsWithChildren<DropdownMenuSubContentPropsOwn>;
 export declare function DropdownMenuSubContent({ children, className, align, alignOffset, sideOffset, avoidCollisions, collisionPadding, loop, forceMount, hideWhenDetached, sticky, }: DropdownMenuSubContentProps): React.JSX.Element;
 export declare const DropdownMenuShortcut: ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => React.JSX.Element;
-export {};

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

@@ -1,8 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import {
   Header,
+  Button as AriaButton,
   Menu,
   MenuItem,
   MenuSection,
@@ -11,11 +13,20 @@ import {
   Popover,
   Pressable,
   Separator,
+  OverlayArrow,
   SubmenuTrigger
 } from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 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;
 }
@@ -69,7 +80,16 @@ function DropdownMenuTrigger({ asChild, children, ...props }) {
       "data-state": dataState
     }) });
   }
-  return /* @__PURE__ */ jsx(Pressable, { children: /* @__PURE__ */ jsx("button", { type: "button", "data-slot": "dropdown-menu-trigger", "data-state": dataState, ...props, children }) });
+  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 });
@@ -110,6 +130,9 @@ function DropdownMenuContent({
   side,
   align,
   sideOffset = 4,
+  placement,
+  arrow,
+  width,
   alignOffset,
   avoidCollisions,
   collisionPadding,
@@ -122,12 +145,15 @@ function DropdownMenuContent({
   void sticky;
   void forceMount;
   const { modal } = React.useContext(DropdownMenuModalContext);
-  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+  const anchor = placement ? DROPDOWN_MENU_PLACEMENT[placement] : void 0;
+  const overlayPortalContainer = useOverlayPortalContainer();
+  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
     Popover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       "data-slot": "dropdown-menu-content",
       isNonModal: !modal,
-      placement: toPlacement(side, align),
+      placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
       offset: sideOffset,
       crossOffset: alignOffset,
       shouldFlip: avoidCollisions,
@@ -138,9 +164,30 @@ function DropdownMenuContent({
       ),
       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) })
+        /* @__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 })
+      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
+      ]
     }
   ) });
 }
@@ -195,7 +242,12 @@ function DropdownMenuLabel({ children, className, inset, asChild }) {
         {
           ...props
         }
-      ) : void 0,
+      ) : (props) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props
+        }
+      ),
       children
     }
   );
@@ -209,7 +261,6 @@ function DropdownMenuSeparator({ className }) {
     }
   );
 }
-const CHECKBOX_KEY = "checked-item";
 function DropdownMenuCheckboxItem({
   children,
   className,
@@ -219,20 +270,21 @@ function DropdownMenuCheckboxItem({
   textValue,
   asChild
 }) {
+  const checkboxKey = React.useId();
   const tag = borrowedTag(children, asChild);
   return /* @__PURE__ */ jsx(
     MenuSection,
     {
       selectionMode: "multiple",
       shouldCloseOnSelect: true,
-      selectedKeys: checked ? [CHECKBOX_KEY] : [],
+      selectedKeys: checked ? [checkboxKey] : [],
       onSelectionChange: (keys) => {
-        onCheckedChange?.(keys === "all" ? true : keys.has(CHECKBOX_KEY));
+        onCheckedChange?.(keys === "all" ? true : keys.has(checkboxKey));
       },
       children: /* @__PURE__ */ jsx(
         MenuItem,
         {
-          id: CHECKBOX_KEY,
+          id: checkboxKey,
           isDisabled: disabled,
           textValue,
           className: cn("ui-dropdown-menu-checkbox-item", className),
@@ -335,9 +387,11 @@ function DropdownMenuSubContent({
   void forceMount;
   void hideWhenDetached;
   void sticky;
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     Popover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       "data-slot": "dropdown-menu-sub-content",
       placement: align ? toPlacement("right", align) : void 0,
       offset: sideOffset,
@@ -350,7 +404,15 @@ function DropdownMenuSubContent({
       ),
       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) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            role: void 0,
+            ...radixSurfaceState(state),
+            "data-align": align ?? "center"
+          }
+        )
       ),
       children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
     }

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, };

package/dist/components/navigation/pagination.js

@@ -3,9 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { useScrollableRegionTabIndex } from "../../lib/hooks.js";
+import { useIsMobile, useScrollableRegionTabIndex } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../general/button.js";
+import { Form } from "../data-entry/form.js";
+import { FormField } from "../data-entry/form-field.js";
+import { Input } from "../data-entry/input.js";
 import {
   Select,
   SelectContent,
@@ -110,19 +113,33 @@ function Pagination({
   showTotal,
   hideOnSinglePage = true,
   simple,
+  showQuickJumper,
+  size = "md",
+  align = "end",
+  responsive = true,
   disabled,
   className,
   onValueChange
 }) {
   const { t } = useTranslation();
+  const jumperId = React.useId();
+  const [jumperDraft, setJumperDraft] = React.useState("");
+  const isNarrowViewport = useIsMobile();
   const navLabel = ariaLabel ?? t("navigation.pagination.ariaLabel");
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const safeCurrent = Math.min(Math.max(1, value), totalPages);
   const pages = buildPageRange(safeCurrent, totalPages);
-  const go = (page, size = pageSize) => {
+  const compact = Boolean(simple) || responsive && isNarrowViewport;
+  const go = (page, size2 = pageSize) => {
     if (disabled) return;
-    const nextPage = Math.min(Math.max(1, page), Math.max(1, Math.ceil(total / size)));
-    onValueChange?.(nextPage, size);
+    const nextPage = Math.min(Math.max(1, page), Math.max(1, Math.ceil(total / size2)));
+    onValueChange?.(nextPage, size2);
+  };
+  const commitJump = () => {
+    const parsed = Number.parseInt(jumperDraft, 10);
+    setJumperDraft("");
+    if (!Number.isFinite(parsed)) return;
+    go(parsed);
   };
   const totalLabel = typeof showTotal === "function" ? showTotal(total, [
     total === 0 ? 0 : (safeCurrent - 1) * pageSize + 1,
@@ -130,96 +147,151 @@ function Pagination({
   ]) : showTotal ? t("navigation.pagination.total", { total }) : null;
   if (total <= 0) return null;
   if (hideOnSinglePage && totalPages <= 1) return null;
-  if (simple) {
-    return /* @__PURE__ */ jsxs("nav", { "aria-label": navLabel, "data-simple": "true", className: cn("ui-pagination", className), children: [
-      totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          disabled: Boolean(disabled) || safeCurrent <= 1,
-          "aria-label": t("navigation.pagination.prev"),
-          onClick: () => go(safeCurrent - 1),
-          children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "ui-pagination-count", children: [
-        safeCurrent,
-        " / ",
-        totalPages
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          disabled: Boolean(disabled) || safeCurrent >= totalPages,
-          "aria-label": t("navigation.pagination.next"),
-          onClick: () => go(safeCurrent + 1),
-          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": navLabel, className: cn("ui-pagination", className), children: [
-    totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
-    showSizeChanger && /* @__PURE__ */ jsxs(
-      Select,
+  const goButton = showQuickJumper && typeof showQuickJumper === "object" ? showQuickJumper.goButton : void 0;
+  const quickJumper = showQuickJumper ? /* @__PURE__ */ jsxs("div", { className: "ui-pagination-jumper", "data-slot": "pagination-jumper", children: [
+    /* @__PURE__ */ jsx(Form, { asChild: true, layout: "horizontal", collapseBelow: false, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      FormField,
+      {
+        id: jumperId,
+        label: t("navigation.pagination.jumpTo"),
+        layout: "horizontal",
+        labelWidth: "auto",
+        controlWidth: "auto",
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: jumperId,
+            size,
+            type: "number",
+            inputMode: "numeric",
+            min: 1,
+            max: totalPages,
+            disabled,
+            className: "ui-pagination-jumper-input w-[var(--pagination-jumper-width)]",
+            value: jumperDraft,
+            onChange: (event) => setJumperDraft(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key !== "Enter") return;
+              event.preventDefault();
+              commitJump();
+            }
+          }
+        )
+      }
+    ) }) }),
+    goButton ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled, onClick: commitJump, children: goButton }) : null
+  ] }) : null;
+  if (compact) {
+    return /* @__PURE__ */ jsxs(
+      "nav",
       {
-        value: String(pageSize),
-        onValueChange: (v) => go(1, Number(v)),
-        disabled,
+        "aria-label": navLabel,
+        "data-simple": "true",
+        "data-size": size,
+        "data-align": align,
+        className: cn("ui-pagination", className),
         children: [
+          totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
           /* @__PURE__ */ jsx(
-            SelectTrigger,
+            Button,
             {
-              className: "ui-pagination-size-trigger w-max min-w-[var(--pagination-size-width)]",
-              "aria-label": t("navigation.pagination.pageSize"),
-              children: /* @__PURE__ */ jsx(SelectValue, { children: t("navigation.pagination.pageSizeTrigger", { size: pageSize }) })
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled: Boolean(disabled) || safeCurrent <= 1,
+              "aria-label": t("navigation.pagination.prev"),
+              onClick: () => go(safeCurrent - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+          /* @__PURE__ */ jsxs("span", { className: "ui-pagination-count", children: [
+            safeCurrent,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled: Boolean(disabled) || safeCurrent >= totalPages,
+              "aria-label": t("navigation.pagination.next"),
+              onClick: () => go(safeCurrent + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+            }
+          ),
+          quickJumper
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs(PaginationContent, { children: [
-      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-        PaginationPrevious,
-        {
-          "aria-label": t("navigation.pagination.prev"),
-          onClick: () => go(safeCurrent - 1),
-          disabled: Boolean(disabled) || safeCurrent <= 1,
-          children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
-        }
-      ) }),
-      pages.map(
-        (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `e-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-          PaginationLink,
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": navLabel,
+      "data-size": size,
+      "data-align": align,
+      className: cn("ui-pagination", className),
+      children: [
+        totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
+        showSizeChanger && /* @__PURE__ */ jsxs(
+          Select,
           {
-            isActive: page === safeCurrent,
-            "aria-label": t("navigation.pagination.page", { page }),
-            onClick: () => {
-              if (!disabled) go(page);
-            },
+            value: String(pageSize),
+            onValueChange: (v) => go(1, Number(v)),
             disabled,
-            children: page
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  className: "ui-pagination-size-trigger w-max min-w-[var(--pagination-size-width)]",
+                  "aria-label": t("navigation.pagination.pageSize"),
+                  children: /* @__PURE__ */ jsx(SelectValue, { children: t("navigation.pagination.pageSizeTrigger", { size: pageSize }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: option }, option)) })
+            ]
           }
-        ) }, page)
-      ),
-      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-        PaginationNext,
-        {
-          "aria-label": t("navigation.pagination.next"),
-          onClick: () => go(safeCurrent + 1),
-          disabled: Boolean(disabled) || safeCurrent >= totalPages,
-          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
-        }
-      ) })
-    ] })
-  ] });
+        ),
+        /* @__PURE__ */ jsxs(PaginationContent, { children: [
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationPrevious,
+            {
+              "aria-label": t("navigation.pagination.prev"),
+              onClick: () => go(safeCurrent - 1),
+              disabled: Boolean(disabled) || safeCurrent <= 1,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+            }
+          ) }),
+          pages.map(
+            (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `e-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLink,
+              {
+                isActive: page === safeCurrent,
+                "aria-label": t("navigation.pagination.page", { page }),
+                onClick: () => {
+                  if (!disabled) go(page);
+                },
+                disabled,
+                children: page
+              }
+            ) }, page)
+          ),
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationNext,
+            {
+              "aria-label": t("navigation.pagination.next"),
+              onClick: () => go(safeCurrent + 1),
+              disabled: Boolean(disabled) || safeCurrent >= totalPages,
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
+        quickJumper
+      ]
+    }
+  );
 }
 export {
   Pagination,

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { StepsProp } from "../../props/components/navigation.prop.js";
-export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, } from "../../props/components/navigation.prop.js";
-export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, onValueChange, className, }: StepsProp): React.JSX.Element;
+export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, StepsTypeProp, } from "../../props/components/navigation.prop.js";
+export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, percent, onValueChange, className, }: StepsProp): React.JSX.Element;

package/dist/components/navigation/steps.js

@@ -4,6 +4,10 @@ import { ArrowRight, Check, ChevronRight, Circle, Loader2, X } from "lucide-reac
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconClass } from "../../lib/control-styles.js";
+function boundStepPercent(percent) {
+  if (!Number.isFinite(percent)) return 0;
+  return Math.min(100, Math.max(0, percent));
+}
 function resolveStepStatus(index, current, itemStatus, currentStatus) {
   if (itemStatus) return itemStatus;
   if (index < current) return "finish";
@@ -44,6 +48,7 @@ function Steps({
   size = "md",
   titlePlacement = "horizontal",
   separator = "chevron",
+  percent,
   onValueChange,
   className
 }) {
@@ -52,11 +57,16 @@ function Steps({
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
   const inline = type === "inline";
+  const navigation = type === "navigation";
   const SeparatorIcon = separator === "arrow" ? ArrowRight : ChevronRight;
+  const showPercent = percent !== void 0 && !inline;
+  const boundedPercent = boundStepPercent(percent ?? 0);
+  const progressRatio = boundedPercent / 100;
   return /* @__PURE__ */ jsx(
     "ol",
     {
       "data-direction": inline ? void 0 : isVertical ? "vertical" : "horizontal",
+      "data-type": type,
       className: cn("flex w-full", inline ? "ui-steps-inline" : "ui-steps-list", className),
       "aria-label": t("navigation.steps.ariaLabel"),
       children: items.map((item, index) => {
@@ -80,7 +90,19 @@ function Steps({
           /* @__PURE__ */ jsx("span", { className: "ui-steps-inline-title", children: item.title }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
+          showPercent && absoluteIndex === current ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-steps-progress",
+              role: "progressbar",
+              "aria-valuenow": boundedPercent,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-label": t("navigation.steps.percentLabel"),
+              style: { "--steps-progress-ratio": progressRatio },
+              children: /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type })
+            }
+          ) : /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
           /* @__PURE__ */ jsxs("div", { className: "ui-steps-text", children: [
             /* @__PURE__ */ jsx(
               "div",
@@ -101,7 +123,7 @@ function Steps({
             "aria-current": isCurrent ? "step" : void 0,
             "data-direction": inline ? void 0 : isVertical ? "vertical" : "horizontal",
             "data-title-placement": titlePlacement,
-            "data-connector": !isVertical && !inline && index < items.length - 1 ? "" : void 0,
+            "data-connector": !isVertical && !inline && !navigation && index < items.length - 1 ? "" : void 0,
             className: cn(!inline && "flex-1", inline ? "ui-steps-inline-item" : "ui-steps-item"),
             "data-status": stepStatus,
             children: [
@@ -116,10 +138,13 @@ function Steps({
                   children: stepInner
                 }
               ) : /* @__PURE__ */ jsx("span", { "data-direction": stepDirection, className: stepClassName, children: stepInner }),
-              inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
+              (inline || navigation && !isVertical) && index < items.length - 1 ? /* @__PURE__ */ jsx(
                 SeparatorIcon,
                 {
-                  className: "ui-steps-inline-separator rtl:rotate-180",
+                  className: cn(
+                    inline ? "ui-steps-inline-separator" : "ui-steps-nav-separator",
+                    "rtl:rotate-180"
+                  ),
                   "aria-hidden": "true"
                 }
               ) : null