{
  "docPath": "layout/space-compact.tsx",
  "example": "import { SpaceCompact } from \"@godxjp/ui/layout\";\nimport { FormField, NumberInput, Select } from \"@godxjp/ui/data-entry\";\n\n<FormField label=\"繰り返し間隔\">\n  <SpaceCompact>\n    <NumberInput aria-label=\"間隔の数\" min={1} defaultValue={2} />\n    <Select\n      aria-label=\"単位\"\n      defaultValue=\"week\"\n      options={[\n        { value: \"day\", label: \"日\" },\n        { value: \"week\", label: \"週\" },\n        { value: \"month\", label: \"月\" },\n      ]}\n    />\n  </SpaceCompact>\n</FormField>",
  "group": "layout",
  "importPath": "@godxjp/ui/layout",
  "name": "SpaceCompact",
  "props": [
    {
      "defaultValue": "\"horizontal\"",
      "description": "Layout axis (antd `orientation`; the installed antd `direction` prop is itself @deprecated in favour of this, so only `orientation` is ported).",
      "name": "orientation",
      "type": "\"horizontal\" | \"vertical\""
    },
    {
      "description": "antd's boolean spelling of orientation=\"vertical\". `orientation` wins when both are given.",
      "name": "vertical",
      "type": "boolean"
    },
    {
      "defaultValue": "false",
      "description": "The row fills its parent's inline size (antd `block`, renamed to match Button.fullWidth — the same rename, the same reason: this library's controlled vocabulary wins on values). Field children grow to fill it; a Button keeps its content width.",
      "name": "fullWidth",
      "type": "boolean"
    },
    {
      "description": "Scoped control density for the whole row (antd Space.Compact `size`, small|middle|large — the ConfigProvider ambient-size cascade this library already owns under `density`; see `Form.density`). Each child still carries its OWN `size` prop.",
      "name": "density",
      "type": "\"compact\" | \"default\" | \"comfortable\""
    },
    {
      "description": "DOM id of the row.",
      "name": "id",
      "type": "string"
    }
  ],
  "related": [
    "Flex `gap` — siblings that stay visually SEPARATE (a normal control row with spacing between items). SpaceCompact is the opposite case: controls that must read as ONE box.",
    "ResponsiveGrid — equal-width form CELLS; SpaceCompact welds controls WITHIN one cell (or one row) into a single unit.",
    "FormField — wraps the whole SpaceCompact with one label when the pair is one field.",
    "NumberInput, Select — the two controls the shipping use case welds; either composes cleanly inside SpaceCompact because both already expose the radius knob it reads (`--input-radius-*`, `--control-trigger-radius-*`)."
  ],
  "rules": [
    2
  ],
  "storyPath": "layout/SpaceCompact.stories.tsx",
  "tagline": "Weld a row (or column) of controls into one visual unit — antd Space.Compact. Inner corner radii are zeroed and the shared border collapses to one hairline; each child keeps its own focus ring and its own size.",
  "usage": [
    "DO reach for it when two or more controls must read as ONE field — a number + a unit (\"毎 [2] [週 ▾] ごと\"), a currency Select welded to an amount Input, a search field with an attached filter Select. `ResponsiveGrid columns={2}` puts them in separate cells (which collapses to ONE column on a narrow form card); SpaceCompact keeps them fused on one line regardless of the grid.",
    "ONE label for the pair vs per-control: wrap the WHOLE `SpaceCompact` in a single `FormField label=\"…\"` when the pair reads as one field (\"繰り返し間隔\" over a number+unit row) — a role-less `<div>` cannot carry a cloned `aria-label`/`aria-labelledby` (axe `aria-allowed-attr`), so a NAMED SpaceCompact with no explicit `role` promotes itself to `role=\"group\"` automatically, the same contract `Flex` already honours for a range/年月 pair. Give each CHILD its own `aria-label` instead only when the two controls are independently meaningful outside the row (rare — prefer the one-label pattern for a welded control).",
    "DON'T reach for `className=\"rounded-none\"` / `[&>*:not(:first-child)]` utilities to join controls yourself — `ui-audit`'s `no-utility-layout` rule blocks exactly that, and it is precisely the corner-radius seam this component owns.",
    "DO set `size` on each CHILD individually, not on SpaceCompact — the row has no size prop of its own by design (see `density`); every control already owns its own `size` axis (`xs|sm|md|lg`).",
    "DO use `fullWidth` inside a narrow form card so the joined row spans the field column, exactly like a lone Input would.",
    "`fullWidth` is antd `Space.Compact block` (gh#1062): in a row, a FIELD child (Input and its affix/Password/Search forms, NumberInput, Textarea, TagInput, the Date/Time pickers, and the Select/Cascader/TreeSelect/SearchSelect trigger) grows to fill the row, and every other child — a Button, an icon button — keeps its content width. So `[Input][+ Add]` is a full-width field with its submit at content width, and two fields (NumberInput + Select) share the row evenly between them. Deviation from antd, written down: antd grows only its Input family (`width: 100%`); Select/InputNumber/DatePicker keep their own width there. Here every field grows, so two fields never leave an empty tail. `orientation=\"vertical\"` + `fullWidth` stacks full-width children as before.",
    "DON'T expect corner-radius welding on `orientation=\"vertical\"` yet — the shared border still collapses, but each child keeps all four of its own corners rounded until a block-axis radius knob exists on the Input/trigger families (documented gap, not a silent one)."
  ],
  "useCases": [
    "定期課題 (recurring issue) interval row: 毎 [NumberInput] [Select 週/月/日 ▾] ごと, fused on one line inside a FormField, inside a 2-column ResponsiveGrid form card that collapses to one column.",
    "A currency amount: [Select 通貨 ▾][NumberInput 金額] welded so the currency reads as part of the amount field, not a separate control beside it.",
    "A filtered search bar: [Select scope][SearchInput query] as one visual field, `fullWidth` inside a page toolbar."
  ]
}