@godxjp/ui 9.2.0 → 11.0.0

package/dist/{chunk-S6TBIL7J.js → chunk-USNR424B.js}

@@ -1,15 +1,16 @@
+import { Flex, densityClass } from './chunk-INIIF7F7.js';
+import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
-import { Inline, densityClass } from './chunk-TILFZBTE.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-4MMIMZMK.js';
 import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass } from './chunk-IBK5D2Q6.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Layers, Layers2, ArrowUp, ArrowDown, ChevronsUpDown, MoreHorizontal } from 'lucide-react';
 
 function EmptyState({ icon: Icon, title, description, action, className }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn("ui-empty-state", className), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", role: "status", className: cn("ui-empty-state", className), children: [
     Icon && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-6", "aria-hidden": "true" }) }),
     /* @__PURE__ */ jsx("h3", { className: "ui-empty-state-title", children: title }),
     description && /* @__PURE__ */ jsx("p", { className: "ui-empty-state-description", children: description }),
@@ -139,14 +140,10 @@ DataTable.SelectAll = function DataTableSelectAll() {
   const { t } = useTranslation();
   if (!selectable) return null;
   return /* @__PURE__ */ jsx(
-    "input",
+    Checkbox,
     {
-      type: "checkbox",
-      checked: allSelected,
-      ref: (el) => {
-        if (el) el.indeterminate = someSelected;
-      },
-      onChange: toggleSelectAll,
+      checked: allSelected ? true : someSelected ? "indeterminate" : false,
+      onCheckedChange: toggleSelectAll,
       "aria-label": t("dataTable.selectAll")
     }
   );
@@ -190,7 +187,7 @@ DataTable.DensityToggle = function DataTableDensityToggle() {
         setDensity(next);
       },
       "aria-label": t("dataTable.densitySwitch", { density: nextLabel }),
-      children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", children: [
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
         /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
         density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")
       ] })
@@ -227,62 +224,84 @@ DataTable.Content = function DataTableContent() {
       onSortChange(void 0);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", "aria-busy": loading, children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
       selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
-      columns.map((col) => /* @__PURE__ */ jsx(
-        TableHead,
-        {
-          "data-empty": !col.header || void 0,
-          className: cn(
-            col.width,
-            col.align === "right" && "text-right",
-            col.align === "center" && "text-center",
-            col.hiddenOnMobile && "hidden md:table-cell",
-            col.sortable && onSortChange && "cursor-pointer select-none"
-          ),
-          onClick: () => {
-            onHeaderClick(col);
-          },
-          children: /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
-            col.header,
-            col.sortable && onSortChange && (sort?.key === col.key ? sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
-              ChevronsUpDown,
+      columns.map((col) => {
+        const isSortable = !!col.sortable && !!onSortChange;
+        const isActiveSort = isSortable && sort?.key === col.key;
+        const sortIndicator = isSortable ? isActiveSort ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
+        const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+          col.header,
+          sortIndicator
+        ] });
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            "data-empty": !col.header || void 0,
+            "aria-sort": isSortable ? isActiveSort ? sort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+            className: cn(
+              col.width,
+              col.align === "right" && "text-right",
+              col.align === "center" && "text-center",
+              col.hiddenOnMobile && "hidden md:table-cell",
+              isSortable && "select-none"
+            ),
+            children: isSortable ? /* @__PURE__ */ jsx(
+              "button",
               {
-                className: "text-muted-foreground size-3",
-                "aria-hidden": "true"
+                type: "button",
+                className: "ui-data-table-sort-button focus-visible:ring-ring rounded-sm focus-visible:ring-2",
+                onClick: () => {
+                  onHeaderClick(col);
+                },
+                children: label
               }
-            ))
-          ] })
-        },
-        col.key
-      ))
+            ) : label
+          },
+          col.key
+        );
+      })
     ] }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "h-32 text-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataTable.loading") }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") }) }) }) : data.map((row) => {
