@godxjp/ui 28.9.0 → 28.12.0

package/agent/components/SkeletonArticle.json

@@ -0,0 +1,71 @@
+{
+  "example": "import { SkeletonArticle } from \"@godxjp/ui/feedback\";\n\n<SkeletonArticle avatar active paragraph={{ rows: 3 }} />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonArticle",
+  "props": [
+    {
+      "defaultValue": "false",
+      "description": "Leading avatar placeholder. `true` takes the antd default matrix: a large circle, or a large SQUARE when there is a title but no paragraph (an entity header rather than a person).",
+      "name": "avatar",
+      "type": "boolean | { size?: 'xs' | 'sm' | 'md' | 'lg'; shape?: 'circle' | 'square' }"
+    },
+    {
+      "defaultValue": "true",
+      "description": "The heading LINE — not a string. `false` drops it; `{ width }` re-measures it. The default measure follows antd: 38% with a paragraph and no avatar, 50% with both, full width otherwise.",
+      "name": "title",
+      "type": "boolean | { width?: number | string }"
+    },
+    {
+      "defaultValue": "true",
+      "description": "The body lines. Default rows follow antd: 3 with a title and no avatar, else 2. A single `width` measures the LAST row; an array measures row by row. A number is read as pixels.",
+      "name": "paragraph",
+      "type": "boolean | { rows?: number; width?: number | string | (number | string)[] }"
+    },
+    {
+      "defaultValue": "false",
+      "description": "Pill corners on every line.",
+      "name": "round",
+      "type": "boolean"
+    },
+    {
+      "defaultValue": "false",
+      "description": "Travelling sheen instead of the resting pulse; descends to every line.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Pass `false` to render `children` in place of the placeholder.",
+      "name": "loading",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes on the article root.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "SkeletonDetail — the house record-page shape (title + metadata pairs); SkeletonArticle is the avatar + prose shape.",
+    "SkeletonRows — repeated flat rows with no avatar or prose rhythm.",
+    "Skeleton — the bare block SkeletonArticle is built from."
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Avatar + heading line + paragraph placeholder — Ant Design's own <Skeleton> shape, for a comment, a profile block or a feed item.",
+  "usage": [
+    "DO use SkeletonArticle where the loaded content is 'a person/entity beside a block of prose' — a comment, an activity item, a profile header, a notification row.",
+    "DO match `paragraph.rows` to the copy you expect so the layout does not jump on hydration.",
+    "DON'T use it for a table (SkeletonTable), a KPI tile (SkeletonStat) or a record page (SkeletonDetail) — those house shapes already match their targets.",
+    "DON'T nest it in a Card just to get a border; it draws no surface of its own."
+  ],
+  "useCases": [
+    "Comment thread loading state",
+    "Notification / activity feed placeholder",
+    "Profile header while the account record resolves",
+    "Chat or review list pre-mount placeholder"
+  ]
+}

package/agent/components/SkeletonAvatar.json

@@ -0,0 +1,50 @@
+{
+  "example": "import { SkeletonAvatar } from \"@godxjp/ui/feedback\";\n\n<SkeletonAvatar size=\"lg\" shape=\"square\" />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonAvatar",
+  "props": [
+    {
+      "defaultValue": "\"md\"",
+      "description": "Box, from the same height tier the real Avatar sizes from.",
+      "name": "size",
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+    },
+    {
+      "defaultValue": "\"circle\"",
+      "description": "Circle for a person, square for an entity/service mark — Avatar's vocabulary.",
+      "name": "shape",
+      "type": "\"circle\" | \"square\""
+    },
+    {
+      "description": "Travelling sheen instead of the pulse.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Avatar",
+    "SkeletonArticle",
+    "Skeleton"
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Avatar-shaped placeholder (also Skeleton.Avatar) sized from the --control-height tier.",
+  "usage": [
+    "DO pair the `shape` with the Avatar it replaces so the swap does not change the silhouette.",
+    "DON'T hand-size a bare Skeleton into a circle — this preset already carries the tier box."
+  ],
+  "useCases": [
+    "Member list loading rows",
+    "Comment author placeholder",
+    "Org switcher loading"
+  ]
+}

package/agent/components/SkeletonButton.json

@@ -0,0 +1,57 @@
+{
+  "example": "import { SkeletonButton } from \"@godxjp/ui/feedback\";\n\n<SkeletonButton size=\"sm\" shape=\"pill\" />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonButton",
+  "props": [
+    {
+      "defaultValue": "\"md\"",
+      "description": "Height, from the --control-height tier Button sizes from.",
+      "name": "size",
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+    },
+    {
+      "defaultValue": "\"default\"",
+      "description": "Corner, in Button's own vocabulary. `pill` is Ant Design's shape=\"round\".",
+      "name": "shape",
+      "type": "\"default\" | \"pill\" | \"sharp\""
+    },
+    {
+      "defaultValue": "false",
+      "description": "Fill the inline axis instead of holding the control's own measure.",
+      "name": "block",
+      "type": "boolean"
+    },
+    {
+      "description": "Travelling sheen instead of the pulse.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Button",
+    "SkeletonInput",
+    "Skeleton"
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Button-shaped placeholder (also Skeleton.Button) — two control-heights wide.",
+  "usage": [
+    "DO use it in a toolbar or card footer whose actions depend on data that has not arrived.",
+    "DO pass `block` when the real Button spans its column, so the row does not reflow on swap.",
+    "DON'T render a disabled Button as a loading state — a disabled control announces a different thing."
+  ],
+  "useCases": [
+    "Toolbar actions pre-mount",
+    "Card footer CTA placeholder",
+    "Form submit row"
+  ]
+}

package/agent/components/SkeletonForm.json

@@ -0,0 +1,52 @@
+{
+  "example": "import { SkeletonForm } from \"@godxjp/ui/feedback\";\n\n{loading ? <SkeletonForm columns={4} fields={8} /> : <Form columns={4}>…</Form>}",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonForm",
+  "props": [
+    {
+      "defaultValue": "1",
+      "description": "Columns of the form this stands in for. Passed straight to ResponsiveGrid, so it is the SAME value and the SAME breakpoint ladder the Form uses — that shared source is the point of the component.",
+      "name": "columns",
+      "type": "number"
+    },
+    {
+      "defaultValue": "6",
+      "description": "How many label+control pairs to draw.",
+      "name": "fields",
+      "type": "number"
+    },
+    {
+      "description": "Travelling sheen instead of the pulse.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Form — the thing this stands in for; give both the same `columns`.",
+    "FormField — the label+control pair each cell here draws.",
+    "SkeletonRows — a FLAT list of lines, for a list. Not a form.",
+    "SkeletonInput — one field's control on its own, when you are composing something else."
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "The skeleton of a `Form columns={N}` — label + control PAIRS on the form's own ResponsiveGrid, not the flat line list SkeletonRows draws.",
+  "usage": [
+    "DO pass the same `columns` the Form takes. Anything else and the layout jumps when the data lands.",
+    "DO use it instead of SkeletonRows for a form: a field is a short label stacked on a full-width control, and SkeletonRows has no idea a cell has an inside.",
+    "DON'T hand-assemble SkeletonInput inside a ResponsiveGrid to approximate one — that is what this replaces, and 'close enough' drifts the first time someone changes the Form's columns."
+  ],
+  "useCases": [
+    "An edit form before the record resolves",
+    "A multi-column settings panel on first paint",
+    "A wizard step whose defaults arrive from the server"
+  ]
+}

package/agent/components/SkeletonImage.json

@@ -0,0 +1,37 @@
+{
+  "example": "import { SkeletonImage } from \"@godxjp/ui/feedback\";\n\n<SkeletonImage active />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonImage",
+  "props": [
+    {
+      "description": "Travelling sheen instead of the pulse.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "SkeletonNode",
+    "Skeleton"
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "SkeletonNode carrying the image glyph (also Skeleton.Image).",
+  "usage": [
+    "DO use it where the loaded content is a picture, so the placeholder says WHICH kind of content is coming.",
+    "DON'T use it for a generic square — that is SkeletonNode."
+  ],
+  "useCases": [
+    "Gallery grid loading",
+    "Product thumbnail",
+    "Attachment preview"
+  ]
+}

package/agent/components/SkeletonInput.json

@@ -0,0 +1,51 @@
+{
+  "example": "import { SkeletonInput } from \"@godxjp/ui/feedback\";\n\n<SkeletonInput block />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonInput",
+  "props": [
+    {
+      "defaultValue": "\"md\"",
+      "description": "Height, from the --control-height tier Input sizes from.",
+      "name": "size",
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+    },
+    {
+      "defaultValue": "false",
+      "description": "Fill the inline axis — the usual choice inside a FormField column.",
+      "name": "block",
+      "type": "boolean"
+    },
+    {
+      "description": "Travelling sheen instead of the pulse.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Input",
+    "FormField",
+    "SkeletonButton",
+    "Skeleton"
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Field-shaped placeholder (also Skeleton.Input) — five control-heights wide.",
+  "usage": [
+    "DO use it for a form whose initial values are still loading, one per field.",
+    "DON'T render a real Input with a spinner inside it; an empty field invites typing that will be overwritten."
+  ],
+  "useCases": [
+    "Edit form before the record resolves",
+    "Filter bar pre-mount",
+    "Settings panel"
+  ]
+}

package/agent/components/SkeletonNode.json

@@ -0,0 +1,42 @@
+{
+  "example": "import { SkeletonNode } from \"@godxjp/ui/feedback\";\n\n<SkeletonNode />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonNode",
+  "props": [
+    {
+      "description": "Centred content, e.g. a glyph.",
+      "name": "children",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Travelling sheen instead of the pulse.",
+      "name": "active",
+      "type": "boolean"
+    },
+    {
+      "description": "Extra classes.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "SkeletonImage",
+    "Skeleton"
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Square media/custom placeholder (also Skeleton.Node); children centre inside it.",
+  "usage": [
+    "DO use it as the generic square when no other preset matches — a chart slot, a map tile, a QR code.",
+    "DON'T put text in it; it is a shape, and its container is already aria-busy."
+  ],
+  "useCases": [
+    "Chart panel placeholder",
+    "Map / canvas slot",
+    "QR or barcode slot"
+  ]
+}

package/agent/components/SkeletonRows.json

@@ -0,0 +1,49 @@
+{
+  "example": "import { SkeletonRows } from \"@godxjp/ui/feedback\";\n\n<SkeletonRows rows={6} columns={3} />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonRows",
+  "props": [
+    {
+      "defaultValue": "6",
+      "description": "How many skeleton lines to draw.",
+      "name": "rows",
+      "type": "number"
+    },
+    {
+      "defaultValue": "4",
+      "description": "Columns per row on the internal ResponsiveGrid — match the loaded list's column count so nothing reflows on hydration.",
+      "name": "columns",
+      "type": "number"
+    },
+    {
+      "description": "Root class override.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "SkeletonTable — tabular placeholder with a header band; not a flat line list.",
+    "SkeletonForm — label + control pairs on a form grid.",
+    "SkeletonArticle — avatar beside prose lines.",
+    "Skeleton — the bare block this preset is built from."
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Repeated flat loading lines on a responsive grid — the list-shaped placeholder when the final layout is rows of short bars, not a table header, not avatar + prose.",
+  "usage": [
+    "DO use SkeletonRows for a flat list of short bars — activity feeds without avatars, settings rows, filter result lists.",
+    "DO match `rows` and `columns` to the loaded layout so the skeleton does not jump when data arrives.",
+    "DON'T use it for tabular data with a header row — SkeletonTable matches DataTable's chrome.",
+    "DON'T use it for a form — SkeletonForm draws label + control pairs on the form's column grid.",
+    "Import from `@godxjp/ui/feedback` (canonical). `@godxjp/ui/admin` re-exports it for admin pages."
+  ],
+  "useCases": [
+    "Card body while a simple list deferred prop resolves",
+    "Stacked settings rows before the record loads",
+    "Generic repeated rows when SkeletonArticle's avatar + prose rhythm is wrong"
+  ]
+}

package/agent/components/SkeletonTable.json

@@ -0,0 +1,45 @@
+{
+  "example": "import { SkeletonTable } from \"@godxjp/ui/feedback\";\n\n{!coupons ? <SkeletonTable rows={10} columns={6} /> : <DataTable data={coupons} columns={columns} />}",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonTable",
+  "props": [
+    {
+      "defaultValue": "8",
+      "description": "Body skeleton rows.",
+      "name": "rows",
+      "type": "number"
+    },
+    {
+      "defaultValue": "5",
+      "description": "Columns in header + body.",
+      "name": "columns",
+      "type": "number"
+    }
+  ],
+  "related": [
+    "DataTable — sibling component that SkeletonTable precedes. Once DataTable mounts, use its `loading` prop (renders an in-table loading row) for subsequent refetches rather than swapping back to SkeletonTable. Pick SkeletonTable only for the pre-mount gap.",
+    "DataState — query lifecycle widget from `@godxjp/ui/query`; accepts SkeletonTable as its `skeleton` prop and handles loading/empty/error transitions automatically. Prefer DataState + SkeletonTable over a hand-rolled ternary when the data comes from a useQuery hook.",
+    "SkeletonStat — sibling skeleton shaped like a StatCard tile; use inside a ResponsiveGrid to placeholder KPI dashboard cards, not tabular data.",
+    "DataTable — when data is already mounted but re-fetching (e.g. pagination, filter change), set `loading={true}` on DataTable directly instead of unmounting it and swapping in SkeletonTable; avoids layout shift and preserves scroll position."
+  ],
+  "rules": [],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Loading placeholder matching the DataTable layout (header + N rows). Drop-in while data loads (deferred props).",
+  "usage": [
+    "DO use SkeletonTable as the pre-mount placeholder — either as a ternary fallback (`{!data ? <SkeletonTable rows={10} columns={6} /> : <DataTable … />}`) for Inertia deferred props, or as the `skeleton` prop of `DataState` (`<DataState query={q} skeleton={<SkeletonTable />} …>`). It is NOT for in-table loading; once DataTable has mounted use its own `loading` prop instead.",
+    "DO match rows/columns to the final DataTable layout: pass `rows` equal to your expected page size and `columns` equal to your column count so the skeleton doesn't visually jump on hydration. Defaults are rows=8, columns=5.",
+    "DO NOT use SkeletonTable when data is already present but refetching — use `DataTable loading={isFetching}` for in-table refetch states. SkeletonTable is only for the initial pre-mount gap before DataTable is rendered.",
+    "DO NOT wrap SkeletonTable in a Card — it renders its own header + body structure matching DataTable's DOM. Placing it inside CardContent adds unwanted padding around the skeleton rail.",
+    "The root element carries `aria-busy=\"true\"` automatically — do not add a second aria-busy on a wrapper. Screen readers announce the loading state correctly without extra markup.",
+    "Import from `@godxjp/ui/feedback` (not `@godxjp/ui/admin`). Both paths resolve but the canonical export is `feedback`."
+  ],
+  "useCases": [
+    "Inertia deferred props: the server streams the page shell immediately and defers the table data; render SkeletonTable until the prop arrives (`{!invoices ? <SkeletonTable rows={20} columns={7} /> : <DataTable data={invoices} columns={columns} />}`).",
+    "TanStack Query initial load via DataState: pass SkeletonTable as the `skeleton` prop so DataState shows the correct table shape during the query's loading state before switching to the populated DataTable.",
+    "Filter / search reset that unmounts and remounts DataTable: briefly show SkeletonTable while the new dataset fetches, preventing a flash of the empty state before results arrive.",
+    "Admin list pages (invoices, journal entries, partners) where the table has a known column count — tune `columns` to match so column widths feel stable and don't reflow on hydration.",
+    "Page-level Suspense boundaries: use SkeletonTable as the `fallback` of a React Suspense wrapping a lazy-loaded data table component.",
+    "Route prefetch / navigation transitions: render SkeletonTable in the destination slot while Inertia visits are in-flight, keeping perceived layout stable."
+  ]
+}

package/agent/components/Slider.json

@@ -0,0 +1,160 @@
+{
+  "example": "{`import { FormField, Slider } from \"@godxjp/ui/data-entry\";\nimport { useState } from \"react\";\n\n// Money in a label goes through Intl, never a hand-written symbol: the symbol, the grouping and\n// the number of minor units all change with the locale and the currency.\nconst money = new Intl.NumberFormat(\"ja-JP\", { style: \"currency\", currency: \"JPY\" });\n\n// Single thumb, antd spelling: a plain number in, a plain number out.\nfunction VolumeSlider() {\n  const [volume, setVolume] = useState(70);\n  return (\n    <FormField id=\"volume\" label={`音量: ${volume}%`}>\n      <Slider\n        id=\"volume\"\n        value={volume}\n        onChange={setVolume}\n        tooltip={{ formatter: (value) => `${value}%` }}\n      />\n    </FormField>\n  );\n}\n\n// Range: onChange carries both thumbs, onChangeComplete fires once on release.\nfunction PriceRangeSlider({ onApply }: { onApply: (range: number[]) => void }) {\n  const [price, setPrice] = useState([2000, 8000]);\n  return (\n    <FormField\n      id=\"price-range\"\n      label={`価格: ${money.format(price[0])} 〜 ${money.format(price[1])}`}\n    >\n      <Slider\n        id=\"price-range\"\n        range\n        value={price}\n        onChange={setPrice}\n        onChangeComplete={onApply}\n        min={0}\n        max={10000}\n        step={500}\n        minStepsBetweenThumbs={1}\n      />\n    </FormField>\n  );\n}\n\n// Marks-only: the thumb can rest on a named point and nowhere else.\nfunction PlanSlider() {\n  return (\n    <FormField id=\"plan\" label=\"料金プラン\">\n      <Slider\n        id=\"plan\"\n        step={null}\n        marks={{ 0: \"無料\", 30: \"標準\", 70: \"上位\", 100: \"特別\" }}\n        defaultValue={30}\n        dots\n      />\n    </FormField>\n  );\n}`}",
+  "group": "data-entry",
+  "importPath": "@godxjp/ui/data-entry",
+  "name": "Slider",
+  "props": [
+    {
+      "description": "A plain number for one thumb (antd), or an array. An array with no `range` still draws a thumb per entry — the Radix-era inference — and with nothing given the slider is ONE thumb at `min`.",
+      "name": "value / defaultValue",
+      "type": "number | number[]"
+    },
+    {
+      "description": "antd `onChange` — every change. The payload follows `range`: a number without it, an array with it. A `range` held in a boolean variable cannot say which at compile time, so that spelling takes `onValueChange` instead.",
+      "name": "onChange",
+      "type": "(value: number) => void | (value: number[]) => void"
+    },
+    {
+      "description": "antd `onChangeComplete` — once per finished gesture (pointer release, key press), and only when the value actually changed. Use it for the expensive work: a refetch, a save.",
+      "name": "onChangeComplete",
+      "type": "(value: number) => void | (value: number[]) => void"
+    },
+    {
+      "description": "The Radix-era callback, valid in every spelling: every change, always as the full array of thumbs.",
+      "name": "onValueChange",
+      "type": "(value: number[]) => void"
+    },
+    {
+      "description": "`onChangeComplete`'s array form. Fires exactly once per gesture.",
+      "name": "onValueCommit",
+      "type": "(value: number[]) => void"
+    },
+    {
+      "defaultValue": "false",
+      "description": "Two or more thumbs bounding a span. A DECLARATION, not an inference: a range whose value is still loading spans [min, max] instead of rendering as a point. The object form is antd's — `editable` lets a press on the rail ADD a thumb and Delete/Backspace remove one (between `minCount` and `maxCount`), `draggableTrack` drags the painted span and every thumb with it. `editable` wins over `draggableTrack` and switches off while any thumb is disabled, exactly as antd.",
+      "name": "range",
+      "type": "boolean | { editable?: boolean; minCount?: number; maxCount?: number; draggableTrack?: boolean }"
+    },
+    {
+      "defaultValue": "0",
+      "description": "The low end of the scale.",
+      "name": "min",
+      "type": "number"
+    },
+    {
+      "defaultValue": "100",
+      "description": "The high end of the scale.",
+      "name": "max",
+      "type": "number"
+    },
+    {
+      "defaultValue": "1",
+      "description": "Granularity. `null` is antd's marks-only mode: a thumb may then rest only on a mark, on `min` or on `max` — by pointer (nearest) and by arrow key (the next mark along).",
+      "name": "step",
+      "type": "number | null"
+    },
+    {
+      "defaultValue": "0",
+      "description": "The fewest steps two neighbouring thumbs may be apart. The Radix-era prop; it has no antd equivalent.",
+      "name": "minStepsBetweenThumbs",
+      "type": "number"
+    },
+    {
+      "description": "antd `marks` — labelled ticks along the rail, keyed by the value each sits on. A press on a mark's label moves the thumb to exactly that value. Prefer styling the label node (it is a ReactNode) over the object form's `style`.",
+      "name": "marks",
+      "type": "Record<number, ReactNode | { label?: ReactNode; style?: CSSProperties }>"
+    },
+    {
+      "defaultValue": "false",
+      "description": "antd `dots` — a tick at every `step`, or at every mark when `step={null}`. Ticks inside the painted span read as active.",
+      "name": "dots",
+      "type": "boolean"
+    },
+    {
+      "defaultValue": "true",
+      "description": "antd `included` — whether the painted span runs from the start to the thumb. `false` for a rail that only holds marks, where a filled span would assert a magnitude that is not there.",
+      "name": "included",
+      "type": "boolean"
+    },
+    {
+      "defaultValue": "false",
+      "description": "antd `tooltip` — the value bubble, rendered INSIDE the thumb so it rides every drag with no repositioning code. `open` forces it on or off, `formatter: null` removes it, `autoAdjustOverflow` (default true) flips it to the opposite side when the viewport leaves no room. A string/number `formatter` result is ALSO the thumb's `aria-valuetext`, so a ¥ or % slider is announced the way it is painted. `placement` `left`/`right` are the INLINE sides and mirror under RTL. antd's `getPopupContainer` has no counterpart: nothing is portalled.",
+      "name": "tooltip",
+      "type": "boolean | { open?: boolean; placement?: 'top' | 'bottom' | 'left' | 'right'; autoAdjustOverflow?: boolean; formatter?: ((value: number) => ReactNode) | null }"
+    },
+    {
+      "defaultValue": "false",
+      "description": "The whole slider, or one thumb each (antd's array form): `[true, false]` locks the first thumb of a range. A disabled thumb leaves the tab order and does not submit.",
+      "name": "disabled",
+      "type": "boolean | boolean[]"
+    },
+    {
+      "defaultValue": "'horizontal'",
+      "description": "Layout axis. Wins over `vertical` when both are given, as in antd 6. A vertical slider fills its container's height (and never collapses below --slider-vertical-min-block-size).",
+      "name": "orientation",
+      "type": "'horizontal' | 'vertical'"
+    },
+    {
+      "defaultValue": "false",
+      "description": "antd's boolean spelling of `orientation=\"vertical\"`.",
+      "name": "vertical",
+      "type": "boolean"
+    },
+    {
+      "defaultValue": "false",
+      "description": "antd `reverse` — run the scale the other way: `min` at the inline end of a horizontal rail, at the top of a vertical one. The arrow keys turn over with it.",
+      "name": "reverse",
+      "type": "boolean"
+    },
+    {
+      "description": "The Radix-era name for `reverse`. When both are given, `inverted` wins.",
+      "name": "inverted",
+      "type": "boolean"
+    },
+    {
+      "description": "Reading direction of a horizontal slider — which end is `min`, and which arrow increases. Defaults to the locale's direction (the I18nProvider AppProvider sets), so pass it only to pin one slider against its page.",
+      "name": "dir",
+      "type": "'ltr' | 'rtl'"
+    },
+    {
+      "description": "Native form field name. One thumb submits `name`, several submit `name[]` — one entry per thumb, no extra wiring.",
+      "name": "name",
+      "type": "string"
+    },
+    {
+      "description": "Associate the thumbs' inputs with a form elsewhere in the document, by id.",
+      "name": "form",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Progress — use Progress (not a disabled Slider) to show read-only progress; Slider with disabled is semantically a control, not a status indicator.",
+    "Input (type number) / NumberInput — free-form numeric entry; Slider is for a bounded range where dragging is the expected gesture.",
+    "Switch — for boolean on/off; Slider is for continuous or stepped numeric ranges.",
+    "Rating — for a small ordinal scale with symbols (1–5 stars) instead of a rail."
+  ],
+  "rules": [
+    3,
+    6,
+    31
+  ],
+  "storyPath": "data-entry/Slider.stories.tsx",
+  "tagline": "Numeric slider on react-aria-components with the antd 6 API — one thumb over a point, or `range` for a span. `value` takes a plain number (antd) or a number[] (the Radix-era spelling); both still work.",
+  "usage": [
+    "DO: Use `onChange` for live UI and `onChangeComplete` for the expensive work — a refetch, a save. Commit fires once per gesture, and only when the value moved.",
+    "DO: Declare `range` when you want two thumbs. Leaving it to an array's length makes a range that is still loading render as a single point, and `onChange` then reports a number rather than a pair.",
+    "DO: Give `tooltip.formatter` to a slider whose number is not a bare count (¥, %, 件) — it formats the bubble AND becomes the spoken value, so a screen reader stops reading `50000`.",
+    "DO: Set `name` inside a native `<form>`; the slider submits without a form library.",
+    "DON'T: Reach for `step={null}` without `marks` — it leaves `min` and `max` as the only values a thumb can take.",
+    "DON'T: Hand-roll Track/Range/Thumb sub-parts — `<Slider />` is one leaf element and composes them itself.",
+    "DO: For a11y supply `aria-label` (or `aria-labelledby`, or a FormField label) — it names every thumb, with an index suffix once there is more than one."
+  ],
+  "useCases": [
+    "Budget / price-range filter: `range` with `onChangeComplete` so the list refetches on release, not on every pixel.",
+    "Single numeric setting: volume, zoom, a threshold — `defaultValue={50}` with a live readout beside it.",
+    "A scale whose valid points are named rather than regular: `marks` + `step={null}` (料金プラン, 温度帯, 段階評価).",
+    "Percentage allocation with `step={5}`, `dots` and `marks` at the decision points.",
+    "A tiered picker a user can shape: `range={{ editable: true, minCount: 1, maxCount: 4 }}` for splitting a scale into bands.",
+    "Read-only visual indicator — `disabled` with a controlled value; prefer Progress when nothing is ever adjustable."
+  ]
+}