@godxjp/ui 19.6.0 → 20.1.0

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

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

@@ -1,20 +1,33 @@
 import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-export type TabsItem = {
-    value: string;
-    label: React.ReactNode;
-    content: React.ReactNode;
-    disabled?: boolean;
+import type { TabItemProp, TabsProp } from "../../props/components/navigation.prop.js";
+export type { TabItemProp, TabsProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, } from "../../props/components/navigation.prop.js";
+export type TabsOrientation = "vertical" | "horizontal";
+export type TabsItem = TabItemProp;
+export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & TabsProp & {
+    orientation?: TabsOrientation;
+    dir?: "ltr" | "rtl";
+    activationMode?: "manual" | "automatic";
 };
-export type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {
-    items?: TabsItem[];
-    variant?: "default" | "line" | "card";
-    listClassName?: string;
-    contentClassName?: string;
-};
-export declare function Tabs({ className, orientation, items, value, defaultValue, variant, listClassName, contentClassName, ...props }: TabsProps): React.JSX.Element;
-export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, extra, destroyOnHidden, onEdit, addIcon, hideAdd, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
+    /**
+     * ACCEPTED AND IGNORED. Radix's `RovingFocusGroup` took a `loop` switch; React Aria's tab list
+     * always wraps at the ends and exposes no equivalent knob. The prop stays so no consumer's build
+     * breaks. No test records this: the claim worth pinning would have been "both libraries wrap
+     * by default", and once Radix is gone there is no second library left to compare against.
+     */
+    loop?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
+    /** The tab's key — RAC `id` (its DOM `id` stays RAC-generated, exactly as Radix generated one). */
+    value: string;
+    /** RAC `isDisabled`; ALSO written to the button so `disabled:` utilities keep matching. */
+    disabled?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "value"> & {
+    /** The panel's key — must match a `TabsTrigger value`. RAC `id`. */
+    value: string;
+    /** Keep the panel mounted while another tab is selected — RAC `shouldForceMount`. */
+    forceMount?: true;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;