@godxjp/ui 17.0.1 → 18.0.0

package/dist/components/data-entry/upload.d.ts

@@ -3,4 +3,4 @@ export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadV
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, className, children, }: UploadProp): import("react/jsx-runtime").JSX.Element;
+export declare function Upload({ variant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-entry/upload.js

@@ -5,6 +5,7 @@ import { Camera, ImagePlus, RotateCcw, Trash2, Upload as UploadIcon, X } from "l
 import { useTranslation } from "../../i18n/use-translation.js";
 import { formatBytes } from "../../lib/format.js";
 import { cn } from "../../lib/utils.js";
+import { resolveFieldA11y } from "../../lib/field-a11y.js";
 import { controlIconClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { UploadCropDialog } from "./upload-crop-dialog.js";
@@ -84,10 +85,13 @@ function Upload({
   disabled,
   removable = true,
   onUpload,
+  id,
   className,
-  children
+  children,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
+  const inputA11y = resolveFieldA11y(ariaProps, t("dataEntry.upload.inputLabel"));
   const accept = acceptProp ?? defaultAcceptForVariant(variant);
   const maxCount = maxCountProp ?? defaultMaxCount(variant);
   const multiple = multipleProp ?? (maxCount === 1 ? false : true);
@@ -144,12 +148,13 @@ function Upload({
     "input",
     {
       ref: inputRef,
+      id,
       type: "file",
       className: "sr-only",
       accept,
       multiple: multiple && !isSingleAvatar,
       disabled,
-      "aria-label": t("dataEntry.upload.inputLabel"),
+      ...inputA11y,
       onChange: (e) => {
         pickFiles(e.target.files);
         e.target.value = "";

package/dist/components/layout/app-shell.d.ts

@@ -1,3 +1,3 @@
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, }: AppShellProp): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/app-shell.js

@@ -1,6 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Menu } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { Button } from "../general/button.js";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
 function AppShell({
   sidebar,
   topbar,
@@ -10,9 +14,25 @@ function AppShell({
   breadcrumb,
   footer,
   children,
-  sidebarCollapsed = false
+  sidebarCollapsed = false,
+  mobileNav,
+  mobileNavLabel,
+  mobileNavOpen,
+  onMobileNavOpenChange
 }) {
   const { t } = useTranslation();
+  const drawerNav = mobileNav !== void 0 ? mobileNav : sidebar;
+  const hasDrawer = drawerNav != null;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
+  const setDrawerOpen = onMobileNavOpenChange ?? setUncontrolledOpen;
+  const handleDrawerClick = (event) => {
+    const target = event.target;
+    const hit = target.closest("a[href], button, [role='menuitem']");
+    if (hit && !hit.classList.contains("sb-nav-group-trigger")) {
+      setDrawerOpen(false);
+    }
+  };
   const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
     logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
@@ -21,7 +41,27 @@ function AppShell({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "app-root", "data-collapsed": sidebarCollapsed ? "true" : void 0, children: [
     /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar }),
-    /* @__PURE__ */ jsx("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: resolvedTopbar }),
+    /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
+      hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "app-mobile-nav-trigger",
+            "aria-label": t("layout.appShell.openNav"),
+            "aria-haspopup": "dialog",
+            children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "app-mobile-nav-drawer", children: [
+          /* @__PURE__ */ jsx(SheetHeader, { title: mobileNavLabel ?? t("layout.appShell.navLabel") }),
+          /* @__PURE__ */ jsx(SheetBody, { className: "app-mobile-nav-body", onClick: handleDrawerClick, children: drawerNav })
+        ] })
+      ] }),
+      resolvedTopbar
+    ] }),
     /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), children: [
       breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
       children

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

@@ -3,5 +3,11 @@ import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
     linkComponent?: ElementType;
+    /**
+     * Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb".
+     * Multiple Breadcrumb instances on one page/view need a DISTINCT name each — two `<nav>`
+     * landmarks sharing one name/role fail axe's `landmark-unique` (WCAG 2.4.1 / 1.3.1).
+     */
+    "aria-label"?: string;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ items, linkComponent: LinkComponent, "aria-label": ariaLabel, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/breadcrumb.js

@@ -2,9 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
-function Breadcrumb({ items, linkComponent: LinkComponent = "a" }) {
+function Breadcrumb({
+  items,
+  linkComponent: LinkComponent = "a",
+  "aria-label": ariaLabel
+}) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx("nav", { "aria-label": t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
       item.to && !isLast ? /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react/jsx-runtime").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
 function scrollParent(el) {
@@ -38,6 +39,7 @@ function PageContainerRoot({
   extra,
   footer,
   breadcrumb,
+  breadcrumbAriaLabel,
   linkComponent: LinkComponent = "a",
   density,
   variant = "default",
@@ -49,6 +51,7 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -66,28 +69,35 @@ function PageContainerRoot({
       ),
       children: [
         /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", children: [
-          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
-            const isLast = i === breadcrumb.length - 1;
-            return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
-              item.to && !isLast ? /* @__PURE__ */ jsx(
-                LinkComponent,
-                {
-                  href: item.to,
-                  to: item.to,
-                  className: "hover:text-foreground hover:underline",
-                  children: item.label
-                }
-              ) : /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: isLast ? "text-foreground" : "",
-                  "aria-current": isLast ? "page" : void 0,
-                  children: item.label
-                }
-              ),
-              !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
-            ] }, i);
-          }) }) }),
+          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
+              className: "ui-breadcrumb",
+              children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+                const isLast = i === breadcrumb.length - 1;
+                return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
+                  item.to && !isLast ? /* @__PURE__ */ jsx(
+                    LinkComponent,
+                    {
+                      href: item.to,
+                      to: item.to,
+                      className: "hover:text-foreground hover:underline",
+                      children: item.label
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: isLast ? "text-foreground" : "",
+                      "aria-current": isLast ? "page" : void 0,
+                      children: item.label
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
+                ] }, i);
+              }) })
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),

