@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-props/HeatmapChart.json

@@ -2,28 +2,104 @@
   "HeatmapChart": {
     "props": {
       "axisPointer": {
-        "type": "\"AxisPointerOption\" | \"AxisPointerOption[]\"",
+        "defaultValue": "hidden",
+        "description": "The crosshair following the pointer. One object applies to both axes; a\ntwo-entry array configures them separately.\nhttps://echarts.apache.org/en/option.html#axisPointer",
         "isRequired": false,
-        "description": "Display reference line and axis value under mouse pointer\nhttps://echarts.apache.org/en/option.html#axisPointer"
+        "type": "AxisPointerOption | AxisPointerOption[]"
       },
       "camera": {
-        "type": "{ active: boolean; height: number; width: number; }",
+        "defaultValue": "40 × 20 when active",
+        "description": "Renders only a window of the grid, measured in cells, and lets the pointer\npan it. Sizes are ignored unless `active` is true.\n\nThe `camera` prop is utilized for implementing camera view port functionality\nwithin a specific area of the chart. This feature empowers users to render\na confined portion of the heatmap. This selective rendering strategy becomes\nespecially advantageous when dealing with extensive datasets. Instead of\nrendering the entire heatmap at once, the chart dynamically loads and renders\nspecific segments as the user scrolls through the data. This approach optimizes\nperformance and enables the creation of heatmaps with large amounts of data.\n\nThe `height` and `width` properties are used to specify the dimensions of the\ncamera view port. The `active` property is used to enable or disable the camera\nview port functionality.",
         "isRequired": false,
-        "description": "The `camera` prop is utilized for implementing camera view port functionality\nwithin a specific area of the chart. This feature empowers users to render\na confined portion of the heatmap. This selective rendering strategy becomes\nespecially advantageous when dealing with extensive datasets. Instead of\nrendering the entire heatmap at once, the chart dynamically loads and renders\nspecific segments as the user scrolls through the data. This approach optimizes\nperformance and enables the creation of heatmaps with large amounts of data.\n\nThe `height` and `width` properties are used to specify the dimensions of the\ncamera view port. The `active` property is used to enable or disable the camera\nview port functionality."
+        "type": "{ active: boolean; height: number; width: number; }"
       },
       "echartsRendererMode": {
-        "type": "\"svg\" | \"canvas\"",
-        "isRequired": false
+        "defaultValue": "svg",
+        "description": "Which renderer ECharts initialises with. Canvas copes better with very\nlarge grids. Changing it rebuilds the chart.",
+        "isRequired": false,
+        "type": "\"canvas\" | \"svg\""
       },
       "symbol": {
-        "type": "\"circle\" | \"rect\" | \"roundRect\"",
+        "defaultValue": "rect",
+        "description": "The shape of a cell. Circles turn the grid into a dot plot, where diameter\ncan carry a second measurement.",
         "isRequired": false,
-        "description": "The shape of the symbol."
+        "type": "\"circle\" | \"rect\" | \"roundRect\""
+      },
+      "data": {
+        "defaultValue": "- (required)",
+        "description": "The cells, as a flat array of objects whose fields are named by `encode`.\nThe data point object shape can be whatever you like, but it must be consistent with the `encode` option\nFor example, if the data point shape is:\n{\n  geneIndex: 0,\n  cellTypeIndex: 0,\n  percentage: 0.5\n}\nand you want geneIndex to be encoded to x axis and cellTypeIndex to be encoded to y axis, then make sure your encode option is:\nencode: {\n  x: 'geneIndex',\n  y: 'cellTypeIndex'\n}",
+        "isRequired": true,
+        "type": "OptionSourceDataTypedArray | OptionSourceDataOriginal<OptionDataValue, OptionDataItemOriginal<OptionDataValue>> | OptionSourceDataObjectRows<OptionDataValue> | OptionSourceDataArrayRows<OptionDataValue> | OptionSourceDataKeyedColumns<OptionDataValue>"
+      },
+      "xAxisData": {
+        "defaultValue": "- (required)",
+        "description": "The categories along the x axis. A cell's encoded x value is an index into\nthis array.\nFor example:\n[{ value: \"gene1\", textStyle: { color: \"red\" } }, \"gene2\", \"gene3\"]",
+        "isRequired": true,
+        "type": "CategoryAxisData"
+      },
+      "yAxisData": {
+        "defaultValue": "- (required)",
+        "description": "The categories along the y axis.\nFor example:\n[{ value: \"cellType1\", textStyle: { color: \"red\" } }, \"cellType2\", \"cellType3\"]",
+        "isRequired": true,
+        "type": "CategoryAxisData"
+      },
+      "width": {
+        "defaultValue": "- (required)",
+        "description": "Width of the chart in pixels. Must be greater than zero; the component\nthrows otherwise.",
+        "isRequired": true,
+        "type": "number"
+      },
+      "height": {
+        "defaultValue": "- (required)",
+        "description": "Height of the chart in pixels, under the same rule.",
+        "isRequired": true,
+        "type": "number"
       },
-      "tooltip": {
-        "type": "any",
-        "isRequired": false
+      "encode": {
+        "description": "Which fields of a data item place it on each axis. Omitting it leaves\nECharts to guess from the field order.\nFor example, if the data is:\n{\n  geneIndex: 0,\n  cellTypeIndex: 0,\n  percentage: 0.5\n}\nand we want to encode `geneIndex` to x axis and `cellTypeIndex` to y axis, then\nencode: {\n x: 'geneIndex',\n y: 'cellTypeIndex'\n}\nhttps://echarts.apache.org/en/option.html#series-scatter.encode",
+        "isRequired": false,
+        "type": "{ x: string; y: string; }"
+      },
+      "symbolSize": {
+        "defaultValue": 5,
+        "description": "Cell size in pixels: one number, a [width, height] pair, or a callback\ngiven the data item. Set it to the cell pitch for a solid grid.\n\n`symbolSize` can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is 10.\n\nIf size of symbols needs to be different, you can set with callback function in the following format:\n\n(value: Array|number, params: Object) => number|Array\n\nThe first parameter value is the value in data, and the second parameter params is the rest parameters of data item.\nhttps://echarts.apache.org/en/option.html#series-scatter.symbolSize",
+        "isRequired": false,
+        "type": "number | number[] | SymbolSizeCallback<CallbackDataParams>"
+      },
+      "itemStyle": {
+        "defaultValue": "solid black",
+        "description": "How a cell is painted. Its color accepts a callback receiving the data\nitem, which is how a value becomes a color.\nhttps://echarts.apache.org/en/option.html#series-scatter.itemStyle",
+        "isRequired": false,
+        "type": "ItemStyleOption<CallbackDataParams>"
+      },
+      "emphasis": {
+        "defaultValue": "a 2–4px border",
+        "description": "How a cell is drawn while the pointer is over it. Takes the same shape as\n`itemStyle`: color, border, opacity.\nhttps://echarts.apache.org/en/option.html#series-scatter.emphasis",
+        "isRequired": false,
+        "type": "ScatterStateOption"
+      },
+      "dataZoom": {
+        "defaultValue": "the camera window",
+        "description": "ECharts' dataZoom configuration for that window, merged over the defaults\nit sets. One object applies to both axes; a two-entry array configures them\nseparately. It reaches the chart only while `camera.active` is true.\n\nThe `dataZoom` prop is utilized for implementing zoom functionality within a\nspecific area of the chart. This feature empowers users to inspect data in\ngranular detail, obtain an overview of the entire dataset, or eliminate\noutlier points.\nBy applying the `dataZoom` prop while locking the zoom level, the chart\nefficiently renders a confined portion of the heatmap. This selective\nrendering strategy becomes especially advantageous when dealing with\nextensive datasets. Instead of rendering the entire heatmap at once,\nthe chart dynamically loads and renders specific segments as the user\nscrolls through the data. This approach optimizes performance and enables\nthe creation of heatmaps with large amounts of data.\nhttps://echarts.apache.org/en/option.html#dataZoom",
+        "isRequired": false,
+        "type": "SliderDataZoomOption | InsideDataZoomOption | DataZoomComponentOption[]"
+      },
+      "grid": {
+        "defaultValue": "fills the container",
+        "description": "Where the plotting area sits inside the container. The function form\nreceives the computed default, for insetting it without recomputing the\nsize.\nhttps://echarts.apache.org/en/option.html#grid",
+        "isRequired": false,
+        "type": "GridOption | GridOption[] | (defaultOption: GridOption | GridOption[]) => GridOption | GridOption[]"
+      },
+      "options": {
+        "description": "Anything else ECharts understands, merged over the generated options.\nhttps://echarts.apache.org/en/option.html",
+        "isRequired": false,
+        "type": "EChartsOption"
+      },
+      "onEvents": {
+        "description": "ECharts event listeners by name. Each handler gets the raw event, whose\ndata property is the cell, and the chart instance.\nhttps://echarts.apache.org/en/api.html#events",
+        "isRequired": false,
+        "type": "Record<string, (event: unknown, chart: EChartsType) => void>"
       }
     }
   }
-}
+}

