@godxjp/ui 33.2.1 → 33.3.0

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.2.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

@@ -588,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

@@ -574,6 +574,15 @@
       "removeFilter": "フィルターを解除: {label}",
       "resultCount": "{count} 件の結果"
     },
+    "searchForm": {
+      "label": "検索条件",
+      "search": "検索",
+      "reset": "クリア",
+      "expand": "詳細条件を開く",
+      "collapse": "詳細条件を閉じる",
+      "hiddenCount": "件の条件が非表示",
+      "summary": "検索条件:"
+    },
     "localePicker": {
       "ariaLabel": "言語"
     },

package/dist/i18n/messages/vi.json

@@ -575,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/props/components/layout.prop.d.ts

@@ -401,9 +401,11 @@ export type ResponsiveGridPresetProp = "pricing-plans";
  * Block-axis alignment of the cells in each grid row — antd `Row align`, spelled with Flex's
  * `FlexAlignProp` values (antd `top` → `start`; `stretch` is the same word). `stretch` gives every
  * cell the height of the tallest one, so an empty Kanban lane is still a full-height drop zone.
+ * `center` is antd `middle`: cells of different heights share one centre line (a condition row's
+ * number and ＋/− buttons beside taller controls).
  * Omitted, each flow keeps its own alignment: `columns` → `start`, `rows` → the grid's stretch.
  */
-export type ResponsiveGridAlignProp = Extract<FlexAlignProp, "start" | "stretch">;
+export type ResponsiveGridAlignProp = Extract<FlexAlignProp, "start" | "center" | "stretch">;
 export type MasterDetailRailWidthProp = "narrow" | "compact" | "standard" | "wide";
 export type MasterDetailRailProp = "master" | "detail";
 /**

package/dist/props/components/navigation.prop.d.ts

@@ -1,9 +1,9 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
 import type { ReactNode } from "react";
-import type { AffixProp, AffixTargetProp } from "./layout.prop.js";
-import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
-import type { SearchSelectOptionProp } from "./data-entry.prop.js";
+import type { AffixProp, AffixTargetProp, ResponsiveGridColumnsProp } from "./layout.prop.js";
+import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, OnOpenChangeProp, OpenProp, DefaultOpenProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
+import type { FormProp, SearchSelectOptionProp } from "./data-entry.prop.js";
 /**
  * Renders the canonical SearchInput as the FIRST control of the strip, with a token-owned
  * consistent width (`--filter-bar-search-width`, full-width below 640px). Controlled by consumer
@@ -123,6 +123,46 @@ export type ToolbarProp = {
 export type FilterBarViewsPlacementProp = "above" | "inline";
 /** @see ToolbarProp.clearDisplay */
 export type FilterBarClearDisplayProp = "label" | "icon";
+/**
+ * @see SearchForm — the submit-driven 検索条件フォーム (Ant Design ProComponents `QueryFilter`): a
+ * grid of labelled conditions, an explicit Search (検索) + Clear (クリア) pair, the conditions past
+ * the first row behind one 詳細条件を開く toggle, and a 検索条件 summary + result count after the
+ * search. A live FilterBar applies each change at once; a SearchForm applies them on submit.
+ */
+export type SearchFormProp = Omit<FormProp, "role" | "onReset" | "children" | "columns" | "asChild" | "aria-label"> & {
+    /** One FormField per condition, in reading order. Each direct child is one grid cell. */
+    children: ChildrenProp;
+    /** Grid columns per breakpoint. Default `{ base: 1, md: 2, lg: 3 }`: one column on a phone. */
+    columns?: ResponsiveGridColumnsProp;
+    /**
+     * How many conditions stay visible while the detail section is closed (antd
+     * `defaultFormItemsNumber`). Defaults to the widest `columns` step: the first row.
+     */
+    visibleFields?: number;
+    /** Whether the conditions past `visibleFields` are shown (controlled). */
+    open?: OpenProp;
+    /** Initial open state when uncontrolled. Default `false`: collapsed to the first row. */
+    defaultOpen?: DefaultOpenProp;
+    /** Fires when the 詳細条件を開く / 閉じる toggle is pressed. */
+    onOpenChange?: OnOpenChangeProp;
+    /** Clear (クリア) handler. The Clear button renders only when this is set. */
+    onReset?: () => void;
+    /** Overrides the localized Search (検索) button text. */
+    searchLabel?: LabelProp;
+    /** Overrides the localized Clear (クリア) button text. */
+    resetLabel?: LabelProp;
+    /**
+     * The conditions the CURRENT results were searched with, shown after the localized 検索条件
+     * label in a `role="status"` line (e.g. 「国: ベトナム / 状態: 稼働中」).
+     */
+    summary?: ReactNode;
+    /** Localized, pluralized result count shown in the same status line. */
+    resultCount?: number;
+    /** Puts the Search button in its loading state while the query runs. */
+    loading?: PendingProp;
+    /** Accessible name of the `search` landmark. Defaults to a localized "Search conditions". */
+    label?: string;
+};
 /** @see ToolbarGroup */
 export type ToolbarGroupProp = {
     label: LabelProp;

package/dist/props/registry.d.ts

@@ -2692,6 +2692,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "StickyProp", "ActionsProp", "PendingProp", "DisabledProp", "ErrorProp", "ClassNameProp", "ChildrenProp"];
     };
+    readonly SearchFormProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "LabelProp", "PendingProp", "ChildrenProp"];
+    };
     readonly FilterBarClearDisplayProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";

package/dist/props/registry.js

@@ -3159,6 +3159,18 @@ const COMPONENT_PROP_REGISTRY = {
       "ChildrenProp"
     ]
   },
+  SearchFormProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: [
+      "OpenProp",
+      "DefaultOpenProp",
+      "OnOpenChangeProp",
+      "LabelProp",
+      "PendingProp",
+      "ChildrenProp"
+    ]
+  },
   FilterBarClearDisplayProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.2.1",
+  "version": "33.3.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -853,6 +853,16 @@
         "data-display-layout.css"
       ]
     },
+    "SearchForm": {
+      "layers": [
+        "layout.css",
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
+        "alert-layout.css",
+        "form-layout.css"
+      ]
+    },
     "SearchInput": {
       "layers": [
         "control.css"

package/dist/styles/layout.css

@@ -431,6 +431,10 @@
     align-items: stretch;
   }
 
+  .ui-responsive-grid[data-align="center"] {
+    align-items: center;
+  }
+
   .ui-responsive-grid[data-gap="none"] {
     gap: 0;
   }
@@ -1580,6 +1584,43 @@
     color: hsl(var(--text-error));
   }
 
+  .ui-search-form-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--filter-bar-section-gap);
+  }
+
+  .ui-search-form-more {
+    min-inline-size: 0;
+  }
+
+  .ui-search-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-gap);
+  }
+
+  .ui-search-form-submit {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    margin-inline-start: auto;
+  }
+
+  .ui-search-form-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1) var(--space-3);
+    font-size: var(--filter-label-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-search-form-summary-label {
+    font-weight: var(--font-weight-medium);
+  }
+
   .ui-legal-document-scope {
     container: legal-document / inline-size;
     padding-inline: var(--legal-document-page-padding-inline, var(--space-page-x));