package/dist/components/layout/responsive-grid.js

@@ -14,7 +14,7 @@ function resolveColumns(columns) {
   };
 }
 function ResponsiveGrid({ columns = 4, children }) {
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: resolveColumns(columns), children });
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: resolveColumns(columns), children }) });
 }
 export {
   ResponsiveGrid

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

@@ -18,4 +18,4 @@ type SidebarItemProps = {
 export declare function SidebarHeader({ children, className, ...props }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarSection({ label, collapsed, children, className, ...props }: SidebarSectionProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarItem({ item, active, sub, onActivate, renderItem, children, ...props }: SidebarItemProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">): import("react/jsx-runtime").JSX.Element;
-export declare function Sidebar({ activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, renderItem, footer, }: SidebarProp): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/sidebar.js

@@ -1,6 +1,7 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { ChevronDown } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -34,25 +35,52 @@ function SidebarItem({
   const Icon = item.icon;
   const showBadge = item.badge !== void 0 && item.badge !== "";
   const disabled = item.disabled || props.disabled;
-  const content = children ?? (renderItem ? renderItem(item) : void 0);
-  return /* @__PURE__ */ jsx(
+  const custom = children ?? (renderItem ? renderItem(item) : void 0);
+  const rowClass = cn("sb-nav-item", sub && "sb-nav-item--sub");
+  const stateProps = {
+    className: rowClass,
+    "data-active": active ? "true" : void 0,
+    "aria-current": active ? "page" : void 0
+  };
+  if (custom !== void 0) {
+    return /* @__PURE__ */ jsx(Slot, { ...stateProps, "aria-disabled": disabled || void 0, children: custom });
+  }
+  if (item.href) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ...props,
+        href: disabled ? void 0 : item.href,
+        ...stateProps,
+        "aria-disabled": disabled || void 0,
+        onClick: (event) => {
+          if (disabled) event.preventDefault();
+          else onActivate?.(item.id);
+        },
+        children: [
+          !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
+          /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+          showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      className: cn("sb-nav-item", sub && "sb-nav-item--sub"),
-      "data-active": active ? "true" : void 0,
-      "aria-current": active ? "page" : void 0,
+      ...stateProps,
       "aria-disabled": disabled,
       ...props,
       onClick: () => {
         if (disabled) return;
         onActivate?.(item.id);
       },
-      children: content ? content : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: [
         !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
         /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
         showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
-      ] })
+      ]
     }
   );
 }
@@ -95,7 +123,11 @@ function NavGroup({ item, activeId, onSelect, renderItem }) {
   const Icon = item.icon;
   const active = isItemActive(item, activeId);
   const children = item.children ?? [];
-  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: active, className: "sb-nav-group", children: [
+  const [open, setOpen] = React.useState(active);
+  React.useEffect(() => {
+    if (active) setOpen(true);
+  }, [active]);
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, className: "sb-nav-group", children: [
     /* @__PURE__ */ jsxs(
       CollapsibleTrigger,
       {
@@ -186,7 +218,8 @@ function Sidebar({
   collapsed = false,
   children,
   renderItem,
-  footer
+  footer,
+  "aria-label": ariaLabel
 }) {
   const { t } = useTranslation();
   const resolvedSections = sections ?? [];
@@ -223,7 +256,7 @@ function Sidebar({
         meta
       ] });
     })() : null,
-    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": ariaLabel ?? t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
       SidebarSection,
       {
         label: section.label,

package/dist/components/layout/split-pane.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 function SplitPane({ children, aside, asideWidth = "md" }) {
-  return /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
+  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
     /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
     /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", children: aside })
-  ] });
+  ] }) });
 }
 export {
   SplitPane

package/dist/components/navigation/app-setting-picker.js

@@ -140,7 +140,14 @@ const AppSettingPicker = React.forwardRef(
                   // the density-aware --control-height tap target, centre the icon and hide the
                   // trailing chevron — no consumer descendant-selector overrides required.
                   "w-[length:var(--control-height)] justify-center ps-0 pe-0 [&_[data-slot=select-chevron]]:hidden"
-                ) : cn("w-full", TRIGGER_WIDTH[kind]),
+                ) : (
+                  // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
+                  // caps at the container (`w-auto max-w-full`) instead of the old UNCONDITIONAL
+                  // `w-full` — so a labeled picker dropped into a narrow topbar no longer stretches to
+                  // fill the bar (gh#165). A form field that wants a full-width control passes
+                  // `className="w-full"`, which wins over `w-auto`.
+                  cn("w-auto max-w-full", TRIGGER_WIDTH[kind])
+                ),
                 className
               ),
               "aria-label": t(ARIA_KEY[kind]),

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

