@godxjp/ui 33.1.1 → 33.3.0

package/dist/components/data-entry/command.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import type { CommandProp } from "../../props/components/data-entry.prop.js";
+import type { CommandProp, CommandSeparatorProp } from "../../props/components/data-entry.prop.js";
 export type { CommandProp, CommandProp as CommandProps };
+export type { CommandSeparatorProp, CommandSeparatorProp as CommandSeparatorProps };
 export declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
@@ -66,3 +67,23 @@ export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     keywords?: string[];
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A hairline between two groups of one list — e.g. the matches, then `+ Create "<q>"` (gh#1335).
+ * It is cmdk's own `Command.Separator`, so it must sit inside the same `Command` as its groups.
+ *
+ * `alwaysRender` defaults to `true`, the OPPOSITE of cmdk: cmdk drops a separator as soon as the
+ * search is non-empty, because in a palette the groups collapse under filtering. A "Create" group
+ * exists only BECAUSE the user typed, so with cmdk's default the rule vanished exactly when it
+ * was needed. Pass `alwaysRender={false}` for cmdk's palette behaviour.
+ *
+ * `aria-hidden` by default: the rule is decorative, and a `role="separator"` child is not allowed
+ * in the `listbox` CommandList renders (ARIA owns only `option` / `group` there); the groups'
+ * headings carry the structure.
+ */
+export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & CommandSeparatorProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-entry/command.js

@@ -50,11 +50,24 @@ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CommandPrimitive.Item, { ref, className: cn("ui-command-item", className), ...props }));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandSeparator = React.forwardRef(({ className, alwaysRender = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("ui-command-separator", className),
+    "data-slot": "command-separator",
+    "aria-hidden": "true",
+    alwaysRender,
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 export {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList
+  CommandList,
+  CommandSeparator
 };

package/dist/components/data-entry/form-field.js

@@ -5,7 +5,12 @@ import { CheckCircle, CircleAlert, LoaderCircle, TriangleAlert } from "lucide-re
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
-import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
+import {
+  FieldErrorReportContext,
+  FieldIdentityContext,
+  FieldNameContext,
+  mergeAriaIds
+} from "../../lib/field-a11y.js";
 import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useFormLayout } from "./form.js";
 import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
@@ -42,7 +47,8 @@ function FormField({
   const collapseBelow = form?.collapseBelow ?? "md";
   const errorsRegistry = useFormErrorsRegistry();
   useClaimErrorKey(name);
-  const error = errorProp ?? (name && errorsRegistry ? firstBagMessage(errorsRegistry.errors[name]) : void 0);
+  const [reportedError, setReportedError] = React.useState(void 0);
+  const error = errorProp ?? (name && errorsRegistry ? firstBagMessage(errorsRegistry.errors[name]) : void 0) ?? (reportedError === null || reportedError === false || reportedError === "" ? void 0 : reportedError);
   const autoId = React.useId();
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
@@ -165,7 +171,7 @@ function FormField({
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
           helperPlacement === "before" ? helperNode : null,
-          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: /* @__PURE__ */ jsx(
+          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: /* @__PURE__ */ jsx(FieldErrorReportContext.Provider, { value: setReportedError, children: /* @__PURE__ */ jsx(
             "fieldset",
             {
               role: "presentation",
@@ -173,7 +179,7 @@ function FormField({
               disabled: form?.disabled && childProps?.disabled !== false,
               children: childWithA11y
             }
-          ) }) }),
+          ) }) }) }),
           hasFeedback && validationStatus ? /* @__PURE__ */ jsxs(
             "span",
             {

package/dist/components/data-entry/index.d.ts

@@ -9,6 +9,8 @@ export { CheckboxGroup } from "./checkbox-group.js";
 export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 export { Textarea } from "./textarea.js";
 export type { TextareaProps } from "./textarea.js";
+export { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
+export type { TranslatableValue, TranslatableInputProp, TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProps, } from "./translatable-input.js";
 export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";
 export type { FormProp, FormProps } from "./form.js";
 export { FormField } from "./form-field.js";
@@ -47,8 +49,8 @@ export { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select.js"
 export type { TreeSelectProps } from "./tree-select.js";
 export { Transfer } from "./transfer.js";
 export type { TransferProps, TransferItemProp } from "./transfer.js";
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
-export type { CommandProps } from "./command.js";
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command.js";
+export type { CommandProps, CommandSeparatorProps } from "./command.js";
 export { CommandPalette } from "./command-palette.js";
 export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteRecent, CommandPaletteSelectModifiers, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";

package/dist/components/data-entry/index.js

@@ -17,6 +17,7 @@ import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 import { Textarea } from "./textarea.js";
+import { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
 import { FormErrors, FormErrorsProvider } from "./form-errors.js";
@@ -48,7 +49,8 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList
+  CommandList,
+  CommandSeparator
 } from "./command.js";
 import { CommandPalette } from "./command-palette.js";
 import { PasswordInput } from "./password-input.js";
@@ -77,6 +79,7 @@ export {
   CommandItem,
   CommandList,
   CommandPalette,
+  CommandSeparator,
   DatePicker,
   DayButton,
   Field,
@@ -123,6 +126,8 @@ export {
   ToggleGroup,
   ToggleGroupItem,
   Transfer,
+  TranslatableInput,
+  TranslatableTextarea,
   TreeSelect,
   UPLOAD_LIST_IGNORE,
   Upload,

package/dist/components/data-entry/translatable-input.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { TranslatableValue } from "../../props/components/data-entry.prop.js";
+export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * TranslatableInput — ONE text field that holds a value per locale (`{ ja, en, vi }`), switched by
+ * locale tabs above it (gh#1336). The locale list, the first tab and the fallback come from
+ * `AppProvider` and are overridable per field; an empty locale shows the fallback locale's text as
+ * its placeholder; a locale with an error is marked on its tab. Every other `Input` prop applies to
+ * the single control, and `ref` is that control's `<input>`.
+ */
+export declare const TranslatableInput: React.ForwardRefExoticComponent<Omit<import("./input.js").InputProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
+    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
+    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
+    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
+    locales?: readonly string[];
+    defaultLocale?: string;
+    fallbackLocale?: string;
+    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
+} & React.RefAttributes<HTMLInputElement>>;
+/** TranslatableTextarea — {@link TranslatableInput} over a `Textarea`; `ref` is the `<textarea>`. */
+export declare const TranslatableTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea.js").TextareaProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
+    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
+    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
+    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
+    locales?: readonly string[];
+    defaultLocale?: string;
+    fallbackLocale?: string;
+    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/data-entry/translatable-input.js

@@ -0,0 +1,184 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CircleAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { getRegisteredLocales } from "../../i18n/locale-tags.js";
+import { mergeAriaIds, useReportFieldError } from "../../lib/field-a11y.js";
+import { displayNames } from "../../lib/intl-cache.js";
+import { cn } from "../../lib/utils.js";
+import { Tabs, TabsList, TabsTrigger } from "../navigation/tabs.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+const NO_VALUE = {};
+function localeName(code, uiLocale) {
+  try {
+    return displayNames(uiLocale, { type: "language" }).of(code) ?? code;
+  } catch {
+    return code;
+  }
+}
+const idPart = (code) => code.replace(/[^A-Za-z0-9_-]/g, "_");
+function TranslatableField({
+  kind,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  locales: localesProp,
+  defaultLocale,
+  fallbackLocale: fallbackLocaleProp,
+  errors,
+  size,
+  placeholder,
+  className,
+  forwardedRef,
+  ...rest
+}) {
+  const { t, locale: uiLocale, fallbackLocale: appFallbackLocale } = useTranslation();
+  const locales = React.useMemo(() => {
+    const list = localesProp ?? getRegisteredLocales();
+    return list.length > 0 ? list : [uiLocale];
+  }, [localesProp, uiLocale]);
+  const pick = (candidates) => candidates.find((code) => code !== void 0 && locales.includes(code)) ?? locales[0];
+  const fallbackLocale = pick([fallbackLocaleProp, appFallbackLocale]);
+  const [activeState, setActiveState] = React.useState(
+    () => pick([defaultLocale, uiLocale, fallbackLocale])
+  );
+  const active = locales.includes(activeState) ? activeState : pick([defaultLocale, fallbackLocale]);
+  const [innerValue, setInnerValue] = React.useState(defaultValue ?? NO_VALUE);
+  const current = valueProp ?? innerValue;
+  const currentRef = React.useRef(current);
+  currentRef.current = current;
+  const handleText = (text) => {
+    const next = { ...currentRef.current, [active]: text };
+    currentRef.current = next;
+    if (valueProp === void 0) setInnerValue(next);
+    onValueChange?.(next);
+  };
+  const activeText = current[active] ?? "";
+  const fallbackText = active !== fallbackLocale && activeText === "" ? current[fallbackLocale] : void 0;
+  const activeError = errors?.[active];
+  const hasActiveError = activeError !== void 0 && activeError !== null && activeError !== false && activeError !== "";
+  const insideFormField = useReportFieldError(hasActiveError ? activeError : void 0);
+  const baseId = React.useId();
+  const tabId = (code) => `${baseId}-tab-${idPart(code)}`;
+  const panelId = `${baseId}-panel`;
+  const switcherNameId = `${baseId}-languages`;
+  const localeNameId = `${baseId}-locale`;
+  const ownErrorId = `${baseId}-error`;
+  const labelledBy = rest["aria-labelledby"];
+  const ariaLabel = rest["aria-label"];
+  const showOwnError = hasActiveError && !insideFormField;
+  const controlProps = {
+    ...rest,
+    ref: forwardedRef,
+    lang: active,
+    value: activeText,
+    onValueChange: handleText,
+    placeholder: fallbackText ? fallbackText : placeholder,
+    // The control is named by the field AND the locale it holds: "商品名 English".
+    "aria-labelledby": labelledBy ? `${labelledBy} ${localeNameId}` : void 0,
+    "aria-invalid": hasActiveError ? true : rest["aria-invalid"],
+    "aria-errormessage": mergeAriaIds(
+      rest["aria-errormessage"],
+      showOwnError ? ownErrorId : void 0
+    ),
+    status: hasActiveError ? "error" : rest.status
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "translatable-field",
+      "data-size": size,
+      className: cn("ui-translatable-field", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            value: active,
+            onValueChange: setActiveState,
+            size: size === "lg" ? "md" : "sm",
+            controls: panelId,
+            className: "ui-translatable-field-tabs",
+            ...labelledBy ? { "aria-labelledby": `${labelledBy} ${switcherNameId}` } : {
+              "aria-label": [ariaLabel, t("dataEntry.translatable.languages")].filter(Boolean).join(" ")
+            },
+            children: /* @__PURE__ */ jsx(TabsList, { children: locales.map((code) => {
+              const error = errors?.[code];
+              const invalid = error !== void 0 && error !== null && error !== false && error !== "";
+              return /* @__PURE__ */ jsxs(
+                TabsTrigger,
+                {
+                  id: tabId(code),
+                  value: code,
+                  "data-locale": code,
+                  "data-invalid": invalid ? "true" : void 0,
+                  "data-filled": current[code] ? "true" : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: localeName(code, uiLocale) }),
+                    invalid ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(CircleAlert, { className: "ui-translatable-field-error-mark", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${t("dataEntry.translatable.hasError")}` })
+                    ] }) : null
+                  ]
+                },
+                code
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { id: switcherNameId, hidden: true, children: t("dataEntry.translatable.languages") }),
+        /* @__PURE__ */ jsx("span", { id: localeNameId, hidden: true, children: localeName(active, uiLocale) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tabpanel",
+            id: panelId,
+            "aria-labelledby": tabId(active),
+            className: "ui-translatable-field-panel",
+            children: kind === "input" ? /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...controlProps,
+                size
+              }
+            ) : /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ...controlProps,
+                size
+              }
+            )
+          }
+        ),
+        showOwnError ? /* @__PURE__ */ jsx("p", { id: ownErrorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: activeError }) : null
+      ]
+    }
+  );
+}
+const TranslatableInput = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(
+    TranslatableField,
+    {
+      ...props,
+      kind: "input",
+      forwardedRef: ref
+    }
+  )
+);
+TranslatableInput.displayName = "TranslatableInput";
+const TranslatableTextarea = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(
+    TranslatableField,
+    {
+      ...props,
+      kind: "textarea",
+      forwardedRef: ref
+    }
+  )
+);
+TranslatableTextarea.displayName = "TranslatableTextarea";
+export {
+  TranslatableInput,
+  TranslatableTextarea
+};

package/dist/components/navigation/index.d.ts

@@ -3,6 +3,8 @@ export { Pagination, PaginationContent, PaginationItem, PaginationLink, Paginati
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
 export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./toolbar.js";
+export { SearchForm } from "./search-form.js";
+export type { SearchFormProp, SearchFormProps } from "./search-form.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingPickerMenuProp, AppSettingPickerCycleProp, AppSettingKind, AppSettingCycleKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/components/navigation/index.js

@@ -10,6 +10,7 @@ import {
 } from "./pagination.js";
 import { Steps } from "./steps.js";
 import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
+import { SearchForm } from "./search-form.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
 import {
   DropdownMenu,
@@ -54,6 +55,7 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  SearchForm,
   Steps,
   Tabs,
   TabsContent,

package/dist/components/navigation/search-form.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { SearchFormProp } from "../../props/components/navigation.prop.js";
+export type { SearchFormProp, SearchFormProp as SearchFormProps };
+/**
+ * SearchForm — the submit-driven 検索条件フォーム (Ant Design ProComponents `QueryFilter`).
+ *
+ * A `search` landmark (`<form role="search">`) holding a grid of labelled conditions, aligned in
+ * columns. The conditions past the first row sit behind one 詳細条件を開く / 閉じる toggle that
+ * names how many are hidden; Search (検索) submits, Clear (クリア) resets. After a search the
+ * conditions the results were searched with, and the result count, are announced in one
+ * `role="status"` line. Every label is localized through the library catalogue.
+ *
+ * Choose it over a live FilterBar when the conditions are many, the query is heavy, or the users
+ * expect an explicit 検索 button (Japanese business systems). Hidden conditions stay MOUNTED, so a
+ * value typed into one survives collapsing the section.
+ */
+export declare const SearchForm: React.ForwardRefExoticComponent<Omit<import("../data-entry/index.js").FormProp, "aria-label" | "asChild" | "children" | "columns" | "onReset" | "role"> & {
+    children: import("../../props/index.js").ChildrenProp;
+    columns?: import("../../props/components/layout.prop.js").ResponsiveGridColumnsProp;
+    visibleFields?: number;
+    open?: import("../../props/index.js").OpenProp;
+    defaultOpen?: import("../../props/index.js").DefaultOpenProp;
+    onOpenChange?: import("../../props/index.js").OnOpenChangeProp;
+    onReset?: () => void;
+    searchLabel?: import("../../props/index.js").LabelProp;
+    resetLabel?: import("../../props/index.js").LabelProp;
+    summary?: React.ReactNode;
+    resultCount?: number;
+    loading?: import("../../props/index.js").PendingProp;
+    label?: string;
+} & React.RefAttributes<HTMLFormElement>>;

package/dist/components/navigation/search-form.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Form } from "../data-entry/form.js";
+import { Button } from "../general/button.js";
+import { ResponsiveGrid } from "../layout/responsive-grid.js";
+const DEFAULT_COLUMNS = { base: 1, md: 2, lg: 3 };
+function widestStep(columns) {
+  if (typeof columns === "number") return Math.max(1, columns);
+  const steps = Object.values(columns ?? DEFAULT_COLUMNS).filter(
+    (n) => typeof n === "number"
+  );
+  return Math.max(1, ...steps);
+}
+const SearchForm = React.forwardRef(function SearchForm2({
+  children,
+  columns = DEFAULT_COLUMNS,
+  visibleFields,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  onReset,
+  searchLabel,
+  resetLabel,
+  summary,
+  resultCount,
+  loading,
+  label,
+  className,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const baseId = React.useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isOpen = open ?? uncontrolledOpen;
+  const fields = React.Children.toArray(children).filter(React.isValidElement);
+  const limit = Math.max(1, visibleFields ?? widestStep(columns));
+  const hiddenCount = Math.max(0, fields.length - limit);
+  const hiddenIds = Array.from({ length: hiddenCount }, (_, i) => `${baseId}-more-${i}`);
+  const toggle = () => {
+    const next = !isOpen;
+    if (open === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const showMeta = summary != null || resultCount !== void 0;
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ref,
+      role: "search",
+      "aria-label": label ?? t("navigation.searchForm.label"),
+      className: cn("ui-search-form", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "ui-search-form-body", children: [
+        /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children: fields.map(
+          (field, index) => index < limit ? field : (
+            /* Past the first row: kept mounted and hidden, so a typed value survives a collapse. */
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: hiddenIds[index - limit],
+                hidden: !isOpen,
+                className: "ui-search-form-more",
+                children: field
+              },
+              field.key ?? index
+            )
+          )
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-search-form-actions", children: [
+          hiddenCount > 0 && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "ui-search-form-toggle",
+              "aria-expanded": isOpen,
+              "aria-controls": hiddenIds.join(" "),
+              onClick: toggle,
+              count: isOpen ? void 0 : hiddenCount,
+              showZero: false,
+              countLabel: t("navigation.searchForm.hiddenCount"),
+              children: [
+                isOpen ? t("navigation.searchForm.collapse") : t("navigation.searchForm.expand"),
+                isOpen ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ui-search-form-submit", children: [
+            onReset && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onReset, children: resetLabel ?? t("navigation.searchForm.reset") }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: searchLabel ?? t("navigation.searchForm.search") })
+          ] })
+        ] }),
+        showMeta && /* @__PURE__ */ jsxs("p", { role: "status", className: "ui-search-form-meta", children: [
+          summary != null && /* @__PURE__ */ jsxs("span", { className: "ui-search-form-summary", children: [
+            /* @__PURE__ */ jsx("span", { className: "ui-search-form-summary-label", children: t("navigation.searchForm.summary") }),
+            " ",
+            summary
+          ] }),
+          resultCount !== void 0 && /* @__PURE__ */ jsx("span", { className: "ui-search-form-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  SearchForm
+};

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.1.1",
+  "version": "33.3.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -278,6 +278,10 @@
         "number": "Contains number",
         "symbol": "Contains symbol"
       }
+    },
+    "translatable": {
+      "languages": "Language",
+      "hasError": "has an error"
     }
   },
   "feedback": {
@@ -584,6 +588,15 @@
         "other": "{count} results"
       }
     },
+    "searchForm": {
+      "label": "Search conditions",
+      "search": "Search",
+      "reset": "Clear",
+      "expand": "More conditions",
+      "collapse": "Fewer conditions",
+      "hiddenCount": "hidden conditions",
+      "summary": "Searched with:"
+    },
     "localePicker": {
       "ariaLabel": "Language"
     },

package/dist/i18n/messages/ja.json

@@ -273,6 +273,10 @@
         "number": "数字を含む",
         "symbol": "記号を含む"
       }
+    },
+    "translatable": {
+      "languages": "言語",
+      "hasError": "エラーあり"
     }
   },
   "feedback": {
@@ -570,6 +574,15 @@
       "removeFilter": "フィルターを解除: {label}",
       "resultCount": "{count} 件の結果"
     },
+    "searchForm": {
+      "label": "検索条件",
+      "search": "検索",
+      "reset": "クリア",
+      "expand": "詳細条件を開く",
+      "collapse": "詳細条件を閉じる",
+      "hiddenCount": "件の条件が非表示",
+      "summary": "検索条件:"
+    },
     "localePicker": {
       "ariaLabel": "言語"
     },

package/dist/i18n/messages/vi.json

@@ -274,6 +274,10 @@
         "number": "Có chữ số",
         "symbol": "Có ký hiệu"
       }
+    },
+    "translatable": {
+      "languages": "Ngôn ngữ",
+      "hasError": "có lỗi"
     }
   },
   "feedback": {
@@ -571,6 +575,15 @@
       "removeFilter": "Bỏ bộ lọc: {label}",
       "resultCount": "{count} kết quả"
     },
+    "searchForm": {
+      "label": "Điều kiện tìm kiếm",
+      "search": "Tìm kiếm",
+      "reset": "Xoá điều kiện",
+      "expand": "Mở thêm điều kiện",
+      "collapse": "Thu gọn điều kiện",
+      "hiddenCount": "điều kiện đang ẩn",
+      "summary": "Điều kiện tìm kiếm:"
+    },
     "localePicker": {
       "ariaLabel": "Ngôn ngữ"
     },

package/dist/lib/field-a11y.d.ts

@@ -106,3 +106,18 @@ export declare function pickGroupFieldA11y(props: FieldA11yProps): {
     "aria-describedby"?: string;
     "data-field"?: string;
 };
+/**
+ * A control that owns SEVERAL values reports which of its messages is current (gh#1336). A
+ * `TranslatableInput` holds one value per locale and gets one message per locale; only the active
+ * locale's message describes the text the user is looking at, and only the control knows which
+ * locale that is. FormField reads the report as the lowest-precedence source of its `error` — its
+ * own `error` prop and the form's error bag both win — so the message renders in FormField's own
+ * error line and reaches the control through the same `aria-invalid` / `aria-errormessage` wiring
+ * every other field uses. `null` outside a FormField.
+ */
+export declare const FieldErrorReportContext: React.Context<((message: React.ReactNode) => void) | null>;
+/**
+ * Report `message` (or its absence) to the enclosing FormField. Returns `true` when a FormField is
+ * listening — a caller with no FormField above it has to render its own message.
+ */
+export declare function useReportFieldError(message: React.ReactNode): boolean;