package/data/component-props/Hero.json

@@ -2,81 +2,122 @@
   "Hero": {
     "props": {
       "backgroundFill": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "A string becomes the background color, so any CSS color or gradient works. A node is rendered full-bleed behind the content, and an img or video inside it is scaled to cover the section.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "captionText": {
-        "type": "string",
-        "isRequired": false
+        "description": "Supporting copy rendered below the headline.",
+        "isRequired": false,
+        "type": "string"
       },
       "darkeningMask": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Adds a solid layer over the background. Pair it with darkeningMaskOpacity, which is 0 by default.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "darkeningMaskColor": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "#000000",
+        "description": "The color of that layer.",
+        "isRequired": false,
+        "type": "string"
       },
       "darkeningMaskOpacity": {
-        "type": "number",
-        "isRequired": false
+        "defaultValue": 0,
+        "description": "The opacity of that layer, from 0 to 1.",
+        "isRequired": false,
+        "type": "number"
       },
       "darkeningVignette": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Draws a 40px gradient along the top edge, above the content, so a transparent header navigation stays legible.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "hasInvertTextColor": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Sets the headline and caption in the light text color, for a hero over a dark backdrop: imagery, or a darkening mask over it. The color is the same in both themes, because the backdrop it is read against is.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "headerFontSize": {
-        "type": "\"s\" | \"m\" | \"l\"",
-        "isRequired": false
+        "defaultValue": "m",
+        "description": "The type scale of the headline.",
+        "isRequired": false,
+        "type": "\"s\" | \"m\" | \"l\""
       },
       "headerText": {
-        "type": "string",
-        "isRequired": false
+        "description": "The headline. Rendered as an h1 and omitted entirely when not provided.",
+        "isRequired": false,
+        "type": "string"
       },
       "heroHeight": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "fit-content",
