@godxjp/ui 9.1.0 → 10.0.0

package/dist/{chunk-56NYZNVY.js → chunk-PDXFQS7M.js}

@@ -1,9 +1,10 @@
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-CAEL2ZD2.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-NXVCI6YB.js';
 import { Button } from './chunk-M4PZNAMV.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
-import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { MoreHorizontal, ChevronLeft, ChevronRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/navigation/pagination-utils.ts
 function buildPageRange(current, totalPages, siblingCount = 1) {
@@ -28,8 +29,76 @@ function buildPageRange(current, totalPages, siblingCount = 1) {
   if (totalPages > 1) range.push(totalPages);
   return range;
 }
+var PaginationContent = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("ul", { ref, className: cn("ui-pagination-list", className), role: "list", ...props });
+});
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("ui-pagination-item", className), ...props })
+);
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = React.forwardRef(
+  ({ className, isActive, disabled, children, onClick, href: _href, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-active": isActive || void 0,
+      "aria-current": isActive ? "page" : void 0,
+      disabled: disabled || void 0,
+      "data-state": disabled ? "disabled" : void 0,
+      className: cn(
+        "ui-pagination-link ui-button--compact-icon ui-pagination-page",
+        isActive ? "ui-pagination-link-active" : void 0,
+        disabled ? "ui-pagination-link-disabled" : void 0,
+        className
+      ),
+      onClick,
+      ...props,
+      children
+    }
+  )
+);
+PaginationLink.displayName = "PaginationLink";
+var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("ui-pagination-ellipsis ui-button--compact-icon", className),
+    "aria-hidden": "true",
+    role: "presentation",
+    ...props,
+    children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+var PaginationPrevious = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      ref,
+      className: cn("ui-pagination-prev", className),
+      disabled: props.disabled,
+      ...props,
+      children
+    }
+  )
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      ref,
+      className: cn("ui-pagination-next", className),
+      disabled: props.disabled,
+      ...props,
+      children
+    }
+  )
+);
+PaginationNext.displayName = "PaginationNext";
 function Pagination({
-  current = 1,
+  value = 1,
   total = 0,
   pageSize = 10,
   pageSizeOptions = [10, 20, 50, 100],
@@ -38,16 +107,16 @@ function Pagination({
   simple,
   disabled,
   className,
-  onChange
+  onValueChange
 }) {
   const { t } = useTranslation();
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const safeCurrent = Math.min(Math.max(1, current), totalPages);
+  const safeCurrent = Math.min(Math.max(1, value), totalPages);
   const pages = buildPageRange(safeCurrent, totalPages);
   const go = (page, size = pageSize) => {
     if (disabled) return;
     const nextPage = Math.min(Math.max(1, page), Math.max(1, Math.ceil(total / size)));
-    onChange?.(nextPage, size);
+    onValueChange?.(nextPage, size);
   };
   const totalLabel = typeof showTotal === "function" ? showTotal(total, [
     (safeCurrent - 1) * pageSize + 1,
@@ -121,51 +190,45 @@ function Pagination({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          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),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
-          }
-        ),
-        /* @__PURE__ */ jsx("ul", { className: "ui-pagination-list", children: pages.map(
-          (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx("li", { className: "ui-pagination-ellipsis ui-button--compact-icon", children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" }) }, `e-${index}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            Button,
+        /* @__PURE__ */ jsxs(PaginationContent, { children: [
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationPrevious,
             {
-              type: "button",
-              variant: page === safeCurrent ? "default" : "outline",
-              size: "icon",
-              className: "ui-button--compact-icon ui-pagination-page",
-              disabled,
-              "aria-label": t("navigation.pagination.page", { page }),
-              "aria-current": page === safeCurrent ? "page" : void 0,
-              onClick: () => go(page),
-              children: page
+              "aria-label": t("navigation.pagination.prev"),
+              onClick: () => go(safeCurrent - 1),
+              className: "ui-button--compact-icon",
+              disabled: Boolean(disabled) || safeCurrent <= 1,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
             }
-          ) }, page)
-        ) }),
-        /* @__PURE__ */ jsx(
-          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),
-            children: /* @__PURE__ */ jsx(ChevronRight, { "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),
+              className: "ui-button--compact-icon",
+              disabled: Boolean(disabled) || safeCurrent >= totalPages,
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+            }
+          ) })
+        ] })
       ]
     }
   );
 }
 
-export { Pagination };
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/{chunk-F7PG4OEV.js → chunk-QSGW3ZWK.js}

