@pinfold/react 0.0.0-stage → 0.2.0

package/schema/accordion.json

@@ -0,0 +1,903 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://pinfold.indranildev.in/schema/accordion.json",
+  "title": "AccordionConfig",
+  "description": "A vertically stacked set of headings that each reveal a section of content. Config in, accessible accordion out.",
+  "type": "object",
+  "properties": {
+    "items": {
+      "description": "The rows. The only required option.",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "description": "Stable key. Falls back to the array index.",
+            "type": "string"
+          },
+          "title": {
+            "description": "The row heading. A node or `(state) => node`."
+          },
+          "content": {
+            "description": "The panel body."
+          },
+          "description": {
+            "description": "A secondary line under the title."
+          },
+          "icon": {
+            "description": "A leading visual: a node, or a string (an emoji, or an icon-font ligature with `classNames.icon`). Overrides the accordion-wide `icon`."
+          },
+          "badge": {
+            "description": "A trailing chip before the indicator."
+          },
+          "endIcon": {
+            "description": "A trailing visual just before the indicator. Overrides the accordion-wide `endIcon`."
+          },
+          "indicator": {
+            "description": "Overrides the accordion-wide indicator for this row.",
+            "anyOf": [
+              {
+                "enum": [
+                  "chevron",
+                  "plus",
+                  "caret",
+                  "arrow",
+                  "none"
+                ]
+              },
+              {}
+            ]
+          },
+          "disabled": {
+            "description": "Blocks toggling. The row stays focusable.",
+            "type": "boolean"
+          },
+          "defaultOpen": {
+            "description": "Open on first render (uncontrolled only).",
+            "type": "boolean"
+          },
+          "classNames": {
+            "description": "Per-row classes, by slot.",
+            "type": "object",
+            "properties": {
+              "root": {
+                "description": "The `root` slot.",
+                "type": "string"
+              },
+              "item": {
+                "description": "The `item` slot.",
+                "type": "string"
+              },
+              "header": {
+                "description": "The `header` slot.",
+                "type": "string"
+              },
+              "trigger": {
+                "description": "The `trigger` slot.",
+                "type": "string"
+              },
+              "icon": {
+                "description": "The `icon` slot.",
+                "type": "string"
+              },
+              "label": {
+                "description": "The `label` slot.",
+                "type": "string"
+              },
+              "title": {
+                "description": "The `title` slot.",
+                "type": "string"
+              },
+              "description": {
+                "description": "The `description` slot.",
+                "type": "string"
+              },
+              "badge": {
+                "description": "The `badge` slot.",
+                "type": "string"
+              },
+              "endIcon": {
+                "description": "The `endIcon` slot.",
+                "type": "string"
+              },
+              "indicator": {
+                "description": "The `indicator` slot.",
+                "type": "string"
+              },
+              "panel": {
+                "description": "The `panel` slot.",
+                "type": "string"
+              },
+              "content": {
+                "description": "The `content` slot.",
+                "type": "string"
+              }
+            },
+            "additionalProperties": false
+          },
+          "styles": {
+            "description": "Per-row inline styles, by slot.",
+            "type": "object",
+            "properties": {
+              "root": {
+                "description": "The `root` slot.",
+                "type": "object"
+              },
+              "item": {
+                "description": "The `item` slot.",
+                "type": "object"
+              },
+              "header": {
+                "description": "The `header` slot.",
+                "type": "object"
+              },
+              "trigger": {
+                "description": "The `trigger` slot.",
+                "type": "object"
+              },
+              "icon": {
+                "description": "The `icon` slot.",
+                "type": "object"
+              },
+              "label": {
+                "description": "The `label` slot.",
+                "type": "object"
+              },
+              "title": {
+                "description": "The `title` slot.",
+                "type": "object"
+              },
+              "description": {
+                "description": "The `description` slot.",
+                "type": "object"
+              },
+              "badge": {
+                "description": "The `badge` slot.",
+                "type": "object"
+              },
+              "endIcon": {
+                "description": "The `endIcon` slot.",
+                "type": "object"
+              },
+              "indicator": {
+                "description": "The `indicator` slot.",
+                "type": "object"
+              },
+              "panel": {
+                "description": "The `panel` slot.",
+                "type": "object"
+              },
+              "content": {
+                "description": "The `content` slot.",
+                "type": "object"
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "required": [
+          "title"
+        ],
+        "additionalProperties": true
+      }
+    },
+    "fields": {
+      "description": "Map raw records onto rows: `{ id: 'slug', title: 'question', content: 'answer' }`.",
+      "type": "object",
+      "properties": {
+        "id": {
+          "description": "Source field for `id`.",
+          "type": "string"
+        },
+        "title": {
+          "description": "Source field for `title`.",
+          "type": "string"
+        },
+        "content": {
+          "description": "Source field for `content`.",
+          "type": "string"
+        },
+        "description": {
+          "description": "Source field for `description`.",
+          "type": "string"
+        },
+        "icon": {
+          "description": "Source field for `icon`.",
+          "type": "string"
+        },
+        "endIcon": {
+          "description": "Source field for `endIcon`.",
+          "type": "string"
+        },
+        "badge": {
+          "description": "Source field for `badge`.",
+          "type": "string"
+        },
+        "disabled": {
+          "description": "Source field for `disabled`.",
+          "type": "string"
+        },
+        "defaultOpen": {
+          "description": "Source field for `defaultOpen`.",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "mode": {
+      "description": "`single` closes the other rows when one opens.",
+      "default": "single",
+      "enum": [
+        "single",
+        "multiple"
+      ]
+    },
+    "collapsible": {
+      "description": "Lets the user close the last open row. `false` keeps at least one row open, in either mode.",
+      "default": true,
+      "type": "boolean"
+    },
+    "value": {
+      "description": "Controlled open ids. Pair with `onValueChange`.",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "defaultValue": {
+      "description": "Initially open ids (uncontrolled).",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "disabled": {
+      "description": "Disables every row.",
+      "default": false,
+      "type": "boolean"
+    },
+    "disabledIds": {
+      "description": "Disables these rows by id.",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "orientation": {
+      "description": "Arrow-key axis between headers.",
+      "default": "vertical",
+      "enum": [
+        "vertical",
+        "horizontal"
+      ]
+    },
+    "dir": {
+      "description": "Text direction. Defaults to the provider.",
+      "enum": [
+        "ltr",
+        "rtl"
+      ]
+    },
+    "loop": {
+      "description": "Focus wraps around at the ends.",
+      "default": true,
+      "type": "boolean"
+    },
+    "id": {
+      "description": "Id prefix. Defaults to `useId()`, which is SSR-safe.",
+      "type": "string"
+    },
+    "hiddenUntilFound": {
+      "description": "Closed panels use `hidden=\"until-found\"`, so the browser’s find-in-page opens them.",
+      "default": true,
+      "type": "boolean"
+    },
+    "mountPanels": {
+      "description": "When panel content is in the DOM. `always` keeps it searchable and indexable.",
+      "default": "always",
+      "enum": [
+        "always",
+        "open",
+        "first-open"
+      ]
+    },
+    "unmountClosed": {
+      "description": "Deprecated alias of `mountPanels: \"open\"`.",
+      "deprecated": true,
+      "type": "boolean"
+    },
+    "syncWithHash": {
+      "description": "A `#id` in the URL opens that row and scrolls to it; opening a row updates the hash.",
+      "default": false,
+      "type": "boolean"
+    },
+    "lazy": {
+      "description": "When the code loads, for the `/lazy` entry. The accordion is light, so `auto` is eager.",
+      "default": "auto",
+      "enum": [
+        "auto",
+        "eager",
+        "visible",
+        "idle"
+      ]
+    },
+    "variant": {
+      "description": "Visual style.",
+      "default": "solid",
+      "enum": [
+        "solid",
+        "outline",
+        "separated",
+        "filled",
+        "ghost"
+      ]
+    },
+    "size": {
+      "description": "Size preset.",
+      "default": "md",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "tone": {
+      "description": "Accent colour role.",
+      "default": "primary",
+      "enum": [
+        "primary",
+        "neutral",
+        "success",
+        "warning",
+        "danger",
+        "info"
+      ]
+    },
+    "radius": {
+      "description": "Corner radius of the container that holds the rows: a preset, or a length (`20` is px, `'1.25rem'` passes through). Default: the theme radius.",
+      "anyOf": [
+        {
+          "enum": [
+            "none",
+            "sm",
+            "md",
+            "lg",
+            "full"
+          ]
+        },
+        {
+          "type": [
+            "number",
+            "string"
+          ]
+        }
+      ]
+    },
+    "itemRadius": {
+      "description": "Corner radius of each row, same values as `radius`. Default: `radius` for separated, filled and ghost rows; square rows inside a solid or outline card.",
+      "anyOf": [
+        {
+          "enum": [
+            "none",
+            "sm",
+            "md",
+            "lg",
+            "full"
+          ]
+        },
+        {
+          "type": [
+            "number",
+            "string"
+          ]
+        }
+      ]
+    },
+    "gap": {
+      "description": "Space between rows: a preset, or a length (`12` is px). Default: none for solid, outline and ghost; `'sm'` for separated and filled.",
+      "anyOf": [
+        {
+          "enum": [
+            "none",
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "type": [
+            "number",
+            "string"
+          ]
+        }
+      ]
+    },
+    "icon": {
+      "description": "Leading visual for every row: a node, or `(state) => node`. A row’s own `icon` wins."
+    },
+    "endIcon": {
+      "description": "Trailing visual for every row, just before the indicator. A row’s own `endIcon` wins."
+    },
+    "indicator": {
+      "description": "A built-in glyph, your own node, or `(state) => node`.",
+      "default": "chevron",
+      "anyOf": [
+        {
+          "enum": [
+            "chevron",
+            "plus",
+            "caret",
+            "arrow",
+            "none"
+          ]
+        },
+        {}
+      ]
+    },
+    "indicatorPosition": {
+      "description": "Which edge the indicator sits on.",
+      "default": "end",
+      "enum": [
+        "start",
+        "end"
+      ]
+    },
+    "animateIndicator": {
+      "description": "Rotate (or morph) the indicator when a row opens.",
+      "default": true,
+      "type": "boolean"
+    },
+    "headingLevel": {
+      "description": "Heading level around each trigger.",
+      "default": 3,
+      "enum": [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6
+      ]
+    },
+    "animate": {
+      "description": "Animate open and close. `prefers-reduced-motion` always wins.",
+      "default": true,
+      "type": "boolean"
+    },
+    "dividers": {
+      "description": "Lines between rows (solid, outline and ghost).",
+      "default": true,
+      "type": "boolean"
+    },
+    "overflow": {
+      "description": "Text overflow per slot. Default: title wraps, description clamps to 2 lines.",
+      "type": "object",
+      "properties": {
+        "title": {
+          "description": "`'wrap'`, `'truncate'` (one line with an ellipsis) or `{ lines: n }` (clamp to n lines).",
+          "anyOf": [
+            {
+              "enum": [
+                "wrap",
+                "truncate"
+              ]
+            },
+            {}
+          ]
+        },
+        "description": {
+          "description": "`'wrap'`, `'truncate'` (one line with an ellipsis) or `{ lines: n }` (clamp to n lines).",
+          "anyOf": [
+            {
+              "enum": [
+                "wrap",
+                "truncate"
+              ]
+            },
+            {}
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "dimensions": {
+      "description": "Explicit sizes. Numbers are px. Each key overrides the size preset.",
+      "type": "object",
+      "properties": {
+        "width": {
+          "description": "Default 100% of the parent.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "minWidth": {
+          "description": "Minimum width.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "maxWidth": {
+          "description": "Maximum width.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "height": {
+          "description": "Fixed height.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "maxHeight": {
+          "description": "Caps the root; rows scroll.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "gap": {
+          "description": "Space between rows. Overrides `gap`.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "paddingX": {
+          "description": "Trigger horizontal padding.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "paddingY": {
+          "description": "Trigger vertical padding.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "panelPaddingX": {
+          "description": "Panel horizontal padding.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "panelPaddingY": {
+          "description": "Panel vertical padding.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "panelMaxHeight": {
+          "description": "Caps an open panel; it scrolls.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "fontSize": {
+          "description": "Base font size.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "titleSize": {
+          "description": "Title font size.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "descriptionSize": {
+          "description": "Description font size.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "iconSize": {
+          "description": "Icon box size.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "indicatorSize": {
+          "description": "Indicator size.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "borderWidth": {
+          "description": "Border width.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "radius": {
+          "description": "Container corner radius. Overrides `radius`.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "itemRadius": {
+          "description": "Row corner radius. Overrides `itemRadius`.",
+          "type": [
+            "number",
+            "string"
+          ]
+        },
+        "duration": {
+          "description": "Transition duration, e.g. '320ms'.",
+          "type": [
+            "number",
+            "string"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "unstyled": {
+      "description": "Drops every Pinfold class; ARIA and `data-*` stay. For Tailwind or your own CSS.",
+      "default": false,
+      "type": "boolean"
+    },
+    "className": {
+      "description": "Class on the root.",
+      "type": "string"
+    },
+    "style": {
+      "description": "Inline style on the root.",
+      "type": "object"
+    },
+    "classNames": {
+      "description": "Classes per slot.",
+      "type": "object",
+      "properties": {
+        "root": {
+          "description": "The `root` slot.",
+          "type": "string"
+        },
+        "item": {
+          "description": "The `item` slot.",
+          "type": "string"
+        },
+        "header": {
+          "description": "The `header` slot.",
+          "type": "string"
+        },
+        "trigger": {
+          "description": "The `trigger` slot.",
+          "type": "string"
+        },
+        "icon": {
+          "description": "The `icon` slot.",
+          "type": "string"
+        },
+        "label": {
+          "description": "The `label` slot.",
+          "type": "string"
+        },
+        "title": {
+          "description": "The `title` slot.",
+          "type": "string"
+        },
+        "description": {
+          "description": "The `description` slot.",
+          "type": "string"
+        },
+        "badge": {
+          "description": "The `badge` slot.",
+          "type": "string"
+        },
+        "endIcon": {
+          "description": "The `endIcon` slot.",
+          "type": "string"
+        },
+        "indicator": {
+          "description": "The `indicator` slot.",
+          "type": "string"
+        },
+        "panel": {
+          "description": "The `panel` slot.",
+          "type": "string"
+        },
+        "content": {
+          "description": "The `content` slot.",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "styles": {
+      "description": "Inline styles per slot.",
+      "type": "object",
+      "properties": {
+        "root": {
+          "description": "The `root` slot.",
+          "type": "object"
+        },
+        "item": {
+          "description": "The `item` slot.",
+          "type": "object"
+        },
+        "header": {
+          "description": "The `header` slot.",
+          "type": "object"
+        },
+        "trigger": {
+          "description": "The `trigger` slot.",
+          "type": "object"
+        },
+        "icon": {
+          "description": "The `icon` slot.",
+          "type": "object"
+        },
+        "label": {
+          "description": "The `label` slot.",
+          "type": "object"
+        },
+        "title": {
+          "description": "The `title` slot.",
+          "type": "object"
+        },
+        "description": {
+          "description": "The `description` slot.",
+          "type": "object"
+        },
+        "badge": {
+          "description": "The `badge` slot.",
+          "type": "object"
+        },
+        "endIcon": {
+          "description": "The `endIcon` slot.",
+          "type": "object"
+        },
+        "indicator": {
+          "description": "The `indicator` slot.",
+          "type": "object"
+        },
+        "panel": {
+          "description": "The `panel` slot.",
+          "type": "object"
+        },
+        "content": {
+          "description": "The `content` slot.",
+          "type": "object"
+        }
+      },
+      "additionalProperties": false
+    },
+    "slotProps": {
+      "description": "Any DOM props per slot. Handlers chain.",
+      "type": "object",
+      "properties": {
+        "root": {
+          "description": "The `root` slot.",
+          "type": "object"
+        },
+        "item": {
+          "description": "The `item` slot.",
+          "type": "object"
+        },
+        "header": {
+          "description": "The `header` slot.",
+          "type": "object"
+        },
+        "trigger": {
+          "description": "The `trigger` slot.",
+          "type": "object"
+        },
+        "icon": {
+          "description": "The `icon` slot.",
+          "type": "object"
+        },
+        "label": {
+          "description": "The `label` slot.",
+          "type": "object"
+        },
+        "title": {
+          "description": "The `title` slot.",
+          "type": "object"
+        },
+        "description": {
+          "description": "The `description` slot.",
+          "type": "object"
+        },
+        "badge": {
+          "description": "The `badge` slot.",
+          "type": "object"
+        },
+        "endIcon": {
+          "description": "The `endIcon` slot.",
+          "type": "object"
+        },
+        "indicator": {
+          "description": "The `indicator` slot.",
+          "type": "object"
+        },
+        "panel": {
+          "description": "The `panel` slot.",
+          "type": "object"
+        },
+        "content": {
+          "description": "The `content` slot.",
+          "type": "object"
+        }
+      },
+      "additionalProperties": false
+    },
+    "render": {
+      "description": "Replace a slot element: `({ props, state, children }) => node`.",
+      "type": "object",
+      "properties": {
+        "root": {
+          "description": "The `root` slot."
+        },
+        "item": {
+          "description": "The `item` slot."
+        },
+        "header": {
+          "description": "The `header` slot."
+        },
+        "trigger": {
+          "description": "The `trigger` slot."
+        },
+        "icon": {
+          "description": "The `icon` slot."
+        },
+        "label": {
+          "description": "The `label` slot."
+        },
+        "title": {
+          "description": "The `title` slot."
+        },
+        "description": {
+          "description": "The `description` slot."
+        },
+        "badge": {
+          "description": "The `badge` slot."
+        },
+        "endIcon": {
+          "description": "The `endIcon` slot."
+        },
+        "indicator": {
+          "description": "The `indicator` slot."
+        },
+        "panel": {
+          "description": "The `panel` slot."
+        },
+        "content": {
+          "description": "The `content` slot."
+        }
+      },
+      "additionalProperties": false
+    },
+    "renderItem": {
+      "description": "Replace a whole row: `({ state, props, header, panel }) => node`."
+    },
+    "onValueChange": {
+      "description": "`(ids, details)`. `details: { id, open, reason: 'click' | 'keyboard' | 'api' | 'find-in-page' | 'hash', event }`."
+    },
+    "onBeforeChange": {
+      "description": "`(details) => boolean | void`. Return `false` to block the change."
+    },
+    "onItemToggle": {
+      "description": "`(id, open)`, after `onValueChange`."
+    }
+  },
+  "required": [
+    "items"
+  ],
+  "additionalProperties": false
+}