@godxjp/ui 5.0.2 → 6.0.0

package/src/components/navigation/pagination.tsx

@@ -0,0 +1,168 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../data-entry/select";
+import { buildPageRange } from "./pagination-utils";
+import type { PaginationProp } from "../../props/components/navigation.prop";
+
+export type {
+  PaginationProp,
+  PaginationProp as PaginationProps,
+} from "../../props/components/navigation.prop";
+
+export function Pagination({
+  current = 1,
+  total = 0,
+  pageSize = 10,
+  pageSizeOptions = [10, 20, 50, 100],
+  showSizeChanger,
+  showTotal,
+  simple,
+  disabled,
+  className,
+  onChange,
+}: PaginationProp) {
+  const { t } = useTranslation();
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const safeCurrent = Math.min(Math.max(1, current), totalPages);
+  const pages = buildPageRange(safeCurrent, totalPages);
+
+  const go = (page: number, size = pageSize) => {
+    if (disabled) return;
+    const nextPage = Math.min(Math.max(1, page), Math.max(1, Math.ceil(total / size)));
+    onChange?.(nextPage, size);
+  };
+
+  const totalLabel =
+    typeof showTotal === "function"
+      ? showTotal(total, [
+          (safeCurrent - 1) * pageSize + 1,
+          Math.min(safeCurrent * pageSize, total),
+        ])
+      : showTotal
+        ? t("navigation.pagination.total", { total })
+        : null;
+
+  if (simple) {
+    return (
+      <nav
+        aria-label={t("navigation.pagination.ariaLabel")}
+        data-simple="true"
+        className={cn("ui-pagination", className)}
+      >
+        {totalLabel && <span className="ui-pagination-total">{totalLabel}</span>}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={Boolean(disabled) || safeCurrent <= 1}
+          aria-label={t("navigation.pagination.prev")}
+          onClick={() => go(safeCurrent - 1)}
+        >
+          <ChevronLeft className="size-4" aria-hidden="true" />
+        </Button>
+        <span className="ui-pagination-count">
+          {safeCurrent} / {totalPages}
+        </span>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={Boolean(disabled) || safeCurrent >= totalPages}
+          aria-label={t("navigation.pagination.next")}
+          onClick={() => go(safeCurrent + 1)}
+        >
+          <ChevronRight className="size-4" aria-hidden="true" />
+        </Button>
+      </nav>
+    );
+  }
+
+  return (
+    <nav
+      aria-label={t("navigation.pagination.ariaLabel")}
+      className={cn("ui-pagination", className)}
+    >
+      {totalLabel && <span className="ui-pagination-total">{totalLabel}</span>}
+
+      {showSizeChanger && (
+        <Select
+          value={String(pageSize)}
+          onValueChange={(v) => go(1, Number(v))}
+          disabled={disabled}
+        >
+          <SelectTrigger
+            className="ui-pagination-size-trigger"
+            aria-label={t("navigation.pagination.pageSize")}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {t("navigation.pagination.pageSizeOption", { size })}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="ui-button--compact-icon"
+        disabled={Boolean(disabled) || safeCurrent <= 1}
+        aria-label={t("navigation.pagination.prev")}
+        onClick={() => go(safeCurrent - 1)}
+      >
+        <ChevronLeft aria-hidden="true" />
+      </Button>
+
+      <ul className="ui-pagination-list">
+        {pages.map((page, index) =>
+          page === "ellipsis" ? (
+            <li key={`e-${index}`} className="ui-pagination-ellipsis ui-button--compact-icon">
+              <MoreHorizontal aria-hidden="true" />
+            </li>
+          ) : (
+            <li key={page}>
+              <Button
+                type="button"
+                variant={page === safeCurrent ? "default" : "outline"}
+                size="icon"
+                className="ui-button--compact-icon ui-pagination-page"
+                disabled={disabled}
+                aria-label={t("navigation.pagination.page", { page })}
+                aria-current={page === safeCurrent ? "page" : undefined}
+                onClick={() => go(page)}
+              >
+                {page}
+              </Button>
+            </li>
+          ),
+        )}
+      </ul>
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="ui-button--compact-icon"
+        disabled={Boolean(disabled) || safeCurrent >= totalPages}
+        aria-label={t("navigation.pagination.next")}
+        onClick={() => go(safeCurrent + 1)}
+      >
+        <ChevronRight aria-hidden="true" />
+      </Button>
+    </nav>
+  );
+}

package/src/components/navigation/steps.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { Check, Circle, Loader2, X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { controlIconClass } from "../../lib/control-styles";
+import type { StepStatusProp, StepsProp } from "../../props/components/navigation.prop";
+
+export type {
+  StepsProp,
+  StepsProp as StepsProps,
+  StepItemProp,
+  StepStatusProp,
+} from "../../props/components/navigation.prop";
+
+function resolveStepStatus(
+  index: number,
+  current: number,
+  itemStatus: StepStatusProp | undefined,
+  currentStatus: StepStatusProp | undefined,
+): StepStatusProp {
+  if (itemStatus) return itemStatus;
+  if (index < current) return "finish";
+  if (index === current) return currentStatus ?? "process";
+  return "wait";
+}
+
+function StepIcon({
+  status,
+  icon,
+  type,
+}: {
+  status: StepStatusProp;
+  icon?: React.ReactNode;
+  type?: StepsProp["type"];
+}) {
+  if (icon)
+    return <span className={cn("flex items-center justify-center", controlIconClass)}>{icon}</span>;
+
+  if (type === "dot") {
+    return (
+      <span
+        className={cn(
+          "block size-2.5 rounded-full",
+          status === "finish" && "bg-primary",
+          status === "process" && "bg-primary ring-primary/20 ring-4",
+          status === "error" && "bg-destructive",
+          status === "wait" && "bg-muted-foreground/30",
+        )}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        "flex items-center justify-center",
+        controlIconClass,
+        "rounded-full border-2 text-sm font-medium",
+        status === "finish" && "border-primary bg-primary text-primary-foreground",
+        status === "process" && "border-primary text-primary",
+        status === "error" && "border-destructive bg-destructive text-destructive-foreground",
+        status === "wait" && "border-muted-foreground/30 text-muted-foreground",
+      )}
+    >
+      {status === "finish" && <Check className="size-4" aria-hidden="true" />}
+      {status === "process" && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
+      {status === "error" && <X className="size-4" aria-hidden="true" />}
+      {status === "wait" && <Circle className="size-3 fill-current" aria-hidden="true" />}
+    </span>
+  );
+}
+
+export function Steps({
+  items = [],
+  current = 0,
+  initial = 0,
+  status: currentStatus = "process",
+  orientation = "horizontal",
+  type = "default",
+  size = "default",
+  titlePlacement = "horizontal",
+  onChange,
+  className,
+}: StepsProp) {
+  const base = initial;
+  const isVertical = orientation === "vertical";
+  const compact = size === "small";
+
+  return (
+    <ol
+      className={cn(
+        "flex w-full",
+        isVertical ? "flex-col gap-0" : "flex-row items-start",
+        className,
+      )}
+      aria-label="Progress"
+    >
+      {items.map((item, index) => {
+        const absoluteIndex = base + index;
+        const stepStatus = resolveStepStatus(absoluteIndex, current, item.status, currentStatus);
+        const clickable = Boolean(onChange) && !item.disabled;
+        const description = item.content ?? item.description;
+
+        return (
+          <li
+            key={index}
+            className={cn(
+              "relative flex min-w-0 flex-1",
+              isVertical ? "flex-row gap-3 pb-8 last:pb-0" : "flex-col items-center text-center",
+              !isVertical &&
+                index < items.length - 1 &&
+                "after:bg-border after:absolute after:top-4 after:h-px",
+              !isVertical &&
+                index < items.length - 1 &&
+                "after:left-[calc(50%+1.25rem)] after:w-[calc(100%-2.5rem)]",
+            )}
+          >
+            <button
+              type="button"
+              disabled={!clickable}
+              onClick={clickable ? () => onChange?.(absoluteIndex) : undefined}
+              className={cn(
+                "group flex min-w-0",
+                isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
+                clickable && "cursor-pointer",
+                !clickable && "cursor-default",
+              )}
+            >
+              <StepIcon status={stepStatus} icon={item.icon} type={type} />
+              <div
+                className={cn(
+                  "min-w-0",
+                  isVertical ? "pt-1 text-left" : "mt-2 px-2",
+                  titlePlacement === "vertical" && !isVertical && "mt-1",
+                )}
+              >
+                <div
+                  className={cn(
+                    "font-medium",
+                    compact ? "text-xs" : "text-sm",
+                    stepStatus === "process" && "text-foreground",
+                    stepStatus === "wait" && "text-muted-foreground",
+                    stepStatus === "error" && "text-destructive",
+                  )}
+                >
+                  {item.title}
+                </div>
+                {item.subTitle && (
+                  <div className="text-muted-foreground text-xs">{item.subTitle}</div>
+                )}
+                {description && (
+                  <div className={cn("text-muted-foreground", compact ? "text-xs" : "text-sm")}>
+                    {description}
+                  </div>
+                )}
+              </div>
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/navigation/tabs-items.tsx

@@ -0,0 +1,69 @@
+import { cn } from "../../lib/utils";
+import type { TabsItemsProp } from "../../props/components/navigation.prop";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+export type {
+  TabsItemsProp,
+  TabsItemsProp as TabsItemsProps,
+} from "../../props/components/navigation.prop";
+
+/** Ant Design `items` API — wraps Radix Tabs primitives. */
+export function TabsItems({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "default",
+  className,
+  listClassName,
+  contentClassName,
+}: TabsItemsProp) {
+  const firstKey = items[0]?.key;
+  const resolvedDefault = defaultValue ?? firstKey;
+
+  return (
+    <Tabs
+      value={value}
+      defaultValue={value === undefined ? resolvedDefault : undefined}
+      onValueChange={onValueChange}
+      className={className}
+      data-slot="tabs"
+    >
+      <TabsList
+        data-slot="tabs-list"
+        className={cn(
+          variant === "line" &&
+            "h-auto w-full justify-start rounded-none border-b bg-transparent p-0",
+          variant === "card" && "w-full justify-start",
+          listClassName,
+        )}
+      >
+        {items.map((item) => (
+          <TabsTrigger
+            key={item.key}
+            value={item.key}
+            disabled={item.disabled}
+            className={cn(
+              variant === "line" &&
+                "data-[state=active]:border-primary rounded-none border-b-2 border-transparent bg-transparent px-4 py-2 shadow-none data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+              variant === "card" && "data-[state=active]:shadow-sm",
+            )}
+          >
+            {item.icon && <span className="mr-1.5 inline-flex">{item.icon}</span>}
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map((item) => (
+        <TabsContent
+          key={item.key}
+          value={item.key}
+          data-slot="tabs-panel"
+          className={cn(variant === "line" && "mt-0", contentClassName)}
+        >
+          {item.children}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}

package/src/components/navigation/tabs.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils";
+
+export function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+export const TabsList = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: "default" | "line";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    data-slot="tabs-list"
+    data-variant={variant}
+    className={cn(
+      "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit items-center justify-center rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+export const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    data-slot="tabs-trigger"
+    className={cn(
+      "text-foreground/60 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-primary/25 after:bg-foreground relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+export const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    data-slot="tabs-content"
+    className={cn("focus-visible:ring-ring flex-1 outline-none focus-visible:ring-2", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;

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

@@ -0,0 +1,55 @@
+import { Clock } from "lucide-react";
+import { APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from "../../app/time-format-labels";
+import { useOptionalAppContext } from "../../app/app-provider";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import type { TimeFormatPickerProp } from "../../props/components/app.prop";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../data-entry/select";
+
+export type {
+  TimeFormatPickerProp,
+  TimeFormatPickerProp as TimeFormatPickerProps,
+} from "../../props/components/app.prop";
+
+export function TimeFormatPicker({
+  className,
+  disabled,
+  id,
+  value,
+  onChange,
+}: TimeFormatPickerProp) {
+  const ctx = useOptionalAppContext();
+  const { t, locale, fallbackLocale } = useTranslation();
+  const current = value ?? ctx?.timeFormat;
+  const handleChange = onChange ?? ctx?.setTimeFormat;
+
+  if (current === undefined || !handleChange) {
+    throw new Error("TimeFormatPicker 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.timeFormatPicker.ariaLabel")}
+      >
+        <Clock className="mr-2 size-4 shrink-0 opacity-70" aria-hidden="true" />
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {APP_TIME_FORMAT_OPTIONS.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {getTimeFormatLabel(option.value, locale, fallbackLocale)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Globe } from "lucide-react";
+import { useOptionalAppContext } from "../../app/app-provider";
+import { getTimezoneLabel, resolveTimezonePickerOptions } from "../../app/timezones";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import type { TimezonePickerProp } from "../../props/components/app.prop";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../data-entry/select";
+
+export type {
+  TimezonePickerProp,
+  TimezonePickerProp as TimezonePickerProps,
+} from "../../props/components/app.prop";
+
+export function TimezonePicker({
+  className,
+  disabled,
+  id,
+  value,
+  onChange,
+  options: optionsProp,
+}: TimezonePickerProp) {
+  const ctx = useOptionalAppContext();
+  const { t, locale, fallbackLocale } = useTranslation();
+  const current = value ?? ctx?.timezone;
+  const handleChange = onChange ?? ctx?.setTimezone;
+  const configured = optionsProp ?? ctx?.timezoneOptions;
+
+  if (current === undefined || !handleChange) {
+    throw new Error("TimezonePicker requires <AppProvider> or controlled value + onChange");
+  }
+
+  const options = React.useMemo(
+    () => resolveTimezonePickerOptions(configured, current),
+    [configured, current],
+  );
+
+  return (
+    <Select value={current} onValueChange={handleChange} disabled={disabled}>
+      <SelectTrigger
+        id={id}
+        className={cn("w-full sm:w-56", className)}
+        aria-label={t("navigation.timezonePicker.ariaLabel")}
+      >
+        <Globe className="mr-2 size-4 shrink-0 opacity-70" aria-hidden="true" />
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((tz) => (
+          <SelectItem key={tz} value={tz}>
+            {getTimezoneLabel(tz, locale, fallbackLocale)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}