@@ -13,11 +13,18 @@ function FormField({
   className,
   children
 }) {
-  const helperId = helper && !error ? `${id}-helper` : void 0;
+  const helperId = helper ? `${id}-helper` : void 0;
   const errorId = error ? `${id}-error` : void 0;
-  const describedBy = errorId ?? helperId;
+  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
+    console.warn(
+      "FormField expects a single React element child to receive aria-describedby/aria-errormessage; the helper text and error message will not be associated with the control."
+    );
+  }
   const childWithA11y = React.isValidElement(children) ? React.cloneElement(children, {
-    "aria-describedby": describedBy,
+    // Helper and error can coexist: helper stays on aria-describedby, the error on
+    // aria-errormessage (surfaced when aria-invalid is true).
+    "aria-describedby": helperId,
+    "aria-errormessage": errorId,
     "aria-required": required ? true : void 0,
     "aria-invalid": !!error || void 0
   }) : children;
@@ -30,7 +37,8 @@ function FormField({
       labelAddon
     ] }),
     childWithA11y,
-    error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null
+    helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null,
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
   ] });
 }
 

package/dist/{chunk-25RYBC5T.js → chunk-S2IJKT3D.js}

@@ -1,4 +1,4 @@
-import { Field, choiceGroupClassName } from './chunk-26CPAKUP.js';
+import { Field, choiceGroupClassName } from './chunk-44YRPSZ7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';

package/dist/{chunk-OJZ6C2HM.js → chunk-SARQRCKO.js}

@@ -1,7 +1,8 @@
 import { controlIconClass } from './chunk-IBK5D2Q6.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { Check, Loader2, X, Circle } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function resolveStepStatus(index, current, itemStatus, currentStatus) {
   if (itemStatus) return itemStatus;
@@ -53,17 +54,18 @@ function StepIcon({
 }
 function Steps({
   items = [],
-  current = 0,
-  initial = 0,
+  value: current = 0,
+  defaultValue = 0,
   status: currentStatus = "process",
   orientation = "horizontal",
   type = "default",
-  size = "default",
+  size = "md",
   titlePlacement = "horizontal",
-  onChange,
+  onValueChange,
   className
 }) {
-  const base = initial;
+  const { t } = useTranslation();
+  const base = defaultValue;
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
   return /* @__PURE__ */ jsx(
@@ -74,65 +76,69 @@ function Steps({
         isVertical ? "flex-col gap-0" : "flex-row items-start",
         className
       ),
-      "aria-label": "Progress",
+      "aria-label": t("navigation.steps.ariaLabel"),
       children: 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;
+        const interactive = Boolean(onValueChange);
+        const clickable = interactive && !item.disabled;
+        const description = item.description;
+        const isCurrent = absoluteIndex === current;
+        const stepClassName = cn(
+          "group flex min-w-0",
+          isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
+          clickable ? "cursor-pointer" : "cursor-default"
+        );
+        const stepInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "min-w-0",
+                isVertical ? "pt-1 text-left" : "mt-2 px-2",
+                titlePlacement === "vertical" && !isVertical && "mt-1"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "font-medium",
+                      compact ? "text-xs" : "text-sm",
+                      stepStatus === "process" && "text-foreground",
+                      stepStatus === "wait" && "text-muted-foreground",
+                      stepStatus === "error" && "text-destructive"
+                    ),
+                    children: item.title
+                  }
+                ),
+                item.subtitle && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: item.subtitle }),
+                description && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", compact ? "text-xs" : "text-sm"), children: description })
+              ]
+            }
+          )
+        ] });
         return /* @__PURE__ */ jsx(
           "li",
           {
+            "aria-current": isCurrent ? "step" : void 0,
             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)]"
             ),
-            children: /* @__PURE__ */ jsxs(
+            children: interactive ? /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 disabled: !clickable,
-                onClick: clickable ? () => onChange?.(absoluteIndex) : void 0,
-                className: cn(
-                  "group flex min-w-0",
-                  isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
-                  clickable && "cursor-pointer",
-                  !clickable && "cursor-default"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: cn(
-                        "min-w-0",
-                        isVertical ? "pt-1 text-left" : "mt-2 px-2",
-                        titlePlacement === "vertical" && !isVertical && "mt-1"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: cn(
-                              "font-medium",
-                              compact ? "text-xs" : "text-sm",
-                              stepStatus === "process" && "text-foreground",
-                              stepStatus === "wait" && "text-muted-foreground",
-                              stepStatus === "error" && "text-destructive"
-                            ),
-                            children: item.title
-                          }
-                        ),
-                        item.subTitle && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: item.subTitle }),
-                        description && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", compact ? "text-xs" : "text-sm"), children: description })
-                      ]
-                    }
-                  )
-                ]
+                onClick: clickable ? () => onValueChange?.(absoluteIndex) : void 0,
+                className: stepClassName,
+                children: stepInner
               }