+    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "h-32 text-center", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataTable.loading") }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        colSpan: emptyColSpan,
+        className: "ui-data-table-empty",
+        "aria-live": "polite",
+        children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
+      }
+    ) }) : data.map((row) => {
       const id = getRowId(row);
       const isSelected = selected.has(id);
+      const isInteractiveTarget = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem]");
       return /* @__PURE__ */ jsxs(
         TableRow,
         {
           "data-state": isSelected ? "selected" : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
           onClick: (e) => {
             const target = e.target;
-            if (target.closest("button, a, input, select, textarea, [role=menuitem]"))
-              return;
+            if (isInteractiveTarget(target)) return;
             onRowClick?.(row);
           },
+          onKeyDown: onRowClick ? (e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            if (e.target !== e.currentTarget) return;
+            e.preventDefault();
+            onRowClick?.(row);
+          } : void 0,
           className: cn(
             rowPadding,
-            onRowClick && "hover:bg-muted/50 cursor-pointer",
+            onRowClick && "hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
             isSelected && "bg-muted/30"
           ),
           children: [
             selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
-              "input",
+              Checkbox,
               {
-                type: "checkbox",
                 checked: isSelected,
-                onChange: () => {
+                onCheckedChange: () => {
                   toggleSelect(id);
                 },
                 "aria-label": t("dataTable.selectRow", { id }),

package/dist/{chunk-6YBYAEXD.js → chunk-VSM44AYE.js}

@@ -1,8 +1,8 @@
 import { Input } from './chunk-VOHTRR5X.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
-import { normalizeHhmm, isValidHhmm } from './chunk-FXFJF4YA.js';
+import { useTranslation, usePickerLocales } from './chunk-HTG5VHU7.js';
+import { normalizeHhmm, isValidHhmm } from './chunk-6CSBMMZS.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { Clock } from 'lucide-react';
@@ -23,49 +23,97 @@ function parseHhmm(value) {
   const [h, m] = normalized.split(":").map(Number);
   return { hour: h, minute: m };
 }
+function to12h(hour24) {
+  const h = hour24 % 12;
+  return h === 0 ? 12 : h;
+}
+function from12h(hour12, meridiem) {
+  const base = hour12 % 12;
+  return meridiem === "pm" ? base + 12 : base;
+}
 function TimeColumn({
   label,
   items,
   selected,
+  formatItem,
   onSelect
 }) {
   const listRef = React.useRef(null);
   React.useEffect(() => {
     listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
   }, [selected]);
+  const moveFocus = (index) => {
+    const options = listRef.current?.querySelectorAll('[role="option"]');
+    options?.[index]?.focus();
+  };
+  const onKeyDown = (e, index) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(Math.min(items.length - 1, index + 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(Math.max(0, index - 1));
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus(0);
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus(items.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onSelect(items[index]);
+        break;
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "text-muted-foreground border-b px-1 py-1.5 text-center text-xs font-medium", children: label }),
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: listRef,
+        role: "listbox",
+        "aria-label": label,
         className: "h-52 [scrollbar-width:thin] [scrollbar-gutter:stable] overflow-y-scroll overscroll-contain p-1",
-        children: items.map((item) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-selected": item === selected,
-            className: cn(
-              "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
-              item === selected && "bg-primary text-primary-foreground hover:bg-primary/90"
-            ),
-            onClick: () => {
-              onSelect(item);
+        children: items.map((item, index) => {
+          const isSelected = item === selected;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              "data-selected": isSelected,
+              tabIndex: isSelected ? 0 : -1,
+              className: cn(
+                "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
+                isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"
+              ),
+              onClick: () => {
+                onSelect(item);
+              },
+              onKeyDown: (e) => onKeyDown(e, index),
+              children: formatItem(item)
             },
-            children: pad2(item)
-          },
-          item
-        ))
+            item
+          );
+        })
       }
     )
   ] });
 }