+        "description": "Any CSS height. Below a 512px viewport it is ignored and the section falls back to fit-content.",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayContainerMinMargin": {
-        "type": "{ small: number; medium: number; large: number; }",
-        "isRequired": false
+        "defaultValue": "24px / 40px / 120px",
+        "description": "Overrides the side padding at each breakpoint. The value is written straight into CSS, so it needs a unit. The number type in the signature is wrong: a plain number produces an invalid declaration and the side padding drops to zero.",
+        "isRequired": false,
+        "type": "{ small: number; medium: number; large: number; }"
       },
       "overlayContentWidth": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "100%",
+        "description": "Any CSS width for the content block, for example \"60%\" or \"640px\".",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayContentPosition": {
-        "type": "\"left\" | \"center\" | \"right\" | \"top-left\" | \"top\" | \"top-right\" | \"bottom-left\" | \"bottom\" | \"bottom-right\"",
-        "isRequired": false
+        "defaultValue": "center",
+        "description": "Where the content block sits inside the section. Only visible when the section is taller or wider than the content.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
       },
       "overlayMedia": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "A media layer above the background and independent of the text block. An img or video inside it is scaled to cover the layer.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "overlayMediaPosition": {
-        "type": "\"left\" | \"center\" | \"right\" | \"top-left\" | \"top\" | \"top-right\" | \"bottom-left\" | \"bottom\" | \"bottom-right\"",
-        "isRequired": false
+        "defaultValue": "center",
+        "description": "Where that layer sits inside the section.",
+        "isRequired": false,
+        "type": "\"center\" | \"bottom\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\""
       },
       "overlayMediaMaxHeight": {
-        "type": "string",
-        "isRequired": false
+        "description": "Sets the height of the media layer, with the same caveat.",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayMediaMaxWidth": {
-        "type": "string",
-        "isRequired": false
+        "description": "Sets the width of the media layer outright rather than a maximum, despite the name. Without it the layer has no width.",
+        "isRequired": false,
+        "type": "string"
       },
       "overlayMediaMargin": {
-        "type": "\"string\" | \"{ small: string; medium: string; large: string; }\"",
-        "isRequired": false
+        "defaultValue": "0",
+        "description": "A margin shorthand for the media layer. Pass the object form to vary it by breakpoint: small below md, medium below lg, large above.",
+        "isRequired": false,
+        "type": "string | { small: string; medium: string; large: string; }"
       },
       "textAlignment": {
-        "type": "\"left\" | \"center\" | \"right\"",
-        "isRequired": false
+        "description": "Aligns the text within the content block, which starts at the leading edge when the prop is unset. This is separate from overlayContentPosition, which moves the block itself.",
+        "isRequired": false,
+        "type": "\"center\" | \"left\" | \"right\""
+      },
+      "children": {
+        "description": "Rendered in a full-width slot below the caption. Use it for buttons, links, or a search field.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "className": {
+        "description": "Declared so it type-checks, but nothing in the component reads it: it travels with the rest of the props onto the section element.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/Icon.json

@@ -2,21 +2,32 @@
   "Icon": {
     "props": {
       "color": {
-        "type": "\"blue\" | \"gray\" | \"green\" | \"purple\" | \"indigo\" | \"red\" | \"yellow\"",
-        "isRequired": false
+        "defaultValue": "indigo",
+        "description": "A hue from the SDS palette. Note that this is the SDS color prop, not the MUI one, and it does not accept a CSS color.",
+        "isRequired": false,
+        "type": "\"blue\" | \"gray\" | \"green\" | \"purple\" | \"indigo\" | \"red\" | \"yellow\""
       },
       "sdsIcon": {
-        "type": "complex",
-        "isRequired": true
+        "description": "Required. The name of the icon, as listed in the Icon Bank. Names are case-sensitive, for example \"XMark\" and \"LightBulb\".",
+        "isRequired": true,
+        "type": "\"ArrowsDiagonalIn\" | \"ArrowsDiagonalOut\" | \"ArrowsUpDown\" | \"Bacteria\" | \"BarChartHorizontal3\" | \"BarChartVertical3\" | \"BarChartVertical4\" | \"Book\" | \"Check\" | \"CheckCircle\" | \"ChevronDown\" | \"ChevronDown2\" | \"ChevronLeft2\" | \"ChevronLeft\" | \"ChevronRight2\" | \"ChevronRight\" | \"ChevronUp\" | \"ChevronUp2\" | \"CirclesOverlap2\" | \"Cli\" | \"Code\" | \"Compass\" | \"Copy\" | \"Cube\" | \"DNA\" | \"Document\" | \"DotPlot\" | \"DotsHorizontal\" | \"Download\" | \"Droplet\" | \"Edit\" | \"Envelope\" | \"ExclamationMarkCircle\" | \"ExclamationMarkSpeechBubble\" | \"EyeClosed\" | \"EyeOpen\" | \"Filter\" | \"FlagCheck\" | \"FlagOutline\" | \"FlagQuestionMark\" | \"FlagXMark\" | \"Flask\" | \"FlaskPrivate\" | \"FlaskPublic\" | \"Gear\" | \"Gene\" | \"Github\" | \"Globe\" | \"GlobeBasic\" | \"Grid\" | \"GridDots3\" | \"GridPrivate\" | \"GridPublic\" | \"House\" | \"Hand\" | \"HandOpen\" | \"HandPointer\" | \"Image\" | \"InfoCircle\" | \"InfoSpeechBubble\" | \"Label\" | \"Lasso\" | \"LifeRing\" | \"LightBulb\" | \"LinesDashed3Solid1\" | \"LinesHorizontal3\" | \"Link\" | \"List\" | \"Loading\" | \"Lock\" | \"LockCircle\" | \"Maximize\" | \"Minimize\" | \"Minus\" | \"Open\" | \"Package\" | \"Pause\" | \"People\" | \"Percentage\" | \"Person\" | \"PieChart\" | \"PieChartXMark\" | \"Pin\" | \"PinLocation\" | \"Play\" | \"Plus\" | \"PlusCircle\" | \"ProjectPrivate\" | \"ProjectPublic\" | \"PuzzlePiece\" | \"QuestionMark\" | \"QuestionMarkCircle\" | \"Quote\" | \"Read\" | \"Refresh\" | \"Report\" | \"Rocket\" | \"RotateLeft\" | \"RotateRight\" | \"Save\" | \"Scale\" | \"ScatterPlot\" | \"Search\" | \"SearchLinesHorizontal3\" | \"Send\" | \"Share\" | \"SlidersHorizontal\" | \"Sparkle\" | \"Sparkles\" | \"SpeechBubbles\" | \"SquareOnDashedSquare\" | \"SquareOnSquareArrowDownRight\" | \"Starburst\" | \"Star\" | \"Table\" | \"ThumbsDown\" | \"ThumbsUp\" | \"TrashCan\" | \"TreeDendogram\" | \"TreeHorizontal\" | \"TreeHorizontalPrivate\" | \"TreeHorizontalPublic\" | \"TreeHorizontalTopRightFilled\" | \"TreeVertical\" | \"TriangleDown\" | \"TriangleLeft\" | \"TriangleRight\" | \"TriangleUp\" | \"Update\" | \"Umap\" | \"Upload\" | \"Virus\" | \"VirusCircleS\" | \"Widget\" | \"XMark\" | \"XMarkCircle\""
       },
       "sdsSize": {
-        "type": "\"xxs\" | \"xs\" | \"s\" | \"l\" | \"xl\"",
-        "isRequired": true
+        "description": "Required. Which sizes are accepted depends on the icon named in sdsIcon.",
+        "isRequired": true,
+        "type": "\"s\" | \"xs\" | \"l\" | \"xl\" | \"xxs\""
       },
       "shade": {
-        "type": "\"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\"",
-        "isRequired": false
+        "defaultValue": "500 in light mode, 600 in dark mode",
+        "description": "The step within the chosen hue.",
+        "isRequired": false,
+        "type": "100 | 200 | 300 | 400 | 500 | 600 | 700 | 800"
+      },
+      "className": {
+        "description": "Applied to the SVG. Useful for overriding the fill from a parent component.",
+        "isRequired": false,
+        "type": "string"
       }
     }
   }
-}
+}

