@godxjp/ui 6.0.0 → 6.0.2

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

@@ -1,61 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,50 +0,0 @@
-/** @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

@@ -1,35 +0,0 @@
-/** 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;
-}