-function TimePickerPanel({ value, minuteStep, onChange, onDone }) {
+function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
   const { t } = useTranslation();
   const { hour, minute } = parseHhmm(value);
   const minutes = buildMinutes(minuteStep);
   const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
   const [draft, setDraft] = React.useState(value);
+  const meridiem = hour >= 12 ? "pm" : "am";
   React.useEffect(() => {
     setDraft(value);
   }, [value]);
@@ -79,16 +127,20 @@ function TimePickerPanel({ value, minuteStep, onChange, onDone }) {
     onChange(next);
     onDone?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-36", children: [
+  const hourItems = use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const selectedHourItem = use12h ? to12h(hour) : hour;
+  return /* @__PURE__ */ jsxs("div", { className: use12h ? "w-52" : "w-36", children: [
     /* @__PURE__ */ jsxs("div", { className: "divide-border flex divide-x", children: [
       /* @__PURE__ */ jsx(
         TimeColumn,
         {
           label: t("dataEntry.timePicker.hour"),
-          items: Array.from({ length: 24 }, (_, i) => i),
-          selected: hour,
+          items: hourItems,
+          selected: selectedHourItem,
+          formatItem: (h) => use12h ? String(h) : pad2(h),
           onSelect: (h) => {
-            onChange(`${pad2(h)}:${pad2(snappedMinute)}`);
+            const hour24 = use12h ? from12h(h, meridiem) : h;
+            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
           }
         }
       ),
@@ -98,10 +150,25 @@ function TimePickerPanel({ value, minuteStep, onChange, onDone }) {
           label: t("dataEntry.timePicker.minute"),
           items: minutes,
           selected: snappedMinute,
+          formatItem: (m) => pad2(m),
           onSelect: (m) => {
             commit(`${pad2(hour)}:${pad2(m)}`);
           }
         }
+      ),
+      use12h && /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: t("dataEntry.timePicker.meridiem"),
+          items: [0, 1],
+          selected: meridiem === "pm" ? 1 : 0,
+          formatItem: (m) => m === 1 ? t("dataEntry.timePicker.pm") : t("dataEntry.timePicker.am"),
+          onSelect: (m) => {
+            const nextMeridiem = m === 1 ? "pm" : "am";
+            const hour24 = from12h(to12h(hour), nextMeridiem);
+            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
+          }
+        }
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
@@ -142,6 +209,8 @@ function TimePicker({
   minuteStep = 5
 }) {
   const { t } = useTranslation();
+  const { timeFormat } = usePickerLocales();
+  const use12h = timeFormat === "12h";
   const [open, setOpen] = React.useState(false);
   const [internal, setInternal] = React.useState(defaultValue ?? "");
   const isControlled = controlledValue !== void 0;
@@ -169,7 +238,7 @@ function TimePicker({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "dialog",
-        className: "pr-10 tabular-nums",
+        className: "pe-10 tabular-nums",
         onChange: (event) => {
           setText(event.target.value);
           const normalized = normalizeHhmm(event.target.value);
@@ -191,7 +260,7 @@ function TimePicker({
           disabled,
           tabIndex: -1,
           "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
-          className: "text-muted-foreground absolute inset-y-0 right-0 h-full px-2 hover:bg-transparent",
+          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
           children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
       ) }),
@@ -200,6 +269,7 @@ function TimePicker({
         {
           value: value || "09:00",
           minuteStep,
+          use12h,
           onChange: (next) => {
             setValue(next);
             setText(next);

package/dist/{chunk-QWLXN6CT.js → chunk-VSUYVT2Q.js}

@@ -14,13 +14,13 @@ var toggleVariants = cva("ui-toggle", {
     },
     size: {
       sm: "ui-toggle-sm",
-      default: "ui-toggle-default-size",
+      md: "ui-toggle-default-size",
       lg: "ui-toggle-lg"
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "default"
+    size: "md"
   }
 });
 var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -131,6 +131,7 @@ function PasswordStrength({
         "data-state": checks[rule] ? "passed" : "failed",
         children: [
           checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? "Passed: " : "Failed: " }),
           /* @__PURE__ */ jsx("span", { children: labelForRule(rule) })
         ]
       },

package/dist/{chunk-4R7QL3MW.js → chunk-X2VY4MOW.js}

@@ -1,4 +1,4 @@
-import { formatDate, translateCurrent } from './chunk-FXFJF4YA.js';
+import { formatDate, getSyncedLocale, translateCurrent } from './chunk-6CSBMMZS.js';
 
 // src/lib/format.ts
 function formatDateTime(value, options) {
@@ -10,38 +10,23 @@ function formatDateLong(value, options) {
 function formatRelative(value, options) {
   return formatDate(value, { ...options, kind: "relative" });
 }
-function formatBytes(n) {
+function formatBytes(n, locale = getSyncedLocale()) {
   if (n == null) return "\u2014";
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
-  return `${(n / 1024 / 1024 / 1024).toFixed(2)} GB`;
+  const num = (digits, scaled) => new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  }).format(scaled);
+  if (n < 1024) return `${num(0, n)} B`;
+  if (n < 1024 * 1024) return `${num(1, n / 1024)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${num(1, n / 1024 / 1024)} MB`;
+  return `${num(2, n / 1024 / 1024 / 1024)} GB`;
 }
-function formatCurrency(amountMinor, currency) {
+function formatCurrency(amountMinor, currency, locale = getSyncedLocale()) {
   if (amountMinor == null || !currency) return "\u2014";
-  const zeroDecimal = [
-    "JPY",
-    "VND",
-    "KRW",
-    "CLP",
-    "ISK",
-    "BIF",
-    "DJF",
-    "GNF",
-    "KMF",
-    "RWF",
-    "XAF",
-    "XOF",
-    "XPF"
-  ];
-  const minorUnitDigits = zeroDecimal.includes(currency.toUpperCase()) ? 0 : 2;
+  const formatter = new Intl.NumberFormat(locale, { style: "currency", currency });
+  const minorUnitDigits = formatter.resolvedOptions().maximumFractionDigits ?? 2;
   const major = amountMinor / Math.pow(10, minorUnitDigits);
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency,
-    minimumFractionDigits: minorUnitDigits,
-    maximumFractionDigits: minorUnitDigits
-  }).format(major);
+  return formatter.format(major);
 }
 function shortId(id) {
   if (!id) return "\u2014";