@godxjp/ui 5.0.2 → 6.0.0

package/src/components/navigation/__tests__/navigation.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { FilterBar, FilterGroup } from "../filter-bar";
+import { PageHeader } from "../page-header";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+
+describe("FilterBar", () => {
+  it("shows clear button when filters active", async () => {
+    const user = userEvent.setup();
+    const onClear = vi.fn();
+    renderWithUi(
+      <FilterBar onClear={onClear} hasActiveFilters>
+        <FilterGroup label="Status">
+          <span>Active</span>
+        </FilterGroup>
+      </FilterBar>,
+    );
+    await user.click(screen.getByRole("button", { name: /xóa bộ lọc/i }));
+    expect(onClear).toHaveBeenCalledOnce();
+  });
+
+  it("hides clear when hasActiveFilters=false", () => {
+    renderWithUi(
+      <FilterBar onClear={() => undefined} hasActiveFilters={false}>
+        <span>f</span>
+      </FilterBar>,
+    );
+    expect(screen.queryByRole("button", { name: /xóa bộ lọc/i })).not.toBeInTheDocument();
+  });
+});
+
+describe("PageHeader", () => {
+  it("renders title and description (legacy)", () => {
+    renderWithUi(
+      <PageHeader title="Legacy" description="Sub" actions={<button type="button">Go</button>} />,
+    );
+    expect(screen.getByRole("heading", { name: "Legacy" })).toBeInTheDocument();
+    expect(screen.getByText("Sub")).toBeInTheDocument();
+  });
+});
+
+describe("Tabs", () => {
+  it("switches tab panels", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">Tab A</TabsTrigger>
+          <TabsTrigger value="b">Tab B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Content A</TabsContent>
+        <TabsContent value="b">Content B</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByText("Content A")).toBeInTheDocument();
+    expect(screen.getByRole("tablist")).toHaveAttribute("data-slot", "tabs-list");
+    await user.click(screen.getByRole("tab", { name: "Tab B" }));
+    expect(screen.getByRole("tab", { name: "Tab B" })).toHaveAttribute("data-slot", "tabs-trigger");
+    expect(screen.getByText("Content B")).toBeInTheDocument();
+  });
+});

