@godxjp/ui 6.0.0 → 6.0.2

package/src/components/navigation/pagination.tsx

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

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

@@ -1,69 +0,0 @@
-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/time-format-picker.tsx

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

@@ -1,63 +0,0 @@
-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>
-  );
-}