@godxjp/ui 9.2.0 → 10.0.0

package/dist/{chunk-6HQMUUQW.js → chunk-PDXFQS7M.js}

@@ -1,6 +1,6 @@
-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 * as React from 'react';
 import { MoreHorizontal, ChevronLeft, ChevronRight } from 'lucide-react';
@@ -38,13 +38,14 @@ var PaginationItem = React.forwardRef(
 );
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = React.forwardRef(
-  ({ className, isActive, disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx(
-    "a",
+  ({ 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,
-      "aria-disabled": disabled || void 0,
+      disabled: disabled || void 0,
       "data-state": disabled ? "disabled" : void 0,
       className: cn(
         "ui-pagination-link ui-button--compact-icon ui-pagination-page",
@@ -52,14 +53,7 @@ var PaginationLink = React.forwardRef(
         disabled ? "ui-pagination-link-disabled" : void 0,
         className
       ),
-      role: "button",
-      onClick: (event) => {
-        if (disabled) {
-          event.preventDefault();
-          return;
-        }
-        onClick?.(event);
-      },
+      onClick,
       ...props,
       children
     }
@@ -104,7 +98,7 @@ var PaginationNext = React.forwardRef(
 );
 PaginationNext.displayName = "PaginationNext";
 function Pagination({
-  current = 1,
+  value = 1,
   total = 0,
   pageSize = 10,
   pageSizeOptions = [10, 20, 50, 100],
@@ -113,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,
@@ -200,12 +194,8 @@ function Pagination({
           /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
             PaginationPrevious,
             {
-              href: "#",
               "aria-label": t("navigation.pagination.prev"),
-              onClick: (event) => {
-                event.preventDefault();
-                go(safeCurrent - 1);
-              },
+              onClick: () => go(safeCurrent - 1),
               className: "ui-button--compact-icon",
               disabled: Boolean(disabled) || safeCurrent <= 1,
               children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
@@ -217,11 +207,9 @@ function Pagination({
               {
                 isActive: page === safeCurrent,
                 "aria-label": t("navigation.pagination.page", { page }),
-                onClick: (event) => {
-                  event.preventDefault();
+                onClick: () => {
                   if (!disabled) go(page);
                 },
-                href: "#",
                 disabled,
                 children: page
               }
@@ -230,12 +218,8 @@ function Pagination({
           /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
             PaginationNext,
             {
-              href: "#",
               "aria-label": t("navigation.pagination.next"),
-              onClick: (event) => {
-                event.preventDefault();
-                go(safeCurrent + 1);
-              },
+              onClick: () => go(safeCurrent + 1),
               className: "ui-button--compact-icon",
               disabled: Boolean(disabled) || safeCurrent >= totalPages,
               children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })

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

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

@@ -1,8 +1,9 @@
-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 { 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 };