-            )
+            ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner })
           },
           index
         );

package/dist/chunk-T2QO2S65.js

@@ -0,0 +1,126 @@
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-NXVCI6YB.js';
+import { Button } from './chunk-M4PZNAMV.js';
+import { useOptionalAppContext, useTranslation, APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel, resolveTimezonePickerOptions, getTimezoneLabel, APP_LOCALES } from './chunk-HTG5VHU7.js';
+import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from './chunk-6CSBMMZS.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { useId } from 'react';
+import { Clock, CalendarDays, Globe, Languages, X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Toolbar({ onClear, hasActiveFilters = true, className, children }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": t("navigation.toolbar.ariaLabel"),
+      className: cn("ui-toolbar", className),
+      children: [
+        children,
+        onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
+          /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+          t("common.clearFilters")
+        ] })
+      ]
+    }
+  );
+}
+function ToolbarGroup({ label, className, children }) {
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
+      className: cn("ui-stack-xs ui-toolbar-group", className),
+      children: [
+        label ? /* @__PURE__ */ jsx("div", { id: labelId, className: "ui-toolbar-label", children: label }) : null,
+        children
+      ]
+    }
+  );
+}
+var ICON = {
+  locale: Languages,
+  timezone: Globe,
+  dateFormat: CalendarDays,
+  timeFormat: Clock
+};
+var TRIGGER_WIDTH = {
+  locale: "sm:w-40",
+  timezone: "sm:w-56",
+  dateFormat: "sm:w-44",
+  timeFormat: "sm:w-44"
+};
+var ARIA_KEY = {
+  locale: "navigation.localePicker.ariaLabel",
+  timezone: "navigation.timezonePicker.ariaLabel",
+  dateFormat: "navigation.dateFormatPicker.ariaLabel",
+  timeFormat: "navigation.timeFormatPicker.ariaLabel"
+};
+var AppSettingPicker = React.forwardRef(
+  function AppSettingPicker2({ kind, className, disabled, id, name, value, onValueChange }, ref) {
+    const ctx = useOptionalAppContext();
+    const { t, locale, fallbackLocale } = useTranslation();
+    const current = value ?? ctx?.[kind];
+    const setter = ctx ? {
+      locale: ctx.setLocale,
+      timezone: ctx.setTimezone,
+      dateFormat: ctx.setDateFormat,
+      timeFormat: ctx.setTimeFormat
+    }[kind] : void 0;
+    const handleChange = onValueChange ?? setter;
+    const items = React.useMemo(() => {
+      switch (kind) {
+        case "locale":
+          return APP_LOCALES.map((code) => ({ value: code, label: t(`locale.${code}`) }));
+        case "timezone":
+          return resolveTimezonePickerOptions(ctx?.timezoneOptions, current ?? "").map((tz) => ({
+            value: tz,
+            label: getTimezoneLabel(tz, locale, fallbackLocale)
+          }));
+        case "dateFormat":
+          return APP_DATE_FORMAT_OPTIONS.map((option) => ({
+            value: option.value,
+            label: getDateFormatLabel(option.value, locale, fallbackLocale)
+          }));
+        case "timeFormat":
+          return APP_TIME_FORMAT_OPTIONS.map((option) => ({
+            value: option.value,
+            label: getTimeFormatLabel(option.value, locale, fallbackLocale)
+          }));
+      }
+    }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
+    const unbound = current === void 0 || !handleChange;
+    const Icon = ICON[kind];
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: current ?? "",
+        onValueChange: handleChange ?? (() => {
+        }),
+        disabled: disabled || unbound,
+        name,
+        children: [
+          /* @__PURE__ */ jsxs(
+            SelectTrigger,
+            {
+              ref,
+              id,
+              className: cn("w-full", TRIGGER_WIDTH[kind], className),
+              "aria-label": t(ARIA_KEY[kind]),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "me-2 size-4 shrink-0 opacity-70", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(SelectValue, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
+        ]
+      }
+    );
+  }
+);
+
+export { AppSettingPicker, Toolbar, ToolbarGroup };