@@ -22,5 +22,5 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function Pagination({ value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, simple, disabled, className, onValueChange, }: PaginationProp): import("react/jsx-runtime").JSX.Element | null;
+export declare function Pagination({ value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, disabled, className, onValueChange, "aria-label": ariaLabel, }: PaginationProp): import("react/jsx-runtime").JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };

package/dist/components/navigation/pagination.js

@@ -88,12 +88,15 @@ function Pagination({
   pageSizeOptions = [10, 20, 50, 100],
   showSizeChanger,
   showTotal,
+  hideOnSinglePage = true,
   simple,
   disabled,
   className,
-  onValueChange
+  onValueChange,
+  "aria-label": ariaLabel
 }) {
   const { t } = useTranslation();
+  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);
@@ -106,112 +109,98 @@ function Pagination({
     total === 0 ? 0 : (safeCurrent - 1) * pageSize + 1,
     Math.min(safeCurrent * pageSize, total)
   ]) : showTotal ? t("navigation.pagination.total", { total }) : null;
-  if (total <= pageSize) return null;
+  if (total <= 0) return null;
+  if (hideOnSinglePage && totalPages <= 1) return null;
   if (simple) {
-    return /* @__PURE__ */ jsxs(
-      "nav",
+    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, { className: "size-4", "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, { className: "size-4", "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,
       {
-        "aria-label": t("navigation.pagination.ariaLabel"),
-        "data-simple": "true",
-        className: cn("ui-pagination", className),
+        value: String(pageSize),
+        onValueChange: (v) => go(1, Number(v)),
+        disabled,
         children: [
-          totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
           /* @__PURE__ */ jsx(
-            Button,
+            SelectTrigger,
             {
-              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, { className: "size-4", "aria-hidden": "true" })
+              className: "ui-pagination-size-trigger w-[var(--pagination-size-width)]",
+              "aria-label": t("navigation.pagination.pageSize"),
+              children: /* @__PURE__ */ jsx(SelectValue, {})
             }
           ),
-          /* @__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, { className: "size-4", "aria-hidden": "true" })
-            }
-          )
+          /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: t("navigation.pagination.pageSizeOption", { size }) }, size)) })
         ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      "aria-label": t("navigation.pagination.ariaLabel"),
-      className: cn("ui-pagination", className),
-      children: [
-        totalLabel && /* @__PURE__ */ jsx("span", { className: "ui-pagination-total", children: totalLabel }),
-        showSizeChanger && /* @__PURE__ */ jsxs(
-          Select,
+    ),
+    /* @__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,
           {
-            value: String(pageSize),
-            onValueChange: (v) => go(1, Number(v)),
+            isActive: page === safeCurrent,
+            "aria-label": t("navigation.pagination.page", { page }),
+            onClick: () => {
+              if (!disabled) go(page);
+            },
             disabled,
-            children: [
-              /* @__PURE__ */ jsx(
-                SelectTrigger,
-                {
-                  className: "ui-pagination-size-trigger w-[var(--pagination-size-width)]",
-                  "aria-label": t("navigation.pagination.pageSize"),
-                  children: /* @__PURE__ */ jsx(SelectValue, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: t("navigation.pagination.pageSizeOption", { size }) }, size)) })
-            ]
+            children: page
           }
-        ),
-        /* @__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" })
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
+        ) }, 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" })
+        }
+      ) })
+    ] })
+  ] });
 }
 export {
   Pagination,