fictoan-react 2.0.0-beta.17 → 2.0.0-beta.18

package/dist/fictoan-schema.json

@@ -0,0 +1,2070 @@
+{
+  "$schema": "https://fictoan.io/schema/v1.json",
+  "name": "fictoan-react",
+  "version": "2.0.0-beta.18",
+  "framework": "react",
+  "philosophy": "Plain-English props, pure CSS, zero runtime. A universal Element prop set (spacing, colour, layout, responsiveness) works across every component.",
+  "docs": "https://fictoan.io",
+  "enums": {
+    "SpacingTypes": [
+      "none",
+      "nano",
+      "micro",
+      "tiny",
+      "small",
+      "medium",
+      "large",
+      "huge"
+    ],
+    "EmphasisTypes": [
+      "primary",
+      "secondary",
+      "tertiary",
+      "custom"
+    ],
+    "ShadowTypes": [
+      "none",
+      "mild",
+      "hard",
+      "soft"
+    ],
+    "ShapeTypes": [
+      "rounded",
+      "curved"
+    ],
+    "OpacityTypes": [
+      "0",
+      "5",
+      "10",
+      "20",
+      "30",
+      "40",
+      "50",
+      "60",
+      "70",
+      "80",
+      "90"
+    ],
+    "WeightTypes": [
+      "100",
+      "200",
+      "300",
+      "400",
+      "500",
+      "600",
+      "700",
+      "800",
+      "900"
+    ],
+    "ButtonVariantTypes": [
+      "success",
+      "warning",
+      "danger"
+    ],
+    "SpanTypes": [
+      "one-twelfth",
+      "one-eighth",
+      "one-sixth",
+      "one-fourth",
+      "one-third",
+      "five-twelfth",
+      "half",
+      "seven-twelfth",
+      "two-third",
+      "three-fourth",
+      "five-sixth",
+      "seven-eighth",
+      "eleven-twelfth",
+      "whole",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "17",
+      "18",
+      "19",
+      "20",
+      "21",
+      "22",
+      "23",
+      "24"
+    ],
+    "Colours": [
+      "pink",
+      "rose",
+      "crimson",
+      "red",
+      "salmon",
+      "sienna",
+      "orange",
+      "amber",
+      "gold",
+      "yellow",
+      "lime",
+      "chartreuse",
+      "spring",
+      "pistachio",
+      "sage",
+      "green",
+      "emerald",
+      "jade",
+      "teal",
+      "cyan",
+      "aqua",
+      "azure",
+      "sky",
+      "cerulean",
+      "cobalt",
+      "navy",
+      "blue",
+      "royal",
+      "indigo",
+      "iris",
+      "violet",
+      "plum",
+      "purple",
+      "magenta",
+      "fuchsia",
+      "cerise",
+      "slate",
+      "grey",
+      "brown",
+      "transparent",
+      "black",
+      "white"
+    ]
+  },
+  "colourModifiers": {
+    "description": "Append modifiers to any colour name to vary it.",
+    "shade": {
+      "pattern": "{colour}-{dark|light}{10..90}",
+      "example": "red-dark30, blue-light20"
+    },
+    "opacity": {
+      "pattern": "{colour}[-{dark|light}{10..90}]-opacity{0..90}",
+      "example": "red-opacity50, blue-dark30-opacity20"
+    }
+  },
+  "universalProps": {
+    "bgColor": {
+      "type": "ColourPropTypes"
+    },
+    "bgColour": {
+      "type": "ColourPropTypes"
+    },
+    "bgOpacity": {
+      "type": "OpacityTypes"
+    },
+    "textColor": {
+      "type": "ColourPropTypes"
+    },
+    "textColour": {
+      "type": "ColourPropTypes"
+    },
+    "borderColor": {
+      "type": "ColourPropTypes"
+    },
+    "borderColour": {
+      "type": "ColourPropTypes"
+    },
+    "borderOpacity": {
+      "type": "OpacityTypes"
+    },
+    "fillColor": {
+      "type": "ColourPropTypes"
+    },
+    "fillColour": {
+      "type": "ColourPropTypes"
+    },
+    "strokeColor": {
+      "type": "ColourPropTypes"
+    },
+    "strokeColour": {
+      "type": "ColourPropTypes"
+    },
+    "shadow": {
+      "type": "ShadowTypes"
+    },
+    "shape": {
+      "type": "ShapeTypes"
+    },
+    "opacity": {
+      "type": "OpacityTypes"
+    },
+    "layoutAsFlexbox": {
+      "type": "boolean"
+    },
+    "stackVertically": {
+      "type": "boolean"
+    },
+    "stackHorizontally": {
+      "type": "boolean"
+    },
+    "layoutAsGrid": {
+      "type": "boolean"
+    },
+    "columns": {
+      "type": "string"
+    },
+    "gap": {
+      "type": "SpacingTypes"
+    },
+    "margin": {
+      "type": "SpacingTypes"
+    },
+    "horizontalMargin": {
+      "type": "SpacingTypes"
+    },
+    "verticalMargin": {
+      "type": "SpacingTypes"
+    },
+    "marginTop": {
+      "type": "SpacingTypes"
+    },
+    "marginRight": {
+      "type": "SpacingTypes"
+    },
+    "marginBottom": {
+      "type": "SpacingTypes"
+    },
+    "marginLeft": {
+      "type": "SpacingTypes"
+    },
+    "padding": {
+      "type": "SpacingTypes"
+    },
+    "horizontalPadding": {
+      "type": "SpacingTypes"
+    },
+    "verticalPadding": {
+      "type": "SpacingTypes"
+    },
+    "paddingTop": {
+      "type": "SpacingTypes"
+    },
+    "paddingRight": {
+      "type": "SpacingTypes"
+    },
+    "paddingBottom": {
+      "type": "SpacingTypes"
+    },
+    "paddingLeft": {
+      "type": "SpacingTypes"
+    },
+    "horizontallyCentreThis": {
+      "type": "boolean"
+    },
+    "horizontallyCenterThis": {
+      "type": "boolean"
+    },
+    "verticallyCentreItems": {
+      "type": "boolean"
+    },
+    "verticallyCenterItems": {
+      "type": "boolean"
+    },
+    "pushItemsToEnds": {
+      "type": "boolean"
+    },
+    "isClickable": {
+      "type": "boolean"
+    },
+    "isFullWidth": {
+      "type": "boolean"
+    },
+    "isFullHeight": {
+      "type": "boolean"
+    },
+    "inheritFormSpacing": {
+      "type": "boolean"
+    },
+    "hideOnMobile": {
+      "type": "boolean"
+    },
+    "showOnlyOnMobile": {
+      "type": "boolean"
+    },
+    "hideOnTabletPortrait": {
+      "type": "boolean"
+    },
+    "showOnlyOnTabletPortrait": {
+      "type": "boolean"
+    },
+    "hideOnTabletLandscape": {
+      "type": "boolean"
+    },
+    "showOnlyOnTabletLandscape": {
+      "type": "boolean"
+    },
+    "hideOnDesktop": {
+      "type": "boolean"
+    },
+    "showOnlyOnDesktop": {
+      "type": "boolean"
+    },
+    "weight": {
+      "type": "WeightTypes"
+    },
+    "classNames": {
+      "type": "string[]"
+    }
+  },
+  "components": {
+    "Accordion": {
+      "description": "",
+      "import": "import { Accordion } from \"fictoan-react\";",
+      "props": {
+        "isOpen": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "summary": {
+          "type": "ReactNode",
+          "required": true
+        }
+      }
+    },
+    "Badge": {
+      "description": "Small inline label for counts, statuses, tags.",
+      "import": "import { Badge } from \"fictoan-react\";",
+      "props": {
+        "size": {
+          "type": "SpacingTypes",
+          "default": "medium"
+        },
+        "actionIcon": {
+          "type": "BadgeActionIconType"
+        },
+        "onActionClick": {
+          "type": "((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)"
+        },
+        "actionAriaLabel": {
+          "type": "string"
+        }
+      },
+      "example": "<Badge bgColour=\"blue\" textColour=\"white\">New</Badge>"
+    },
+    "Breadcrumbs": {
+      "description": "",
+      "import": "import { Breadcrumbs } from \"fictoan-react\";",
+      "props": {
+        "separator": {
+          "type": "string",
+          "default": "/"
+        },
+        "spacing": {
+          "type": "SpacingTypes",
+          "default": "micro"
+        }
+      }
+    },
+    "Button": {
+      "description": "Clickable action element. Use `kind` for semantic emphasis; `variant` for status colour; `size` and `shape` for visual variants.",
+      "import": "import { Button } from \"fictoan-react\";",
+      "props": {
+        "kind": {
+          "type": "EmphasisTypes"
+        },
+        "variant": {
+          "type": "ButtonVariantTypes"
+        },
+        "size": {
+          "type": "SpacingTypes",
+          "default": "medium"
+        },
+        "isLoading": {
+          "type": "boolean"
+        },
+        "label": {
+          "type": "string"
+        }
+      },
+      "example": "<Button kind=\"primary\" size=\"medium\">Click me</Button>",
+      "tips": [
+        "kind='custom' lets you pair it with `bgColour`, `textColour`, `borderColour` for arbitrary colour combinations.",
+        "Use `isLoading` to show a spinner and disable interaction.",
+        "Wrap in next/link or react-router Link for navigation; don't reach for `href` here."
+      ]
+    },
+    "ButtonGroup": {
+      "description": "",
+      "import": "import { ButtonGroup } from \"fictoan-react\";",
+      "props": {
+        "isJoint": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "spacing": {
+          "type": "SpacingTypes"
+        },
+        "equaliseWidth": {
+          "type": "boolean"
+        }
+      }
+    },
+    "Callout": {
+      "description": "Inline emphasis box for notes, warnings, success/error messages.",
+      "import": "import { Callout } from \"fictoan-react\";",
+      "props": {
+        "kind": {
+          "type": "\"info\" | \"success\" | \"warning\" | \"error\"",
+          "required": true
+        },
+        "title": {
+          "type": "string"
+        }
+      },
+      "example": "<Callout kind=\"info\">\n    Heads up — this affects all users.\n</Callout>"
+    },
+    "Card": {
+      "description": "Generic surface container with shadow, border, and rounded shape. Use for grouping related content.",
+      "import": "import { Card } from \"fictoan-react\";",
+      "props": {
+        "heading": {
+          "type": "string"
+        }
+      },
+      "example": "<Card padding=\"medium\" shadow=\"soft\" shape=\"rounded\">\n    <Heading6>Title</Heading6>\n    <Text>Body</Text>\n</Card>",
+      "tips": [
+        "Card supports the universal `padding`, `bgColour`, `shadow`, `shape` props directly — no Card-specific styling props."
+      ]
+    },
+    "CodeBlock": {
+      "description": "",
+      "import": "import { CodeBlock } from \"fictoan-react\";",
+      "props": {
+        "source": {
+          "type": "string | object"
+        },
+        "language": {
+          "type": "string",
+          "default": "json"
+        },
+        "showCopyButton": {
+          "type": "boolean"
+        },
+        "showLineNumbers": {
+          "type": "boolean"
+        },
+        "description": {
+          "type": "string"
+        },
+        "withSyntaxHighlighting": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "makeEditable": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "onChange": {
+          "type": "((content: string) => void)"
+        }
+      }
+    },
+    "Divider": {
+      "description": "",
+      "import": "import { Divider } from \"fictoan-react\";",
+      "props": {
+        "kind": {
+          "type": "\"primary\" | \"secondary\" | \"tertiary\""
+        },
+        "height": {
+          "type": "string"
+        },
+        "label": {
+          "type": "string"
+        }
+      }
+    },
+    "Drawer": {
+      "description": "Side-anchored overlay panel. Common for navigation, filters, settings.",
+      "import": "import { Drawer } from \"fictoan-react\";",
+      "props": {
+        "id": {
+          "type": "string",
+          "required": true
+        },
+        "isOpen": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "onClose": {
+          "type": "(() => void)"
+        },
+        "position": {
+          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+          "default": "right"
+        },
+        "size": {
+          "type": "SpacingTypes",
+          "default": "medium"
+        },
+        "isDismissible": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "showOverlay": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "blurOverlay": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "closeOnClickOutside": {
+          "type": "boolean",
+          "description": "@deprecated Click-outside-to-close is governed by `isDismissible` via the\npopover API: when dismissible, both ESC and backdrop click close the\ndrawer. Splitting the two is no longer supported."
+        },
+        "label": {
+          "type": "string"
+        },
+        "description": {
+          "type": "string"
+        },
+        "zIndex": {
+          "type": "number"
+        }
+      },
+      "example": "<Drawer\n    id=\"filters\"\n    isOpen={isOpen}\n    position=\"right\"\n    size=\"medium\"\n    onClose={() => setIsOpen(false)}\n>\n    Filter content\n</Drawer>"
+    },
+    "Checkbox": {
+      "description": "",
+      "import": "import { Checkbox } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "checked": {
+          "type": "boolean"
+        },
+        "defaultChecked": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "onChange": {
+          "type": "((checked: boolean) => void)"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\"",
+          "default": "medium"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "labelFirst": {
+          "type": "boolean"
+        }
+      }
+    },
+    "CheckboxGroup": {
+      "description": "",
+      "import": "import { CheckboxGroup } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string",
+          "required": true
+        },
+        "options": {
+          "type": "BaseGroupOptionProps[]",
+          "required": true
+        },
+        "value": {
+          "type": "string[]"
+        },
+        "defaultValue": {
+          "type": "string[]"
+        },
+        "onChange": {
+          "type": "((values: string[]) => void)"
+        },
+        "align": {
+          "type": "\"horizontal\" | \"vertical\""
+        },
+        "equaliseWidth": {
+          "type": "boolean"
+        },
+        "equalizeWidth": {
+          "type": "boolean"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "labelFirst": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        }
+      }
+    },
+    "SwitchGroup": {
+      "description": "",
+      "import": "import { SwitchGroup } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string",
+          "required": true
+        },
+        "options": {
+          "type": "BaseGroupOptionProps[]",
+          "required": true
+        },
+        "value": {
+          "type": "string[]"
+        },
+        "defaultValue": {
+          "type": "string[]"
+        },
+        "onChange": {
+          "type": "((values: string[]) => void)"
+        },
+        "align": {
+          "type": "\"horizontal\" | \"vertical\""
+        },
+        "equaliseWidth": {
+          "type": "boolean"
+        },
+        "equalizeWidth": {
+          "type": "boolean"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "labelFirst": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        }
+      }
+    },
+    "FileUpload": {
+      "description": "",
+      "import": "import { FileUpload } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "accept": {
+          "type": "string"
+        },
+        "allowMultipleFiles": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "capture": {
+          "type": "\"user\" | \"environment\""
+        },
+        "height": {
+          "type": "string",
+          "default": "120px"
+        },
+        "onChange": {
+          "type": "((files: File[]) => void)"
+        },
+        "instructionMainText": {
+          "type": "string",
+          "default": "Drag and drop or click to upload"
+        },
+        "instructionSubText": {
+          "type": "string",
+          "default": "You can add multiple files"
+        },
+        "badgeBgColour": {
+          "type": "string"
+        },
+        "badgeBgColor": {
+          "type": "string"
+        },
+        "badgeTextColour": {
+          "type": "string"
+        },
+        "badgeTextColor": {
+          "type": "string"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "invalid": {
+          "type": "boolean"
+        },
+        "className": {
+          "type": "string",
+          "default": ""
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "aria-label": {
+          "type": "string"
+        },
+        "aria-invalid": {
+          "type": "boolean"
+        }
+      }
+    },
+    "Form": {
+      "description": "Wrapper that establishes consistent vertical spacing between form children via inheritFormSpacing.",
+      "import": "import { Form } from \"fictoan-react\";",
+      "props": {
+        "spacing": {
+          "type": "SpacingTypes",
+          "default": "small"
+        },
+        "fields": {
+          "type": "FormFieldsConfig[]"
+        },
+        "onFieldsChange": {
+          "type": "((values: Record<string, any>) => void)"
+        },
+        "errorText": {
+          "type": "string"
+        }
+      },
+      "example": "<Form>\n    <InputField label=\"Name\" />\n    <InputField label=\"Email\" />\n    <Button kind=\"primary\">Submit</Button>\n</Form>"
+    },
+    "FormItem": {
+      "description": "",
+      "import": "import { FormItem } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "customLabel": {
+          "type": "ReactNode"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "ReactNode"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "validationState": {
+          "type": "\"invalid\" | \"valid\" | null"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "labelFirst": {
+          "type": "boolean"
+        }
+      }
+    },
+    "FormItemGroup": {
+      "description": "",
+      "import": "import { FormItemGroup } from \"fictoan-react\";",
+      "props": {
+        "isJoint": {
+          "type": "boolean"
+        },
+        "equalWidthForChildren": {
+          "type": "ReactNode"
+        },
+        "retainLayout": {
+          "type": "boolean"
+        },
+        "legend": {
+          "type": "string"
+        }
+      }
+    },
+    "InputField": {
+      "description": "Single-line text input with built-in label, helper text, validation, and icon slots.",
+      "import": "import { InputField } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "ReactNode"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "validateThis": {
+          "type": "boolean"
+        },
+        "valid": {
+          "type": "boolean"
+        },
+        "invalid": {
+          "type": "boolean"
+        },
+        "validationState": {
+          "type": "\"invalid\" | \"valid\" | null"
+        },
+        "innerIconLeft": {
+          "type": "ReactNode"
+        },
+        "innerIconRight": {
+          "type": "ReactNode"
+        },
+        "innerTextLeft": {
+          "type": "string"
+        },
+        "innerTextRight": {
+          "type": "string"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "onFocus": {
+          "type": "InputFocusHandler"
+        },
+        "onBlur": {
+          "type": "InputFocusHandler"
+        },
+        "onChange": {
+          "type": "ValueChangeHandler<string>"
+        }
+      },
+      "example": "<InputField\n    label=\"Email\"\n    type=\"email\"\n    value={email}\n    onChange={setEmail}\n    required\n/>",
+      "tips": [
+        "Pass either an `onChange` that takes a value, or a standard React change event handler — both shapes are supported.",
+        "Use `innerIconLeft` / `innerIconRight` for inline icons; `helpText` for descriptions below the field.",
+        "For validation, pass `errorText` for the message and set `validationState` to `valid` or `invalid`."
+      ]
+    },
+    "InputLabel": {
+      "description": "",
+      "import": "import { InputLabel } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        }
+      }
+    },
+    "ListBox": {
+      "description": "Searchable, optionally multi-select combobox. Richer than Select but heavier — prefer Select when the option list is short.",
+      "import": "import { ListBox } from \"fictoan-react\";",
+      "props": {
+        "options": {
+          "type": "OptionForListBoxProps[]",
+          "default": "[]"
+        },
+        "label": {
+          "type": "string"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "allowMultiSelect": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "placeholder": {
+          "type": "string",
+          "default": "Select an option"
+        },
+        "id": {
+          "type": "string"
+        },
+        "defaultValue": {
+          "type": "string | string[]"
+        },
+        "selectionLimit": {
+          "type": "number"
+        },
+        "allowCustomEntries": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "isLoading": {
+          "type": "boolean"
+        },
+        "onChange": {
+          "type": "ValueChangeHandler<string | string[]>"
+        },
+        "value": {
+          "type": "string | string[]"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        }
+      },
+      "example": "<ListBox\n    label=\"Tags\"\n    options={tagOptions}\n    allowMultiSelect\n    onChange={setTags}\n/>"
+    },
+    "PinInputField": {
+      "description": "",
+      "import": "import { PinInputField } from \"fictoan-react\";",
+      "props": {
+        "numberOfFields": {
+          "type": "number",
+          "required": true
+        },
+        "onChange": {
+          "type": "((value: string) => void)"
+        },
+        "type": {
+          "type": "\"number\" | \"alphanumeric\"",
+          "default": "number"
+        },
+        "mask": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "isOTP": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "autoFocus": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "pasteFromClipboard": {
+          "type": "\"disabled\" | \"enabled\"",
+          "default": "enabled"
+        },
+        "focusFirstInputOnReset": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "ariaLabel": {
+          "type": "string"
+        },
+        "label": {
+          "type": "string"
+        },
+        "helpText": {
+          "type": "ReactNode"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        }
+      }
+    },
+    "RadioButton": {
+      "description": "",
+      "import": "import { RadioButton } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string",
+          "required": true
+        },
+        "checked": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "onChange": {
+          "type": "ValueChangeHandler<string>"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "labelFirst": {
+          "type": "boolean"
+        }
+      }
+    },
+    "RadioGroup": {
+      "description": "",
+      "import": "import { RadioGroup } from \"fictoan-react\";",
+      "props": {
+        "id": {
+          "type": "string"
+        },
+        "label": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "checked": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string",
+          "required": true
+        },
+        "options": {
+          "type": "RadioGroupOptionProps[]",
+          "required": true
+        },
+        "value": {
+          "type": "string"
+        },
+        "defaultValue": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "ValueChangeHandler<string>"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "labelFirst": {
+          "type": "boolean"
+        },
+        "align": {
+          "type": "\"horizontal\" | \"vertical\""
+        },
+        "equaliseWidth": {
+          "type": "boolean"
+        },
+        "equalizeWidth": {
+          "type": "boolean"
+        }
+      }
+    },
+    "RadioTabGroup": {
+      "description": "",
+      "import": "import { RadioTabGroup } from \"fictoan-react\";",
+      "props": {
+        "id": {
+          "type": "string"
+        },
+        "label": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "ValueChangeHandler<string>"
+        },
+        "checked": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "labelFirst": {
+          "type": "boolean"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "options": {
+          "type": "RadioGroupOptionProps[]",
+          "required": true
+        },
+        "value": {
+          "type": "string"
+        },
+        "defaultValue": {
+          "type": "string"
+        },
+        "align": {
+          "type": "\"horizontal\" | \"vertical\""
+        },
+        "equaliseWidth": {
+          "type": "boolean"
+        },
+        "equalizeWidth": {
+          "type": "boolean"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\"",
+          "default": "medium"
+        },
+        "name": {
+          "type": "string"
+        }
+      }
+    },
+    "Range": {
+      "description": "",
+      "import": "import { Range } from \"fictoan-react\";",
+      "props": {
+        "suffix": {
+          "type": "string"
+        },
+        "value": {
+          "type": "number | [number, number]",
+          "default": "[ 0, 100 ]"
+        },
+        "onChange": {
+          "type": "((value: number) => void) | ((value: [number, number]) => void)"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        },
+        "minLabel": {
+          "type": "string",
+          "default": "Minimum value"
+        },
+        "maxLabel": {
+          "type": "string",
+          "default": "Maximum value"
+        }
+      }
+    },
+    "Select": {
+      "description": "Native HTML select with Fictoan styling. For combobox / searchable / multi-select, use ListBox.",
+      "import": "import { Select } from \"fictoan-react\";",
+      "props": {
+        "options": {
+          "type": "OptionProps[] | OptGroupProps[]",
+          "required": true
+        },
+        "label": {
+          "type": "string"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "((value: string) => void)"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        }
+      },
+      "example": "<Select\n    label=\"Country\"\n    options={[{ label: \"India\", value: \"in\" }]}\n    onChange={setCountry}\n/>"
+    },
+    "Switch": {
+      "description": "",
+      "import": "import { Switch } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "htmlFor": {
+          "type": "string"
+        },
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "checked": {
+          "type": "boolean"
+        },
+        "defaultChecked": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "onChange": {
+          "type": "((checked: boolean) => void)"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\"",
+          "default": "medium"
+        },
+        "helpText": {
+          "type": "string"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "labelFirst": {
+          "type": "boolean"
+        }
+      }
+    },
+    "TextArea": {
+      "description": "",
+      "import": "import { TextArea } from \"fictoan-react\";",
+      "props": {
+        "hideLabel": {
+          "type": "boolean"
+        },
+        "helpText": {
+          "type": "ReactNode"
+        },
+        "errorText": {
+          "type": "string"
+        },
+        "invalid": {
+          "type": "boolean"
+        },
+        "valid": {
+          "type": "boolean"
+        },
+        "validateThis": {
+          "type": "boolean"
+        },
+        "onChange": {
+          "type": "((value: string) => void)"
+        },
+        "characterLimit": {
+          "type": "number"
+        },
+        "wordLimit": {
+          "type": "number"
+        },
+        "size": {
+          "type": "\"none\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\""
+        }
+      }
+    },
+    "Meter": {
+      "description": "",
+      "import": "import { Meter } from \"fictoan-react\";",
+      "props": {
+        "min": {
+          "type": "number",
+          "required": true
+        },
+        "max": {
+          "type": "number",
+          "required": true
+        },
+        "low": {
+          "type": "number",
+          "required": true
+        },
+        "high": {
+          "type": "number",
+          "required": true
+        },
+        "value": {
+          "type": "number",
+          "required": true
+        },
+        "optimum": {
+          "type": "number"
+        },
+        "showOptimumMarker": {
+          "type": "boolean"
+        },
+        "suffix": {
+          "type": "string"
+        },
+        "height": {
+          "type": "string"
+        },
+        "label": {
+          "type": "string"
+        },
+        "ariaLabel": {
+          "type": "string"
+        },
+        "description": {
+          "type": "string"
+        }
+      }
+    },
+    "Modal": {
+      "description": "Overlay dialog. Built on the native popover API; manages focus, backdrop, and ESC handling.",
+      "import": "import { Modal } from \"fictoan-react\";",
+      "props": {
+        "id": {
+          "type": "string",
+          "required": true
+        },
+        "isOpen": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "onClose": {
+          "type": "(() => void)"
+        },
+        "isDismissible": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "showBackdrop": {
+          "type": "boolean"
+        },
+        "blurBackdrop": {
+          "type": "boolean"
+        },
+        "label": {
+          "type": "string"
+        },
+        "description": {
+          "type": "string"
+        }
+      },
+      "example": "<Modal\n    id=\"confirm-modal\"\n    isOpen={isOpen}\n    onClose={() => setIsOpen(false)}\n>\n    <Heading4>Confirm action</Heading4>\n    <Text>Are you sure?</Text>\n</Modal>",
+      "tips": [
+        "Mount once near the root; toggle visibility with `isOpen`. Don't conditionally render the Modal itself."
+      ]
+    },
+    "NotificationsProvider": {
+      "description": "",
+      "import": "import { NotificationsProvider } from \"fictoan-react\";",
+      "props": {
+        "position": {
+          "type": "\"left\" | \"right\"",
+          "default": "right"
+        },
+        "anchor": {
+          "type": "\"top\" | \"bottom\"",
+          "default": "top"
+        },
+        "order": {
+          "type": "\"new-on-top\" | \"new-on-bottom\"",
+          "default": "new-on-top"
+        },
+        "kind": {
+          "type": "\"list\" | \"stack\"",
+          "default": "list"
+        }
+      }
+    },
+    "OptionCard": {
+      "description": "",
+      "import": "import { OptionCard } from \"fictoan-react\";",
+      "props": {
+        "id": {
+          "type": "string",
+          "required": true
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "heading": {
+          "type": "string"
+        }
+      }
+    },
+    "OptionCardsGroup": {
+      "description": "",
+      "import": "import { OptionCardsGroup } from \"fictoan-react\";",
+      "props": {
+        "allowMultipleSelections": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "showTickIcon": {
+          "type": "boolean"
+        },
+        "tickPosition": {
+          "type": "TickPosition",
+          "default": "top-right"
+        },
+        "onSelectionChange": {
+          "type": "((selectedIds: Set<string>) => void)"
+        },
+        "selectionLimit": {
+          "type": "number"
+        },
+        "defaultSelectedIds": {
+          "type": "Set<string>"
+        },
+        "selectedIds": {
+          "type": "Set<string>"
+        }
+      }
+    },
+    "Pagination": {
+      "description": "",
+      "import": "import { Pagination } from \"fictoan-react\";",
+      "props": {
+        "totalItems": {
+          "type": "number",
+          "required": true
+        },
+        "currentPage": {
+          "type": "number",
+          "required": true
+        },
+        "onPageChange": {
+          "type": "(newPage: number) => void",
+          "required": true
+        },
+        "itemsToShowEachSide": {
+          "type": "number",
+          "default": "1"
+        },
+        "kind": {
+          "type": "\"plain\" | \"outlined\" | \"filled\"",
+          "default": "plain"
+        },
+        "showGoToFirstItemButton": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "showGoToLastItemButton": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "showPreviousButton": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "showNextButton": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "showGoToInput": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "hideDisabledButtons": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "renderItem": {
+          "type": "((props: RenderItemProps) => ReactNode)",
+          "default": "(\n    {\n        type,\n        page,\n        selected,\n        disabled,\n        onClick,\n        key,\n        ...props\n    }: RenderItemProps) => {\n    if (type === \"ellipsis\") {\n        return (\n            <Text className=\"pagination-ellipsis\">...</Text>\n        );\n    }\n\n    const iconButtonLabels: Record<string, string> = {\n        first    : \"Go to first page\",\n        previous : \"Go to previous page\",\n        next     : \"Go to next page\",\n        last     : \"Go to last page\",\n    };\n\n    const paginationItemProps = {\n        type      : \"button\",\n        className : `pagination-item ${selected ? \"selected\" : \"\"} ${disabled ? \"disabled\" : \"\"}`,\n        onClick,\n        disabled,\n        ...(iconButtonLabels[type] ? { \"aria-label\" : iconButtonLabels[type] } : {}),\n        ...props,\n    };\n\n    let content;\n    switch (type) {\n        case \"first\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <line x1=\"5\" y1=\"18\" x2=\"5\" y2=\"6\" />\n                    <polyline points=\"14 18 9 12 14 6\" />\n                    <line x1=\"10\" y1=\"12\" x2=\"19\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"previous\":\n            content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 18 7 12 12 6\" />\n                    <line x1=\"8\" y1=\"12\" x2=\"17\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"next\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 6 17 12 12 18\" />\n                    <line x1=\"16\" y1=\"12\" x2=\"7\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"last\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"10 6 15 12 10 18\" />\n                    <line x1=\"19\" y1=\"6\" x2=\"19\" y2=\"18\" />\n                    <line x1=\"14\" y1=\"12\" x2=\"5\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        default:\n            content = page;\n    }\n\n    return (\n        <Button\n            kind=\"custom\"\n            {...paginationItemProps}\n        >\n            {content}\n        </Button>\n    );\n}"
+        },
+        "isLoading": {
+          "type": "boolean",
+          "default": "false"
+        },
+        "loadingText": {
+          "type": "string"
+        },
+        "emptyText": {
+          "type": "string"
+        },
+        "itemDisplayText": {
+          "type": "string",
+          "default": "Page"
+        }
+      }
+    },
+    "Portion": {
+      "description": "Child of Row. Declares a column span at one or more breakpoints. Uses fraction names ('half', 'one-third') or numbers ('1' through '24'). Breakpoints are now CONTAINER-relative: the parent Row's rendered width decides which span applies, not the viewport.",
+      "import": "import { Portion } from \"fictoan-react\";",
+      "props": {
+        "desktopSpan": {
+          "type": "SpanTypes"
+        },
+        "tabletLandscapeSpan": {
+          "type": "SpanTypes"
+        },
+        "tabletPortraitSpan": {
+          "type": "SpanTypes"
+        },
+        "mobileSpan": {
+          "type": "SpanTypes"
+        },
+        "isHorizontal": {
+          "type": "boolean"
+        },
+        "role": {
+          "type": "string"
+        }
+      },
+      "example": "<Portion desktopSpan=\"half\" mobileSpan=\"whole\">\n    Content\n</Portion>",
+      "composition": {
+        "parent": "Row"
+      },
+      "tips": [
+        "Fraction names: one-twelfth, one-eighth, one-sixth, one-fourth, one-third, five-twelfth, half, seven-twelfth, two-third, three-fourth, five-sixth, seven-eighth, eleven-twelfth, whole.",
+        "Numeric spans 1–24 give exact column counts.",
+        "When the parent Row is ≤ 600px wide, every Portion collapses to span 24 unless `mobileSpan` is set or the Row has `retainLayoutOnMobile`.",
+        "Breakpoints are container-relative (Row width), not viewport-relative. A Portion inside a sidebar will stack regardless of the screen size."
+      ]
+    },
+    "ProgressBar": {
+      "description": "",
+      "import": "import { ProgressBar } from \"fictoan-react\";",
+      "props": {
+        "label": {
+          "type": "string"
+        },
+        "value": {
+          "type": "number"
+        },
+        "suffix": {
+          "type": "string"
+        },
+        "height": {
+          "type": "string"
+        },
+        "max": {
+          "type": "number",
+          "default": "100"
+        }
+      }
+    },
+    "Row": {
+      "description": "The horizontal layout primitive. A 24-column CSS grid that caps at 2400px and centres automatically. Children are Portions. Acts as a CSS container, so Portion responsive variants react to the Row's actual rendered width, not the viewport.",
+      "import": "import { Row } from \"fictoan-react\";",
+      "props": {
+        "layout": {
+          "type": "\"grid\" | \"flexbox\"",
+          "default": "grid"
+        },
+        "gutters": {
+          "type": "SpacingTypes",
+          "default": "medium"
+        },
+        "retainLayoutOnTabletLandscape": {
+          "type": "boolean"
+        },
+        "retainLayoutOnTabletPortrait": {
+          "type": "boolean"
+        },
+        "retainLayoutOnMobile": {
+          "type": "boolean"
+        },
+        "retainLayoutAlways": {
+          "type": "boolean"
+        },
+        "allowUltraWide": {
+          "type": "boolean"
+        },
+        "groupLabel": {
+          "type": "string"
+        }
+      },
+      "example": "<Row horizontalPadding=\"medium\" gutters=\"medium\">\n    <Portion desktopSpan=\"half\">Left</Portion>\n    <Portion desktopSpan=\"half\">Right</Portion>\n</Row>",
+      "composition": {
+        "children": "Portion[]"
+      },
+      "tips": [
+        "Use `gutters` for inter-column spacing; `horizontalPadding` for left/right padding inside the Row.",
+        "Set `allowUltraWide` only when you explicitly need the Row to fill viewports beyond 2400px.",
+        "Use `retainLayoutOnMobile` (or `retainLayoutAlways`) to prevent the grid from collapsing to a single column.",
+        "A Row inside a narrow parent (sidebar, modal, etc.) collapses its Portions based on its OWN width, not the viewport."
+      ]
+    },
+    "SidebarWrapper": {
+      "description": "",
+      "import": "import { SidebarWrapper } from \"fictoan-react\";",
+      "props": {
+        "collapsed": {
+          "type": "boolean"
+        },
+        "closeOnClickOutside": {
+          "type": "(() => void)"
+        },
+        "showMobileSidebar": {
+          "type": "boolean"
+        }
+      }
+    },
+    "ContentWrapper": {
+      "description": "",
+      "import": "import { ContentWrapper } from \"fictoan-react\";",
+      "props": {}
+    },
+    "SidebarHeader": {
+      "description": "",
+      "import": "import { SidebarHeader } from \"fictoan-react\";",
+      "props": {
+        "isSticky": {
+          "type": "boolean"
+        }
+      }
+    },
+    "SidebarItemsGroup": {
+      "description": "",
+      "import": "import { SidebarItemsGroup } from \"fictoan-react\";",
+      "props": {
+        "title": {
+          "type": "string"
+        }
+      }
+    },
+    "SidebarItem": {
+      "description": "",
+      "import": "import { SidebarItem } from \"fictoan-react\";",
+      "props": {
+        "hasAlert": {
+          "type": "boolean"
+        },
+        "hasEmptyIcon": {
+          "type": "boolean"
+        },
+        "hasNoIcon": {
+          "type": "boolean"
+        }
+      }
+    },
+    "SidebarFooter": {
+      "description": "",
+      "import": "import { SidebarFooter } from \"fictoan-react\";",
+      "props": {
+        "isSticky": {
+          "type": "boolean"
+        }
+      }
+    },
+    "Skeleton": {
+      "description": "",
+      "import": "import { Skeleton } from \"fictoan-react\";",
+      "props": {
+        "variant": {
+          "type": "\"line\" | \"circle\" | \"block\"",
+          "default": "line"
+        },
+        "width": {
+          "type": "string | number"
+        },
+        "height": {
+          "type": "string | number"
+        },
+        "effect": {
+          "type": "\"pulse\" | \"wave\" | \"none\"",
+          "default": "wave"
+        },
+        "animate": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "loadingLabel": {
+          "type": "string",
+          "default": "Loading content..."
+        }
+      }
+    },
+    "SkeletonGroup": {
+      "description": "",
+      "import": "import { SkeletonGroup } from \"fictoan-react\";",
+      "props": {
+        "repeat": {
+          "type": "number",
+          "default": "1"
+        },
+        "direction": {
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "vertical"
+        },
+        "spacing": {
+          "type": "SpacingTypes",
+          "default": "small"
+        },
+        "effect": {
+          "type": "\"pulse\" | \"wave\" | \"none\"",
+          "default": "wave"
+        },
+        "animate": {
+          "type": "boolean",
+          "default": "true"
+        },
+        "loadingLabel": {
+          "type": "string",
+          "default": "Loading content..."
+        }
+      }
+    },
+    "Spinner": {
+      "description": "",
+      "import": "import { Spinner } from \"fictoan-react\";",
+      "props": {
+        "size": {
+          "type": "\"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\"",
+          "default": "medium"
+        },
+        "loadingText": {
+          "type": "string",
+          "default": "Loading..."
+        }
+      }
+    },
+    "Table": {
+      "description": "",
+      "import": "import { Table } from \"fictoan-react\";",
+      "props": {
+        "bordersFor": {
+          "type": "\"rows\" | \"columns\" | \"both\""
+        },
+        "alignText": {
+          "type": "\"left\" | \"right\" | \"centre\" | \"center\""
+        },
+        "isStriped": {
+          "type": "boolean"
+        },
+        "highlightRowOnHover": {
+          "type": "boolean"
+        },
+        "caption": {
+          "type": "string"
+        },
+        "summary": {
+          "type": "string"
+        },
+        "hasColSpan": {
+          "type": "boolean"
+        }
+      }
+    },
+    "Tabs": {
+      "description": "Tabbed content switcher. Pass a tabs array with label + content for each tab.",
+      "import": "import { Tabs } from \"fictoan-react\";",
+      "props": {
+        "tabs": {
+          "type": "TabType[]",
+          "required": true
+        },
+        "additionalNavContentWrapper": {
+          "type": "ReactNode"
+        },
+        "defaultActiveTab": {
+          "type": "ReactNode"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\"",
+          "default": "left"
+        }
+      },
+      "example": "<Tabs\n    tabs={[\n        { label: \"Overview\", content: <Overview /> },\n        { label: \"Details\",  content: <Details /> },\n    ]}\n/>"
+    },
+    "ThemeProvider": {
+      "description": "Root provider that supplies the theme context. Wrap your app once at the top level.",
+      "import": "import { ThemeProvider } from \"fictoan-react\";",
+      "props": {
+        "themeList": {
+          "type": "string[]",
+          "required": true
+        },
+        "currentTheme": {
+          "type": "string",
+          "required": true
+        },
+        "storageKey": {
+          "type": "string",
+          "description": "localStorage key the theme is persisted under. Defaults to \"fictoan-theme\"; pass a unique\nvalue (your package.json name works well) when multiple Fictoan apps can share an origin\n(e.g. localhost during dev, GitHub Pages) so their themes don't collide."
+        },
+        "nonce": {
+          "type": "string",
+          "description": "Pass your CSP nonce so the no-flash inline script is allowed under a strict `script-src`."
+        }
+      },
+      "example": "<ThemeProvider>\n    <App />\n</ThemeProvider>",
+      "tips": [
+        "Pair with `useTheme()` inside descendants to read or change theme."
+      ]
+    },
+    "ToastsProvider": {
+      "description": "",
+      "import": "import { ToastsProvider } from \"fictoan-react\";",
+      "props": {
+        "anchor": {
+          "type": "\"top\" | \"bottom\"",
+          "default": "top"
+        }
+      }
+    },
+    "Tooltip": {
+      "description": "",
+      "import": "import { Tooltip } from \"fictoan-react\";",
+      "props": {
+        "isTooltipFor": {
+          "type": "string",
+          "required": true
+        },
+        "showOn": {
+          "type": "ShowOn",
+          "default": "hover"
+        },
+        "position": {
+          "type": "Position",
+          "default": "top"
+        },
+        "zIndex": {
+          "type": "number"
+        }
+      }
+    },
+    "Text": {
+      "description": "Paragraph text (p). Universal text-styling props (textColour, weight) apply.",
+      "import": "import { Text } from \"fictoan-react\";",
+      "props": {
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "size": {
+          "type": "SpacingTypes"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        },
+        "isSubtext": {
+          "type": "boolean"
+        }
+      },
+      "example": "<Text textColour=\"grey-dark40\">Body copy here.</Text>"
+    },
+    "Heading1": {
+      "description": "Page-level heading (h1). Use one per page. For lighter weights, set `weight` directly.",
+      "import": "import { Heading1 } from \"fictoan-react\";",
+      "props": {
+        "as": {
+          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
+        },
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        }
+      },
+      "example": "<Heading1 marginBottom=\"micro\">Welcome</Heading1>"
+    },
+    "Heading2": {
+      "description": "",
+      "import": "import { Heading2 } from \"fictoan-react\";",
+      "props": {
+        "as": {
+          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
+        },
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        }
+      }
+    },
+    "Heading3": {
+      "description": "",
+      "import": "import { Heading3 } from \"fictoan-react\";",
+      "props": {
+        "as": {
+          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
+        },
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        }
+      }
+    },
+    "Heading4": {
+      "description": "",
+      "import": "import { Heading4 } from \"fictoan-react\";",
+      "props": {
+        "as": {
+          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
+        },
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        }
+      }
+    },
+    "Heading5": {
+      "description": "",
+      "import": "import { Heading5 } from \"fictoan-react\";",
+      "props": {
+        "as": {
+          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
+        },
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        }
+      }
+    },
+    "Heading6": {
+      "description": "",
+      "import": "import { Heading6 } from \"fictoan-react\";",
+      "props": {
+        "as": {
+          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
+        },
+        "fontStyle": {
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
+          "default": "sans-serif"
+        },
+        "align": {
+          "type": "\"left\" | \"centre\" | \"center\" | \"right\""
+        }
+      }
+    }
+  },
+  "compositionRules": [
+    "Row > Portion: Portions must be direct children of a Row.",
+    "Form: wraps inputs to give consistent vertical spacing between fields.",
+    "ToastsProvider must wrap the app for useToasts() to work.",
+    "ThemeProvider should be the outermost provider in your app tree."
+  ]
+}