@godxjp/ui 9.2.0 → 11.0.0

package/dist/{chunk-26WDEDWL.js → chunk-PUGEOUWZ.js}

@@ -1,8 +1,9 @@
-import { DropdownMenu, DropdownMenuTrigger } from './chunk-TO33OY4L.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.js';
+import { DropdownMenu, DropdownMenuTrigger } from './chunk-LMKUKCTN.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-DV52WNXO.js';
-import { densityClass, pageContainerVariantClass, Flex } from './chunk-TILFZBTE.js';
+import { densityClass, pageContainerVariantClass } from './chunk-INIIF7F7.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { ChevronRight, ChevronDown, PanelLeftOpen, PanelLeftClose, Search, Bell, SlidersHorizontal } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -75,12 +76,6 @@ function PageContainerRoot({
 var PageContainer = Object.assign(PageContainerRoot, {
   Inset: PageContainerInset
 });
-function PageInset(props) {
-  return /* @__PURE__ */ jsx(PageContainerInset, { ...props });
-}
-function Stack(props) {
-  return /* @__PURE__ */ jsx(Flex, { direction: "col", ...props });
-}
 function AppShell({
   sidebar,
   topbar,
@@ -92,6 +87,7 @@ function AppShell({
   children,
   sidebarCollapsed = false
 }) {
+  const { t } = useTranslation();
   const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
     logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
@@ -99,17 +95,18 @@ function AppShell({
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "app-root", "data-collapsed": sidebarCollapsed ? "true" : void 0, children: [
-    /* @__PURE__ */ jsx("aside", { className: "app-sidebar", children: sidebar }),
-    /* @__PURE__ */ jsx("header", { className: "app-topbar", children: resolvedTopbar }),
-    /* @__PURE__ */ jsxs("main", { className: "app-main", children: [
+    /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar }),
+    /* @__PURE__ */ jsx("header", { className: "app-topbar", "aria-label": t("layout.appShell.headerLabel"), children: resolvedTopbar }),
+    /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), children: [
       breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
       children
     ] }),
-    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", children: footer })
+    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer })
   ] });
 }
 function Breadcrumb({ items, linkComponent: LinkComponent = "a" }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("nav", { "aria-label": t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
       item.to && !isLast ? /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),
@@ -298,6 +295,7 @@ function Sidebar({
   renderItem,
   footer
 }) {
+  const { t } = useTranslation();
   const resolvedSections = sections ?? [];
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
     brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? /* @__PURE__ */ jsxs(
@@ -324,7 +322,7 @@ function Sidebar({
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx("div", { className: "sb-nav-scroll", children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
       SidebarSection,
       {
         label: section.label,
@@ -373,6 +371,7 @@ function Topbar({
   onNotificationsOpen,
   user
 }) {
+  const { t } = useTranslation();
   const productChip = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -414,7 +413,7 @@ function Topbar({
       {
         type: "button",
         className: "tb-icon-btn",
-        "aria-label": "Toggle sidebar",
+        "aria-label": t("layout.topbar.toggleSidebar"),
         "aria-pressed": collapsed,
         onClick: onToggleCollapsed,
         children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PanelLeftClose, { "aria-hidden": "true" })
@@ -431,18 +430,28 @@ function Topbar({
         projectMenu
       ] }) : projectChip : null
     ] }),
-    /* @__PURE__ */ jsxs("button", { type: "button", className: "tb-search", onClick: onSearchOpen, children: [
-      /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx("span", { children: "Search..." }),
-      /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2318K" })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "tb-search",
+        "aria-label": t("layout.topbar.search"),
+        "aria-keyshortcuts": "Meta+K",
+        onClick: onSearchOpen,
+        children: [
+          /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: t("layout.topbar.searchPlaceholder") }),
+          /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2318K" })
+        ]
+      }
+    ),
     rightSlot,
     onNotificationsOpen ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         className: "tb-icon-btn tb-bell",
-        "aria-label": "Notifications",
+        "aria-label": t("layout.topbar.notifications"),
         onClick: onNotificationsOpen,
         children: [
           /* @__PURE__ */ jsx(Bell, { "aria-hidden": "true" }),
@@ -456,7 +465,7 @@ function Topbar({
       {
         type: "button",
         className: "tb-icon-btn",
-        "aria-label": "Open tweaks",
+        "aria-label": t("layout.topbar.tweaks"),
         onClick: onTweaksOpen,
         children: /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" })
       }
@@ -487,4 +496,4 @@ function SplitPane({ children, aside, asideWidth = "md" }) {
   ] });
 }
 
-export { AppShell, Breadcrumb, PageContainer, PageInset, ResponsiveGrid, Sidebar, SidebarHeader, SidebarItem, SidebarSection, SplitPane, Stack, Topbar };
+export { AppShell, Breadcrumb, PageContainer, ResponsiveGrid, Sidebar, SidebarHeader, SidebarItem, SidebarSection, SplitPane, Topbar };

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-E7HBHUJY.js → chunk-QVLUCB47.js}

@@ -1,13 +1,14 @@
-import { humanError } from './chunk-4R7QL3MW.js';
+import { humanError } from './chunk-X2VY4MOW.js';
+import { Flex } from './chunk-INIIF7F7.js';
 import { Button } from './chunk-M4PZNAMV.js';
-import { Inline } from './chunk-TILFZBTE.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { Info, CheckCircle2, TriangleAlert, AlertCircle, X, RefreshCw } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var AlertContext = React.createContext("default");
+var ASSERTIVE_TONES = /* @__PURE__ */ new Set(["destructive", "warning"]);
 var DEFAULT_ICONS = {
   default: Info,
   destructive: AlertCircle,
@@ -19,12 +20,13 @@ var DEFAULT_ICONS = {
 };
 var AlertBase = React.forwardRef(
   ({ variant = "default", tone = "default", icon, onDismiss, className, children, ...props }, ref) => {
+    const { t } = useTranslation();
     const IconComponent = icon === false ? null : icon ?? DEFAULT_ICONS[tone];
     return /* @__PURE__ */ jsx(AlertContext.Provider, { value: tone, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        role: "alert",
+        role: ASSERTIVE_TONES.has(tone) ? "alert" : "status",
         "data-slot": "alert",
         "data-variant": variant,
         "data-tone": tone,
@@ -43,7 +45,7 @@ var AlertBase = React.forwardRef(
               },
               "data-slot": "alert-dismiss",
               className: "ring-offset-background focus-visible:ring-ring transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-              "aria-label": "Dismiss",
+              "aria-label": t("feedback.alert.dismiss"),
               children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
             }
           )
@@ -93,7 +95,7 @@ function AlertQueryError({ error, onRetry, className }) {
         onClick: () => {
           void onRetry();
         },
-        children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", children: [
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
           /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" }),
           t("common.retry")
         ] })

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

package/dist/{chunk-6J7GRCDA.js → chunk-UNVRNJCB.js}

@@ -1,10 +1,10 @@
 import { normalizeTreeOptions, collectAllExpandableKeys, filterVisibleTree, flattenVisibleTree, findNodeByValue, reactNodeText, getDescendantValues } from './chunk-SMLKNECP.js';
-import { Checkbox } from './chunk-O24Z3ULJ.js';
 import { Command, CommandInput } from './chunk-HTEL5DQI.js';
+import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { X, ChevronsUpDown, ChevronDown, ChevronRight } from 'lucide-react';
@@ -65,6 +65,8 @@ function TreeSelectRoot({
   );
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(() => toArray(defaultValue));
+  const [activeKey, setActiveKey] = React.useState(null);
+  const treeItemRefs = React.useRef(/* @__PURE__ */ new Map());
   const selected = isControlled ? toArray(value) : internal;
   const resolvedPlaceholder = placeholder ?? t("dataEntry.treeSelect.placeholder");
   const visible = React.useMemo(() => {
@@ -110,6 +112,53 @@ function TreeSelectRoot({
     e.stopPropagation();
     commit([]);
   };
+  const rovingKey = (activeKey && visible.some(({ node }) => node.value === activeKey) ? activeKey : null) ?? visible[0]?.node.value ?? null;
+  React.useEffect(() => {
+    if (!open || !activeKey) return;
+    treeItemRefs.current.get(activeKey)?.focus();
+  }, [activeKey, open, visible]);
+  const focusByOffset = (currentValue, delta) => {
+    const index = visible.findIndex(({ node }) => node.value === currentValue);
+    if (index === -1) return;
+    const next = visible[index + delta];
+    if (next) setActiveKey(next.node.value);
+  };
+  const onTreeItemKeyDown = (event, node, hasChildren, expanded) => {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        focusByOffset(node.value, 1);
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        focusByOffset(node.value, -1);
+        break;
+      }
+      case "ArrowRight": {
+        event.preventDefault();
+        if (hasChildren && !expanded) {
+          toggleExpand(node.value);
+        } else if (hasChildren && expanded) {
+          focusByOffset(node.value, 1);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (hasChildren && expanded) {
+          toggleExpand(node.value);
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        toggleSelect(node);
+        break;
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -127,13 +176,15 @@ function TreeSelectRoot({
         ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-          /* @__PURE__ */ jsxs("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ms-2 flex shrink-0 items-center gap-1", children: [
             allowClear && displayKeys.length > 0 && !disabled && /* @__PURE__ */ jsx(
-              X,
+              "button",
               {
-                className: "size-4 opacity-50 hover:opacity-100",
-                "aria-hidden": "true",
-                onClick: clearValue
+                type: "button",
+                "aria-label": t("dataEntry.treeSelect.clear"),
+                className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+                onClick: clearValue,
+                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
               }
             ),
             /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" })
@@ -162,16 +213,23 @@ function TreeSelectRoot({
             return /* @__PURE__ */ jsxs(
               "div",
               {
+                ref: (el) => {
+                  treeItemRefs.current.set(node.value, el);
+                },
                 role: "treeitem",
+                tabIndex: node.disabled ? -1 : rovingKey === node.value ? 0 : -1,
                 "aria-expanded": hasChildren ? expanded : void 0,
                 "aria-selected": isSelected,
+                onFocus: () => setActiveKey(node.value),
+                onKeyDown: (event) => onTreeItemKeyDown(event, node, hasChildren, expanded),
                 className: cn(
-                  "flex items-center rounded-sm py-1.5 pr-2 text-sm outline-none",
+                  "flex items-center rounded-sm py-1.5 pe-2 text-sm outline-none",
                   "hover:bg-accent hover:text-accent-foreground",
+                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1",
                   isSelected && "bg-accent/60",
                   node.disabled && "pointer-events-none opacity-50"
                 ),
-                style: { paddingLeft: `${depth * 1.25 + 0.5}rem` },
+                style: { paddingInlineStart: `${depth * 1.25 + 0.5}rem` },
                 children: [
                   /* @__PURE__ */ jsx(
                     "button",
@@ -180,7 +238,7 @@ function TreeSelectRoot({
                       tabIndex: -1,
                       "aria-label": expanded ? t("dataEntry.treeSelect.collapse") : t("dataEntry.treeSelect.expand"),
                       className: cn(
-                        "mr-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
+                        "me-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
                         !hasChildren && "invisible"
                       ),
                       onClick: () => toggleExpand(node.value),
@@ -192,6 +250,7 @@ function TreeSelectRoot({
                       Checkbox,
                       {
                         checked: isSelected,
+                        tabIndex: -1,
                         disabled: Boolean(node.disabled) || Boolean(node.disableCheckbox),
                         onCheckedChange: () => toggleSelect(node)
                       }
@@ -201,7 +260,8 @@ function TreeSelectRoot({
                     "button",
                     {
                       type: "button",
-                      className: "flex-1 truncate text-left",
+                      tabIndex: -1,
+                      className: "flex-1 truncate text-start",
                       disabled: node.disabled,
                       onClick: () => toggleSelect(node),
                       children: node.label