package/data/component-props/InputCheckbox.json

@@ -2,32 +2,54 @@
   "InputCheckbox": {
     "props": {
       "caption": {
-        "type": "string",
-        "isRequired": false
+        "description": "The caption of the InputCheckbox appears beneath the label in a lighter text color.",
+        "isRequired": false,
+        "type": "string"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
+        "defaultValue": false,
         "description": "If `true`, the component is disabled.",
-        "defaultValue": false
+        "isRequired": false,
+        "type": "boolean"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Colors the border of the empty box. The checked box always uses the accent color.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The label of the InputCheckbox. When omitted, the box renders on its own with no label element.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "stage": {
-        "type": "\"indeterminate\" | \"checked\" | \"unchecked\"",
-        "isRequired": false
+        "description": "Sets the state of the checkbox. It overrides checked, so a checkbox with a stage only changes when you recompute the stage from an onChange handler. Omit it to let the checkbox manage its own state.",
+        "isRequired": false,
+        "type": "\"checked\" | \"indeterminate\" | \"unchecked\""
       },
       "classes": {
-        "type": "complex",
+        "defaultValue": {},
+        "description": "Class names for the internal elements: root, labelCaptionContainer, label,\ncaption, checkbox, checkboxCheckedIcon, checkboxDefaultIcon, and\ncheckboxIndeterminateIcon.",
+        "isRequired": false,
+        "type": "complex"
+      },
+      "checkboxProps": {
+        "defaultValue": {},
+        "description": "Directly pass these props to the underlying MUI checkbox.",
+        "isRequired": false,
+        "type": "Partial<CheckboxProps>"
+      },
+      "checked": {
+        "description": "If `true`, the component is checked.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "onChange": {
+        "description": "Callback fired when the state is changed.\n@param event The event source of the callback.\nYou can pull out the new checked state by accessing `event.target.checked` (boolean).",
         "isRequired": false,
-        "description": "Override or extend the styles applied to the component."
+        "type": "function"
       }
     }
   }
-}
+}

