@godxjp/ui 9.1.0 → 10.0.0

package/dist/{chunk-442ULAA6.js → chunk-TGNBXS7H.js}

@@ -1,13 +1,13 @@
-import { DropdownMenu, DropdownMenuTrigger } from './chunk-TO33OY4L.js';
+import { DropdownMenu, DropdownMenuTrigger } from './chunk-LMKUKCTN.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 function PageContainerInset({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-page-container-inset", className), ...props, children });
@@ -76,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,
@@ -93,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 }),
@@ -100,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 }),
@@ -118,33 +114,91 @@ function Breadcrumb({ items, linkComponent: LinkComponent = "a" }) {
     ] }, item.to ?? index);
   }) }) });
 }
-function isItemActive(item, activeId) {
-  if (item.id === activeId) return true;
-  return (item.children ?? []).some((child) => isItemActive(child, activeId));
+function SidebarHeader({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("sb-brand", className), ...props, children });
 }
-function NavLeaf({ item, activeId, onSelect, sub = false }) {
+function SidebarSection({
+  label,
+  collapsed = false,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("sb-section", className), ...props, children: [
+    label && !collapsed ? /* @__PURE__ */ jsx("div", { className: "sb-section-label", children: label }) : null,
+    /* @__PURE__ */ jsx("div", { className: "sb-nav", children })
+  ] });
+}
+function SidebarItem({
+  item,
+  active = false,
+  sub = false,
+  onActivate,
+  renderItem,
+  children,
+  ...props
+}) {
   const Icon = item.icon;
-  const active = item.id === activeId;
-  return /* @__PURE__ */ jsxs(
+  const showBadge = item.badge !== void 0 && item.badge !== "";
+  const disabled = item.disabled || props.disabled;
+  const content = children ?? (renderItem ? renderItem(item) : void 0);
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       className: cn("sb-nav-item", sub && "sb-nav-item--sub"),
       "data-active": active ? "true" : void 0,
       "aria-current": active ? "page" : void 0,
-      "aria-disabled": item.disabled,
+      "aria-disabled": disabled,
+      ...props,
       onClick: () => {
-        if (!item.disabled) onSelect?.(item.id);
+        if (disabled) return;
+        onActivate?.(item.id);
       },
-      children: [
+      children: content ? content : /* @__PURE__ */ jsxs(Fragment, { children: [
         !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
         /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
-        item.badge !== void 0 && item.badge !== "" ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
-      ]
+        showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+      ] })
     }
   );
 }