package/src/components/navigation/__tests__/pagination-steps-tabs.test.tsx

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Pagination } from "../pagination";
+import { buildPageRange } from "../pagination-utils";
+import { Steps } from "../steps";
+import { TabsItems } from "../tabs-items";
+
+describe("buildPageRange", () => {
+  it("returns all pages when total is small", () => {
+    expect(buildPageRange(2, 5)).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it("inserts ellipsis for large totals", () => {
+    expect(buildPageRange(5, 20)).toContain("ellipsis");
+    expect(buildPageRange(5, 20)[0]).toBe(1);
+    expect(buildPageRange(5, 20).at(-1)).toBe(20);
+  });
+});
+
+describe("Pagination", () => {
+  it("changes page on click", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(<Pagination current={1} total={100} pageSize={10} onChange={onChange} />);
+
+    await user.click(screen.getByRole("button", { name: /trang 2/i }));
+    expect(onChange).toHaveBeenCalledWith(2, 10);
+  });
+
+  it("renders simple mode", () => {
+    renderWithUi(<Pagination simple current={2} total={50} pageSize={10} />);
+    expect(screen.getByText("2 / 5")).toBeInTheDocument();
+  });
+});
+
+describe("Steps", () => {
+  it("renders step titles", () => {
+    renderWithUi(
+      <Steps
+        current={1}
+        items={[{ title: "Tạo đơn" }, { title: "Thanh toán" }, { title: "Giao hàng" }]}
+      />,
+    );
+    expect(screen.getByText("Tạo đơn")).toBeInTheDocument();
+    expect(screen.getByText("Thanh toán")).toBeInTheDocument();
+  });
+
+  it("calls onChange when clickable", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(
+      <Steps current={0} onChange={onChange} items={[{ title: "A" }, { title: "B" }]} />,
+    );
+    await user.click(screen.getByText("B"));
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+});
+
+describe("TabsItems", () => {
+  it("switches panels via items API", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <TabsItems
+        defaultValue="orders"
+        items={[
+          { key: "orders", label: "Đơn hàng", children: "Panel đơn" },
+          { key: "shipments", label: "Kiện hàng", children: "Panel kiện" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Panel đơn")).toBeInTheDocument();
+    await user.click(screen.getByRole("tab", { name: "Kiện hàng" }));
+    expect(screen.getByText("Panel kiện")).toBeInTheDocument();
+  });
+});

package/src/components/navigation/date-format-picker.tsx

@@ -0,0 +1,55 @@
+import { CalendarDays } from "lucide-react";
+import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from "../../app/date-format-labels";
+import { useOptionalAppContext } from "../../app/app-provider";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import type { DateFormatPickerProp } from "../../props/components/app.prop";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../data-entry/select";
+
+export type {
+  DateFormatPickerProp,
+  DateFormatPickerProp as DateFormatPickerProps,
+} from "../../props/components/app.prop";
+
+export function DateFormatPicker({
+  className,
+  disabled,
+  id,
+  value,
+  onChange,
+}: DateFormatPickerProp) {
+  const ctx = useOptionalAppContext();
+  const { t, locale, fallbackLocale } = useTranslation();
+  const current = value ?? ctx?.dateFormat;
+  const handleChange = onChange ?? ctx?.setDateFormat;
+
+  if (current === undefined || !handleChange) {
+    throw new Error("DateFormatPicker requires <AppProvider> or controlled value + onChange");
+  }
+
+  return (
+    <Select value={current} onValueChange={handleChange} disabled={disabled}>
+      <SelectTrigger
+        id={id}
+        className={cn("w-full sm:w-44", className)}
+        aria-label={t("navigation.dateFormatPicker.ariaLabel")}
+      >
+        <CalendarDays className="mr-2 size-4 shrink-0 opacity-70" aria-hidden="true" />
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {APP_DATE_FORMAT_OPTIONS.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {getDateFormatLabel(option.value, locale, fallbackLocale)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/navigation/dropdown-menu.tsx

@@ -0,0 +1,190 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+export function DropdownMenuTrigger(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>,
+) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+export function DropdownMenuPortal(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,
+) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+export function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+export function DropdownMenuRadioGroup(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+export function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+export const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPortal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      data-slot="dropdown-menu-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-32 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPortal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+export const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  }
+>(({ className, inset, variant = "default", ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    data-slot="dropdown-menu-item"
+    data-inset={inset}
+    data-variant={variant}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+export const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    data-slot="dropdown-menu-label"
+    data-inset={inset}
+    className={cn("px-2 py-1.5 text-sm font-semibold data-[inset=true]:ps-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+export const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    data-slot="dropdown-menu-separator"
+    className={cn("bg-border -mx-1 my-1 h-px", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    data-slot="dropdown-menu-checkbox-item"
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="size-4" aria-hidden="true" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    data-slot="dropdown-menu-radio-item"
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    data-slot="dropdown-menu-sub-trigger"
+    data-inset={inset}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[inset=true]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ms-auto size-4" aria-hidden="true" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    data-slot="dropdown-menu-sub-content"
+    className={cn(
+      "bg-popover text-popover-foreground 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 z-50 min-w-32 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-md border p-1 shadow-lg",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+export const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    data-slot="dropdown-menu-shortcut"
+    className={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+    {...props}
+  />
+);

package/src/components/navigation/filter-bar.tsx

@@ -0,0 +1,38 @@
+import { X } from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { Button } from "../general/button";
+import { cn } from "../../lib/utils";
+import type { FilterBarProp, FilterGroupProp } from "../../props/components/navigation.prop";
+
+export type { FilterBarProp, FilterGroupProp } from "../../props/components/navigation.prop";
+
+export function FilterBar({
+  onClear,
+  hasActiveFilters = true,
+  className,
+  children,
+}: FilterBarProp) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={cn("ui-filter-bar", className)}>
+      {children}
+      {onClear && hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={onClear} className="ui-filter-clear">
+          <X aria-hidden="true" />
+          {t("common.clearFilters")}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function FilterGroup({ label, className, children }: FilterGroupProp) {
+  return (
+    <div className={cn("ui-stack-xs ui-filter-group", className)}>
+      <div className="ui-filter-label">{label}</div>
+      {children}
+    </div>
+  );
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,28 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+export { TabsItems } from "./tabs-items";
+export { Pagination } from "./pagination";
+export { Steps } from "./steps";
+export { FilterBar, FilterGroup } from "./filter-bar";
+export { PageHeader } from "./page-header";
+export { LocalePicker } from "./locale-picker";
+export { TimezonePicker } from "./timezone-picker";
+export { TimeFormatPicker } from "./time-format-picker";
+export { DateFormatPicker } from "./date-format-picker";
+export type { BreadcrumbItem } from "./page-header";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";

package/src/components/navigation/locale-picker.tsx

@@ -0,0 +1,49 @@
+import { Languages } from "lucide-react";
+import { APP_LOCALES } from "../../app/types";
+import { useOptionalAppContext } from "../../app/app-provider";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import type { LocalePickerProp } from "../../props/components/app.prop";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../data-entry/select";
+
+export type {
+  LocalePickerProp,
+  LocalePickerProp as LocalePickerProps,
+} from "../../props/components/app.prop";
+
+export function LocalePicker({ className, disabled, id, value, onChange }: LocalePickerProp) {
+  const ctx = useOptionalAppContext();
+  const { t } = useTranslation();
+  const current = value ?? ctx?.locale;
+  const handleChange = onChange ?? ctx?.setLocale;
+
+  if (current === undefined || !handleChange) {
+    throw new Error("LocalePicker requires <AppProvider> or controlled value + onChange");
+  }
+
+  return (
+    <Select value={current} onValueChange={handleChange} disabled={disabled}>
+      <SelectTrigger
+        id={id}
+        className={cn("w-full sm:w-40", className)}
+        aria-label={t("navigation.localePicker.ariaLabel")}
+      >
+        <Languages className="mr-2 size-4 shrink-0 opacity-70" aria-hidden="true" />
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {APP_LOCALES.map((code) => (
+          <SelectItem key={code} value={code}>
+            {t(`locale.${code}`)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/navigation/page-header.tsx

@@ -0,0 +1,50 @@
+/** @deprecated Prefer PageContainer. Header-only legacy shell. */
+/* eslint-disable @typescript-eslint/no-deprecated -- legacy component intentionally uses PageHeaderProp */
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import type { PageHeaderProp } from "../../props/components/layout.prop";
+
+export type { PageHeaderProp } from "../../props/components/layout.prop";
+export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop";
+
+export function PageHeader({ title, description, breadcrumb, actions, className }: PageHeaderProp) {
+  return (
+    <header className={cn("ui-page-header", className)}>
+      {breadcrumb && breadcrumb.length > 0 && (
+        <nav aria-label="Breadcrumb" className="ui-breadcrumb">
+          <ol className="ui-breadcrumb-list">
+            {breadcrumb.map((item, i) => {
+              const isLast = i === breadcrumb.length - 1;
+              return (
+                <li key={i} className="ui-inline-xs">
+                  {item.to && !isLast ? (
+                    <Link to={item.to} className="hover:text-foreground hover:underline">
+                      {item.label}
+                    </Link>
+                  ) : (
+                    <span
+                      className={isLast ? "text-foreground" : ""}
+                      aria-current={isLast ? "page" : undefined}
+                    >
+                      {item.label}
+                    </span>
+                  )}
+                  {!isLast && <ChevronRight className="size-3" aria-hidden="true" />}
+                </li>
+              );
+            })}
+          </ol>
+        </nav>
+      )}
+      <div className="ui-page-header-row">
+        <div className="min-w-0">
+          <h1 className="ui-page-title">{title}</h1>
+          {description && <p className="ui-page-subtitle">{description}</p>}
+        </div>
+        {actions && <div className="ui-inline-sm shrink-0">{actions}</div>}
+      </div>
+    </header>
+  );
+}

package/src/components/navigation/pagination-utils.ts

@@ -0,0 +1,35 @@
+/** Build visible page numbers with ellipsis — Ant Design pagination style. */
+export function buildPageRange(
+  current: number,
+  totalPages: number,
+  siblingCount = 1,
+): (number | "ellipsis")[] {
+  if (totalPages <= 1) return totalPages === 1 ? [1] : [];
+
+  const totalNumbers = siblingCount * 2 + 5;
+  if (totalPages <= totalNumbers) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const left = Math.max(current - siblingCount, 1);
+  const right = Math.min(current + siblingCount, totalPages);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < totalPages - 1;
+
+  const range: (number | "ellipsis")[] = [];
+  range.push(1);
+
+  if (showLeftEllipsis) range.push("ellipsis");
+  else for (let i = 2; i < left; i++) range.push(i);
+
+  for (let i = left; i <= right; i++) {
+    if (i !== 1 && i !== totalPages) range.push(i);
+  }
+
+  if (showRightEllipsis) range.push("ellipsis");
+  else for (let i = right + 1; i < totalPages; i++) range.push(i);
+
+  if (totalPages > 1) range.push(totalPages);
+
+  return range;
+}