package/data/component-props/InputDropdown.json

@@ -2,57 +2,105 @@
   "InputDropdown": {
     "props": {
       "counter": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "If multiple set to true, this number shows the number of selected menu items.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "classes": {
-        "type": "complex",
-        "isRequired": false
+        "description": "A class name for each part of the input, for styling one of them without reaching through the DOM: root, label, labelDetailsWrapper, contentWrapper, details, counter, iconWrapper, chevronIcon and minimalDetails.",
+        "isRequired": false,
+        "type": "complex"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If true, the component is disabled.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "The color of the component.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": true
+        "description": "The label of the Input Button.",
+        "isRequired": true,
+        "type": "ReactNode"
       },
       "multiple": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Allows users to select multiple menu items.multiple=true cannot be used with the minimum variant.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "sdsStyle": {
-        "type": "\"minimal\" | \"square\" | \"rounded\"",
-        "isRequired": false
+        "defaultValue": "square",
+        "description": "The visual appearance of the component.",
+        "isRequired": false,
+        "type": "\"square\" | \"rounded\" | \"minimal\""
       },
       "sdsType": {
-        "type": "\"value\" | \"label\"",
-        "isRequired": false
+        "defaultValue": "label",
+        "description": "The label variant includes the label within the input field and showcases the selected menu item as additional details or sets the counter when in multi-select mode. The value variant replaces the label with the selected value directly within the input field. The detailed information is then displayed in a separate section dedicated to displaying additional details. However, it's important to note that the value variant cannot be used in conjunction with multi-select mode.",
+        "isRequired": false,
+        "type": "\"label\" | \"value\""
       },
       "shouldPutAColonAfterLabel": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "If true, a colon (:) will be added after the label or value.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "shouldTruncateMinimalDetails": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "If true, the details section of the minimal variant displays a truncated one-liner with an ellipsis (...), if false the details section expands to multiple lines for a comprehensive display.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "startIcon": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "An element placed before the label, passed straight through to the underlying MUI Button.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "style": {
-        "type": "CSSProperties",
-        "isRequired": false
+        "description": "Inline styles for the input's root element.",
+        "isRequired": false,
+        "type": "CSSProperties"
       },
       "width": {
-        "type": "string",
-        "isRequired": false
+        "defaultValue": "auto",
+        "description": "How wide the input is. A bare number is read as pixels, so \"240\" means 240px, and any other value is used as the CSS width, such as \"100%\" or \"20rem\". Values below 90px are ignored, since the input keeps that as its minimum. Left unset, the input is as wide as its content, or as wide as its container if MUI's fullWidth is set.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "className": {
+        "description": "Added to the input's root element, alongside anything classes.root puts there.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "details": {
+        "description": "A text showing details for the selected menu item.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "onClick": {
+        "defaultValue": "(event: React.MouseEvent<HTMLElement>) => void",
+        "description": "Sets what happens when a user clicks on the component.",
+        "isRequired": true,
+        "type": "function"
+      },
+      "state": {
+        "defaultValue": "default",
+        "description": "Draws the input in its open state. The input has no idea whether its menu is showing, so set this from whatever holds that state.",
+        "isRequired": false,
+        "type": "\"open\" | \"default\""
+      },
+      "value": {
+        "description": "The value that will be displayed in the component for the value variant.",
+        "isRequired": false,
+        "type": "ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/InputRadio.json

@@ -2,31 +2,49 @@
   "InputRadio": {
     "props": {
       "caption": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The caption of the InputRadio appears beneath the label in a lighter text color.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "disabled": {
-        "type": "\"false\" | \"true\"",
+        "defaultValue": false,
+        "description": "If `true`, the component is disabled.",
         "isRequired": false,
-        "description": "If `true`, the component is disabled."
+        "type": "boolean"
       },
       "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Colors the border of the empty circle. The selected radio always uses the accent color.",
+        "isRequired": false,
+        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\""
       },
       "label": {
-        "type": "ReactNode",
-        "isRequired": false
+        "description": "The label of the InputRadio.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "stage": {
-        "type": "\"checked\" | \"unchecked\"",
-        "isRequired": false
+        "description": "Sets the radio as \"checked\" or \"unchecked\", overriding checked. Omit it inside a RadioGroup, which drives the selection itself.",
+        "isRequired": false,
+        "type": "\"checked\" | \"unchecked\""
       },
       "classes": {
-        "type": "complex",
+        "defaultValue": {},
+        "description": "Class names for the internal elements: root, labelCaptionContainer, label,\ncaption, radioButton, radioCheckedIcon, radioCheckedIconDot, and\nradioDefaultIcon.",
+        "isRequired": false,
+        "type": "complex"
+      },
+      "value": {
+        "description": "The value a RadioGroup compares against to decide whether this radio is\nselected. It also backs the label and caption element ids, so give every\nradio a unique one.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "radioProps": {
+        "defaultValue": {},
+        "description": "Directly pass these props to the underlying MUI radio.",
         "isRequired": false,
-        "description": "Override or extend the styles applied to the component."
+        "type": "Partial<RadioProps>"
       }
     }
   }
-}
+}