-function NavGroup({ item, activeId, onSelect }) {
+function isItemActive(item, activeId) {
+  if (item.id === activeId) return true;
+  return (item.children ?? []).some((child) => isItemActive(child, activeId));
+}
+function NavLeaf({ item, activeId, onSelect, sub = false, renderItem }) {
+  const active = item.id === activeId;
+  return /* @__PURE__ */ jsx(
+    SidebarItem,
+    {
+      item,
+      active,
+      onActivate: onSelect,
+      sub,
+      renderItem
+    }
+  );
+}
+function NavLeafsInGroup({
+  children,
+  activeId,
+  onSelect,
+  renderItem
+}) {
+  return children.map((child) => /* @__PURE__ */ jsx(
+    NavLeaf,
+    {
+      item: child,
+      activeId,
+      onSelect,
+      sub: true,
+      renderItem
+    },
+    child.id
+  ));
+}
+function NavGroup({ item, activeId, onSelect, renderItem }) {
   const Icon = item.icon;
   const active = isItemActive(item, activeId);
   const children = item.children ?? [];
@@ -161,7 +215,7 @@ function NavGroup({ item, activeId, onSelect }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "sb-nav-sub", children: children.map((child) => /* @__PURE__ */ jsx(NavLeaf, { item: child, activeId, onSelect, sub: true }, child.id)) }) })
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "sb-nav-sub", children: children.length > 0 ? /* @__PURE__ */ jsx(NavLeafsInGroup, { activeId, onSelect, renderItem, children }) : null }) })
   ] });
 }
 function CollapsedRow({ item, activeId, onSelect }) {
@@ -237,10 +291,14 @@ function Sidebar({
   onProductClick,
   brand,
   collapsed = false,
+  children,
+  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("div", { className: "sb-brand", children: brand }) : product ? /* @__PURE__ */ jsxs(
+    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -256,20 +314,43 @@ function Sidebar({
               children: product.name[0]?.toUpperCase() ?? "?"
             }
           ),
-          !collapsed && /* @__PURE__ */ jsxs("span", { className: "sb-product-meta", children: [
+          !collapsed ? /* @__PURE__ */ jsxs("span", { className: "sb-product-meta", children: [
             /* @__PURE__ */ jsx("span", { className: "sb-product-name", children: product.name }),
             product.role ? /* @__PURE__ */ jsx("span", { className: "sb-product-tenant", children: product.role }) : null
-          ] }),
-          !collapsed && /* @__PURE__ */ jsx("span", { className: "sb-product-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
+          ] }) : null,
+          !collapsed ? /* @__PURE__ */ jsx("span", { className: "sb-product-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) }) : null
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx("div", { className: "sb-nav-scroll", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { className: "sb-section", children: [
-      section.label && !collapsed ? /* @__PURE__ */ jsx("div", { className: "sb-section-label", children: section.label }) : null,
-      /* @__PURE__ */ jsx("div", { className: "sb-nav", role: "navigation", children: section.items.map(
-        (item) => collapsed ? /* @__PURE__ */ jsx(CollapsedRow, { item, activeId, onSelect }, item.id) : item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, activeId, onSelect }, item.id) : /* @__PURE__ */ jsx(NavLeaf, { item, activeId, onSelect }, item.id)
-      ) })
-    ] }, section.label ?? sectionIndex)) }),
+    /* @__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,
+        collapsed,
+        children: section.items.map(
+          (item) => collapsed ? /* @__PURE__ */ jsx(CollapsedRow, { item, activeId, onSelect }, item.id) : item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
+            NavGroup,
+            {
+              item,
+              activeId,
+              onSelect,
+              renderItem
+            },
+            item.id
+          ) : /* @__PURE__ */ jsx(
+            NavLeaf,
+            {
+              item,
+              activeId,
+              onSelect,
+              renderItem
+            },
+            item.id
+          )
+        )
+      },
+      section.label ?? sectionIndex
+    )) }),
     footer ? /* @__PURE__ */ jsx("div", { className: "sb-footer", children: footer }) : null
   ] });
 }
@@ -278,6 +359,7 @@ function Topbar({
   project,
   productMenu,
   projectMenu,
+  projectPlaceholder,
   onProductOpen,
   onProjectOpen,
   onSearchOpen,
@@ -289,6 +371,7 @@ function Topbar({
   onNotificationsOpen,
   user
 }) {
+  const { t } = useTranslation();
   const productChip = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -316,10 +399,10 @@ function Topbar({
     {
       type: "button",
       className: `tb-chip ${project ? "" : "tb-chip-empty"}`,
-      "aria-label": project ? project.name : "Pick project",
+      "aria-label": project ? project.name : projectPlaceholder ?? "",
       onClick: projectMenu ? void 0 : onProjectOpen,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: project ? project.name : "Pick project" }),
+        /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: project ? project.name : projectPlaceholder ?? "\u2014" }),
         /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
       ]
     }
@@ -330,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" })
@@ -347,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" }),
@@ -372,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" })
       }
@@ -402,18 +495,5 @@ function SplitPane({ children, aside, asideWidth = "md" }) {
     /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", children: aside })
   ] });
 }
-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;
 
-export { AppShell, Breadcrumb, PageContainer, PageInset, ResponsiveGrid, Separator, Sidebar, SplitPane, Stack, Topbar };
+export { AppShell, Breadcrumb, PageContainer, ResponsiveGrid, Sidebar, SidebarHeader, SidebarItem, SidebarSection, SplitPane, Topbar };

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