@godxjp/ui 9.1.0 → 10.0.0

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-VSUYVT2Q.js

@@ -0,0 +1,163 @@
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React2 from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { Check, X } from 'lucide-react';
+
+var toggleVariants = cva("ui-toggle", {
+  variants: {
+    variant: {
+      default: "ui-toggle-default",
+      outline: "ui-toggle-outline"
+    },
+    size: {
+      sm: "ui-toggle-sm",
+      md: "ui-toggle-default-size",
+      lg: "ui-toggle-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    "data-slot": "toggle",
+    className: cn(toggleVariants({ variant, size }), className),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+var ToggleGroup = React2.forwardRef(({ className, variant = "default", size = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    "data-slot": "toggle-group",
+    "data-variant": variant,
+    "data-size": size,
+    className: cn("ui-toggle-group", className),
+    ...props,
+    children
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Item,
+  {
+    ref,
+    "data-slot": "toggle-group-item",
+    className: cn(toggleVariants({ variant, size }), className),
+    ...props
+  }
+));
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
+var DEFAULT_LABELS = {
+  weak: "Weak",
+  fair: "Fair",
+  strong: "Strong"
+};
+function usePasswordStrength(value, rules = [...DEFAULT_PASSWORD_RULES]) {
+  const uniqueRules = [...new Set(rules)];
+  const checks = {
+    length: value.length >= 8,
+    upper: /[A-Z]/.test(value),
+    lower: /[a-z]/.test(value),
+    number: /\d/.test(value),
+    symbol: /[^A-Za-z0-9]/.test(value)
+  };
+  const passed = uniqueRules.filter((rule) => checks[rule]).length;
+  const score = Math.max(0, Math.min(4, passed));
+  return { score, checks };
+}
+function scoreTone(score) {
+  if (score <= 1) return "destructive";
+  if (score <= 3) return "warning";
+  return "success";
+}
+function scoreLabel(score, labels) {
+  if (score <= 1) return labels.weak;
+  if (score <= 3) return labels.fair;
+  return labels.strong;
+}
+function PasswordStrength({
+  value,
+  rules = [...DEFAULT_PASSWORD_RULES],
+  showChecklist = true,
+  labels = DEFAULT_LABELS
+}) {
+  const normalizedRules = [...new Set(rules)];
+  const { score, checks } = usePasswordStrength(value, normalizedRules);
+  const tone = scoreTone(score);
+  const segments = Array.from({ length: 5 });
+  return /* @__PURE__ */ jsxs("div", { className: "ui-password-strength", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ui-password-strength-track",
+        role: "img",
+        "aria-label": `Password strength ${score}/4`,
+        children: segments.map((_, index) => {
+          const filled = index < score + 1;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-password-strength-segment",
+              "data-tone": filled ? tone : void 0,
+              "data-state": filled ? "filled" : "empty",
+              "aria-hidden": "true"
+            },
+            index
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "ui-password-strength-meta", children: [
+      /* @__PURE__ */ jsx("span", { className: "ui-password-strength-label", children: scoreLabel(score, labels) }),
+      /* @__PURE__ */ jsxs("span", { className: "ui-password-strength-score", "aria-hidden": "true", children: [
+        score,
+        "/4"
+      ] })
+    ] }),
+    showChecklist ? /* @__PURE__ */ jsx("ul", { className: "ui-password-strength-checklist", children: normalizedRules.map((rule) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "ui-password-strength-checklist-item",
+        "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) })
+        ]
+      },
+      rule
+    )) }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "sr-only", "aria-live": "polite", children: [
+      scoreLabel(score, labels),
+      " password strength"
+    ] })
+  ] });
+}
+function labelForRule(rule) {
+  switch (rule) {
+    case "length":
+      return "8+ characters";
+    case "upper":
+      return "Contains uppercase letter";
+    case "lower":
+      return "Contains lowercase letter";
+    case "number":
+      return "Contains number";
+    case "symbol":
+      return "Contains symbol";
+    default:
+      return rule;
+  }
+}
+
+export { PasswordStrength, Toggle, ToggleGroup, ToggleGroupItem, toggleVariants, usePasswordStrength };

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";

package/dist/{chunk-FRU44GA2.js → chunk-XK3M3VRR.js}

@@ -1,8 +1,22 @@
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { jsx } from 'react/jsx-runtime';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 
+var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    "data-slot": "separator",
+    "data-orientation": orientation,
+    orientation,
+    decorative,
+    className: cn("ui-separator", className),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 var AspectRatio = React.forwardRef(({ className, ratio = 16 / 9, ...props }, ref) => /* @__PURE__ */ jsx(
   AspectRatioPrimitive.Root,
   {
@@ -15,4 +29,4 @@ var AspectRatio = React.forwardRef(({ className, ratio = 16 / 9, ...props }, ref
 ));
 AspectRatio.displayName = AspectRatioPrimitive.Root.displayName;
 
-export { AspectRatio };
+export { AspectRatio, Separator };