init project
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled

This commit is contained in:
how2ice
2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions

View File

@@ -0,0 +1,27 @@
{
"componentDescription": "",
"propDescriptions": {
"badgeContent": { "description": "The content rendered within the badge." },
"children": { "description": "The badge will be added relative to this node." },
"invisible": { "description": "If <code>true</code>, the badge is invisible." },
"max": { "description": "Max count to show." },
"showZero": {
"description": "Controls whether the badge is hidden when <code>badgeContent</code> is zero."
},
"slotProps": { "description": "The props used for each slot inside the Badge." },
"slots": {
"description": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"invisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>invisible={true}</code>"
}
},
"slotDescriptions": {
"badge": "The component that renders the badge.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,37 @@
{
"componentDescription": "The foundation for building custom-styled buttons.",
"propDescriptions": {
"action": {
"description": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusableWhenDisabled": {
"description": "If <code>true</code>, allows a disabled button to receive focus."
},
"rootElementName": {
"description": "The HTML element that is ultimately rendered, for example &#39;button&#39; or &#39;a&#39;"
},
"slotProps": { "description": "The props used for each slot inside the Button." },
"slots": {
"description": "The components used for each slot inside the Button. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"active": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>active={true}</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>focusVisible={true}</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,19 @@
{
"componentDescription": "Listen for click events that occur somewhere in the document, outside of the element itself.\nFor instance, if you need to hide a menu when people click anywhere else on your page.",
"propDescriptions": {
"children": { "description": "The wrapped element.", "requiresRef": true },
"disableReactTree": {
"description": "If <code>true</code>, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled."
},
"mouseEvent": {
"description": "The mouse event to listen to. You can disable the listener by providing <code>false</code>."
},
"onClickAway": {
"description": "Callback fired when a &quot;click away&quot; event is detected."
},
"touchEvent": {
"description": "The touch event to listen to. You can disable the listener by providing <code>false</code>."
}
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,18 @@
{
"componentDescription": "",
"propDescriptions": {
"enterAnimationName": {
"description": "The name of the CSS animation (the <code>animation-name</code> CSS property) applied to the component when the transition is requested to enter."
},
"enterClassName": {
"description": "The name of the CSS class applied to the component when the transition is requested to enter."
},
"exitAnimationName": {
"description": "The name of the CSS animation (the <code>animation-name</code> CSS property) applied to the component when the transition is requested to exit."
},
"exitClassName": {
"description": "The name of the CSS class applied to the component when the transition is requested to exit."
}
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,15 @@
{
"componentDescription": "A utility component that hooks up to the MUI Base transitions API and\napplies a CSS transition to its children when necessary.",
"propDescriptions": {
"enterClassName": {
"description": "The name of the CSS class applied to the component when the transition is requested to enter."
},
"exitClassName": {
"description": "The name of the CSS class applied to the component when the transition is requested to exit."
},
"lastTransitionedPropertyOnExit": {
"description": "The name of the CSS property that is transitioned the longest (has the largest <code>transition-duration</code>) on exit. This is used to determine when the transition has ended. If not specified, the transition will be considered finished end when the first property is transitioned. If all properties have the same <code>transition-duration</code> (or there is just one transitioned property), this can be omitted."
}
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,13 @@
{
"componentDescription": "",
"propDescriptions": {
"defaultOpen": { "description": "If <code>true</code>, the dropdown is initially open." },
"onOpenChange": {
"description": "Callback fired when the component requests to be opened or closed."
},
"open": {
"description": "Allows to control whether the dropdown is open. This is a controlled counterpart of <code>defaultOpen</code>."
}
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,23 @@
{
"componentDescription": "Utility component that locks focus inside the component.",
"propDescriptions": {
"children": { "description": "A single child content element.", "requiresRef": true },
"disableAutoFocus": {
"description": "If <code>true</code>, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any focus trap children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the focus trap less accessible to assistive technologies, like screen readers."
},
"disableEnforceFocus": {
"description": "If <code>true</code>, the focus trap will not prevent focus from leaving the focus trap while open.<br>Generally this should never be set to <code>true</code> as it makes the focus trap less accessible to assistive technologies, like screen readers."
},
"disableRestoreFocus": {
"description": "If <code>true</code>, the focus trap will not restore focus to previously focused element once focus trap is hidden or unmounted."
},
"getTabbable": {
"description": "Returns an array of ordered tabbable nodes (i.e. in tab order) within the root. For instance, you can provide the &quot;tabbable&quot; npm dependency."
},
"isEnabled": {
"description": "This prop extends the <code>open</code> prop. It allows to toggle the open state without having to wait for a rerender when changing the <code>open</code> prop. This prop should be memoized. It can be used to support multiple focus trap mounted at the same time."
},
"open": { "description": "If <code>true</code>, focus is locked." }
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,48 @@
{
"componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n* FormLabel\n* FormHelperText\n* Input\n* InputLabel\n\nYou can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠ Only one `Input` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
"propDescriptions": {
"children": { "description": "The content of the component." },
"className": { "description": "Class name applied to the root element." },
"disabled": {
"description": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state."
},
"error": { "description": "If <code>true</code>, the label is displayed in an error state." },
"onChange": { "description": "Callback fired when the form element&#39;s value is modified." },
"required": {
"description": "If <code>true</code>, the label will indicate that the <code>input</code> is required."
},
"slotProps": { "description": "The props used for each slot inside the FormControl." },
"slots": {
"description": "The components used for each slot inside the FormControl. Either a string to use a HTML element or a component."
},
"value": { "description": "The value of the form element." }
},
"classDescriptions": {
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"error": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>error={true}</code>"
},
"filled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the inner input has value"
},
"focused": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the inner input is focused"
},
"required": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>required={true}</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,106 @@
{
"componentDescription": "",
"propDescriptions": {
"autoComplete": {
"description": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>."
},
"autoFocus": {
"description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
},
"className": { "description": "Class name applied to the root element." },
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disabled": {
"description": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"endAdornment": { "description": "Trailing adornment for this input." },
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute on the input and the <code>baseui--error</code> class on the root element. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"id": { "description": "The id of the <code>input</code> element." },
"maxRows": {
"description": "Maximum number of rows to display when multiline option is set to true."
},
"minRows": {
"description": "Minimum number of rows to display when multiline option is set to true."
},
"multiline": {
"description": "If <code>true</code>, a <code>textarea</code> element is rendered."
},
"name": { "description": "Name attribute of the <code>input</code> element." },
"placeholder": {
"description": "The short hint displayed in the <code>input</code> before the user enters a value."
},
"readOnly": {
"description": "It prevents the user from changing the value of the field (not from interacting with the field)."
},
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"rows": { "description": "Number of rows to display when multiline option is set to true." },
"slotProps": { "description": "The props used for each slot inside the Input." },
"slots": {
"description": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component."
},
"startAdornment": { "description": "Leading adornment for this input." },
"type": {
"description": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types\">a valid HTML5 input type</a>."
},
"value": {
"description": "The value of the <code>input</code> element, required for a controlled component."
}
},
"classDescriptions": {
"adornedEnd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>endAdornment</code> is provided"
},
"adornedStart": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>startAdornment</code> is provided"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"error": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>error={true}</code>"
},
"focused": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is focused"
},
"formControl": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is a descendant of <code>FormControl</code>"
},
"inputMultiline": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the input element",
"conditions": "<code>multiline={true}</code>"
},
"inputTypeSearch": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the input element",
"conditions": "<code>type=\"search\"</code>"
},
"multiline": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>multiline={true}</code>"
}
},
"slotDescriptions": {
"input": "The component that renders the input.",
"root": "The component that renders the root.",
"textarea": "The component that renders the textarea."
}
}

View File

@@ -0,0 +1,33 @@
{
"componentDescription": "",
"propDescriptions": {
"className": { "description": "Class name applied to the root element." },
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusableWhenDisabled": {
"description": "If <code>true</code>, allows a disabled button to receive focus."
},
"label": { "description": "Label of the button" },
"slotProps": {
"description": "The components used for each slot inside the MenuButton. Either a string to use a HTML element or a component."
},
"slots": { "description": "The props used for each slot inside the MenuButton." }
},
"classDescriptions": {
"active": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>active={true}</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"expanded": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the associated menu is open"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,29 @@
{
"componentDescription": "An unstyled menu item to be used within a Menu.",
"propDescriptions": {
"disabled": { "description": "If <code>true</code>, the menu item will be disabled." },
"disableFocusOnHover": {
"description": "If <code>true</code>, the menu item won&#39;t receive focus when the mouse moves over it."
},
"label": {
"description": "A text representation of the menu item&#39;s content. Used for keyboard text navigation matching."
},
"slotProps": { "description": "The props used for each slot inside the MenuItem." },
"slots": {
"description": "The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>focusVisible={true}</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,27 @@
{
"componentDescription": "",
"propDescriptions": {
"actions": {
"description": "A ref with imperative actions that can be performed on the menu."
},
"anchor": { "description": "The element based on which the menu is positioned." },
"onItemsChange": {
"description": "Function called when the items displayed in the menu change."
},
"slotProps": { "description": "The props used for each slot inside the Menu." },
"slots": {
"description": "The components used for each slot inside the Menu. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"expanded": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>open={true}</code>"
}
},
"slotDescriptions": {
"listbox": "The component that renders the listbox.",
"root": "The component that renders the popup element."
}
}

View File

@@ -0,0 +1,58 @@
{
"componentDescription": "Modal is a lower-level construct that is leveraged by the following components:\n\n* [Dialog](https://mui.com/material-ui/api/dialog/)\n* [Drawer](https://mui.com/material-ui/api/drawer/)\n* [Menu](https://mui.com/material-ui/api/menu/)\n* [Popover](https://mui.com/material-ui/api/popover/)\n\nIf you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component\nrather than directly using Modal.\n\nThis component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).",
"propDescriptions": {
"children": { "description": "A single child content element.", "requiresRef": true },
"closeAfterTransition": {
"description": "When set to true the Modal waits until a nested Transition is completed before closing."
},
"container": {
"description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
},
"disableAutoFocus": {
"description": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
},
"disableEnforceFocus": {
"description": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
},
"disableEscapeKeyDown": {
"description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
},
"disablePortal": {
"description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
},
"disableRestoreFocus": {
"description": "If <code>true</code>, the modal will not restore focus to previously focused element once modal is hidden or unmounted."
},
"disableScrollLock": { "description": "Disable the scroll lock behavior." },
"hideBackdrop": { "description": "If <code>true</code>, the backdrop is not rendered." },
"keepMounted": {
"description": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal."
},
"onBackdropClick": { "description": "Callback fired when the backdrop is clicked." },
"onClose": {
"description": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.",
"typeDescriptions": {
"event": "The event source of the callback.",
"reason": "Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>."
}
},
"onTransitionEnter": { "description": "A function called when a transition enters." },
"onTransitionExited": { "description": "A function called when a transition has exited." },
"open": { "description": "If <code>true</code>, the component is shown." },
"slotProps": { "description": "The props used for each slot inside the Modal." },
"slots": {
"description": "The components used for each slot inside the Modal. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"hidden": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the <code>Modal</code> has exited"
}
},
"slotDescriptions": {
"backdrop": "The component that renders the backdrop.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,11 @@
{
"componentDescription": "NoSsr purposely removes components from the subject of Server Side Rendering (SSR).\n\nThis component can be useful in a variety of situations:\n\n* Escape hatch for broken dependencies not supporting SSR.\n* Improve the time-to-first paint on the client by only rendering above the fold.\n* Reduce the rendering time on the server.\n* Under too heavy server load, you can turn on service degradation.",
"propDescriptions": {
"children": { "description": "You can wrap a node." },
"defer": {
"description": "If <code>true</code>, the component will not only prevent server-side rendering. It will also defer the rendering of the children into a different screen frame."
},
"fallback": { "description": "The fallback content to display." }
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,91 @@
{
"componentDescription": "",
"propDescriptions": {
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disabled": {
"description": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"endAdornment": { "description": "Trailing adornment for this input." },
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute on the input and the <code>baseui--error</code> class on the root element."
},
"id": { "description": "The id of the <code>input</code> element." },
"max": { "description": "The maximum value." },
"min": { "description": "The minimum value." },
"onChange": {
"description": "Callback fired after the value is clamped and changes - when the <code>input</code> is blurred or when the stepper buttons are triggered. Called with <code>undefined</code> when the value is unset.",
"typeDescriptions": {
"event": "The event source of the callback",
"value": "The new value of the component"
}
},
"onInputChange": {
"description": "Callback fired when the <code>input</code> value changes after each keypress, before clamping is applied. Note that <code>event.target.value</code> may contain values that fall outside of <code>min</code> and <code>max</code> or are otherwise &quot;invalid&quot;.",
"typeDescriptions": { "event": "The event source of the callback." }
},
"placeholder": {
"description": "The short hint displayed in the <code>input</code> before the user enters a value."
},
"readOnly": {
"description": "If <code>true</code>, the <code>input</code> element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable."
},
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"shiftMultiplier": {
"description": "Multiplier applied to <code>step</code> if the shift key is held while incrementing or decrementing the value. Defaults to <code>10</code>."
},
"slotProps": { "description": "The props used for each slot inside the NumberInput." },
"slots": {
"description": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component."
},
"startAdornment": { "description": "Leading adornment for this input." },
"step": { "description": "The amount that the value changes on each increment or decrement." },
"value": { "description": "The current value. Use when the component is controlled." }
},
"classDescriptions": {
"adornedEnd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>endAdornment</code> is provided"
},
"adornedStart": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>startAdornment</code> is provided"
},
"disabled": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"error": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>error={true}</code>"
},
"focused": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is focused"
},
"formControl": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is a descendant of <code>FormControl</code>"
},
"readOnly": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>readOnly={true}</code>"
}
},
"slotDescriptions": {
"decrementButton": "The component that renders the decrement button.",
"incrementButton": "The component that renders the increment button.",
"input": "The component that renders the input.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,25 @@
{
"componentDescription": "An unstyled option group to be used within a Select.",
"propDescriptions": {
"disabled": {
"description": "If <code>true</code> all the options in the group will be disabled."
},
"label": { "description": "The human-readable description of the group." },
"slotProps": { "description": "The props used for each slot inside the Input." },
"slots": {
"description": "The components used for each slot inside the OptionGroup. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>li</code> element",
"conditions": "<code>disabled={true}</code>"
}
},
"slotDescriptions": {
"label": "The component that renders the label.",
"list": "The component that renders the list.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,32 @@
{
"componentDescription": "An unstyled option to be used within a Select.",
"propDescriptions": {
"disabled": { "description": "If <code>true</code>, the option will be disabled." },
"label": {
"description": "A text representation of the option&#39;s content. Used for keyboard text navigation matching."
},
"slotProps": { "description": "The props used for each slot inside the Option." },
"slots": {
"description": "The components used for each slot inside the Option. Either a string to use a HTML element or a component."
},
"value": { "description": "The value of the option." }
},
"classDescriptions": {
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>li</code> element",
"conditions": "<code>disabled={true}</code>"
},
"highlighted": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>li</code> element",
"conditions": "<code>highlighted={true}</code>"
},
"selected": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>li</code> element",
"conditions": "<code>selected={true}</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,36 @@
{
"componentDescription": "Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.",
"propDescriptions": {
"anchorEl": {
"description": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance."
},
"children": { "description": "Popper render function or node." },
"container": {
"description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
},
"direction": { "description": "Direction of the text." },
"disablePortal": {
"description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
},
"keepMounted": {
"description": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper."
},
"modifiers": {
"description": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>."
},
"open": { "description": "If <code>true</code>, the component is shown." },
"placement": { "description": "Popper placement." },
"popperOptions": {
"description": "Options provided to the <a href=\"https://popper.js.org/docs/v2/constructors/#options\"><code>Popper.js</code></a> instance."
},
"popperRef": { "description": "A ref that points to the used popper instance." },
"slotProps": { "description": "The props used for each slot inside the Popper." },
"slots": {
"description": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component."
},
"transition": {
"description": "Help supporting a react-transition-group/Transition component."
}
},
"classDescriptions": { "root": { "description": "Class name applied to the root element." } }
}

View File

@@ -0,0 +1,40 @@
{
"componentDescription": "",
"propDescriptions": {
"anchor": {
"description": "An HTML element, <a href=\"https://floating-ui.com/docs/virtual-elements\">virtual element</a>, or a function that returns either. It&#39;s used to set the position of the popup."
},
"container": {
"description": "An HTML element or function that returns one. The container will have the portal children appended to it. By default, it uses the body of the top-level document object, so it&#39;s <code>document.body</code> in these cases."
},
"disablePortal": {
"description": "If <code>true</code>, the popup will be rendered where it is defined, without the use of portals."
},
"keepMounted": {
"description": "If <code>true</code>, the popup will exist in the DOM even if it&#39;s closed. Its visibility will be controlled by the <code>visibility</code> CSS property.<br>Otherwise, a closed popup will be removed from the DOM."
},
"middleware": {
"description": "Collection of Floating UI middleware to use when positioning the popup. If not provided, the <a href=\"https://floating-ui.com/docs/offset\"><code>offset</code></a> and <a href=\"https://floating-ui.com/docs/flip\"><code>flip</code></a> functions will be used."
},
"offset": {
"description": "Distance between a popup and the trigger element. This prop is ignored when custom <code>middleware</code> is provided."
},
"open": { "description": "If <code>true</code>, the popup is visible." },
"placement": {
"description": "Determines where to place the popup relative to the trigger element."
},
"slotProps": { "description": "The props used for each slot inside the Popup." },
"slots": {
"description": "The components used for each slot inside the Popup. Either a string to use a HTML element or a component."
},
"strategy": { "description": "The type of CSS position property to use (absolute or fixed)." }
},
"classDescriptions": {
"open": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "the popup is open"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,13 @@
{
"componentDescription": "Portals provide a first-class way to render children into a DOM node\nthat exists outside the DOM hierarchy of the parent component.",
"propDescriptions": {
"children": { "description": "The children to render into the <code>container</code>." },
"container": {
"description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
},
"disablePortal": {
"description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
}
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,80 @@
{
"componentDescription": "The foundation for building custom-styled select components.",
"propDescriptions": {
"areOptionsEqual": {
"description": "A function used to determine if two options&#39; values are equal. By default, reference equality is used.<br>There is a performance impact when using the <code>areOptionsEqual</code> prop (proportional to the number of options). Therefore, it&#39;s recommented to use the default reference equality comparison whenever possible."
},
"autoComplete": {
"description": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>."
},
"autoFocus": {
"description": "If <code>true</code>, the select element is focused during the first mount"
},
"defaultListboxOpen": {
"description": "If <code>true</code>, the select will be initially open."
},
"defaultValue": {
"description": "The default selected value. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the select is disabled." },
"getOptionAsString": {
"description": "A function used to convert the option label to a string. It&#39;s useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard."
},
"getSerializedValue": {
"description": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form."
},
"listboxId": { "description": "<code>id</code> attribute of the listbox element." },
"listboxOpen": { "description": "Controls the open state of the select&#39;s listbox." },
"multiple": {
"description": "If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props."
},
"name": {
"description": "Name of the element. For example used by the server to identify the fields in form submits."
},
"onChange": { "description": "Callback fired when an option is selected." },
"onListboxOpenChange": {
"description": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen)."
},
"placeholder": { "description": "Text to show when there is no selected value." },
"renderValue": {
"description": "Function that customizes the rendering of the selected value."
},
"required": {
"description": "If <code>true</code>, the Select cannot be empty when submitting form."
},
"slotProps": { "description": "The props used for each slot inside the Input." },
"slots": {
"description": "The components used for each slot inside the Select. Either a string to use a HTML element or a component."
},
"value": {
"description": "The selected value. Set to <code>null</code> to deselect all options."
}
},
"classDescriptions": {
"active": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>active={true}</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element and the listbox &#39;ul&#39; element",
"conditions": "<code>disabled={true}</code>"
},
"expanded": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>expanded={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>focusVisible={true}</code>"
}
},
"slotDescriptions": {
"listbox": "The component that renders the listbox.",
"popup": "The component that wraps the popup.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,142 @@
{
"componentDescription": "",
"propDescriptions": {
"aria-label": { "description": "The label of the slider." },
"aria-labelledby": {
"description": "The id of the element containing a label for the slider."
},
"aria-valuetext": {
"description": "A string value that provides a user-friendly name for the current value of the slider."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"disableSwap": {
"description": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb."
},
"getAriaLabel": {
"description": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.",
"typeDescriptions": { "index": "The thumb label&#39;s index to format." }
},
"getAriaValueText": {
"description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.",
"typeDescriptions": {
"value": "The thumb label&#39;s value to format.",
"index": "The thumb label&#39;s index to format."
}
},
"isRtl": {
"description": "If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side)."
},
"marks": {
"description": "Marks indicate predetermined values to which the user can move the slider. If <code>true</code> the marks are spaced according the value of the <code>step</code> prop. If an array, it should contain objects with <code>value</code> and an optional <code>label</code> keys."
},
"max": {
"description": "The maximum allowed value of the slider. Should not be equal to min."
},
"min": {
"description": "The minimum allowed value of the slider. Should not be equal to max."
},
"name": { "description": "Name attribute of the hidden <code>input</code> element." },
"onChange": {
"description": "Callback function that is fired when the slider&#39;s value changed.",
"typeDescriptions": {
"event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.",
"value": "The new value.",
"activeThumb": "Index of the currently moved thumb."
}
},
"onChangeCommitted": {
"description": "Callback function that is fired when the <code>mouseup</code> is triggered.",
"typeDescriptions": {
"event": "The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.",
"value": "The new value."
}
},
"orientation": { "description": "The component orientation." },
"scale": { "description": "A transformation function, to change the scale of the slider." },
"shiftStep": {
"description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
},
"slotProps": { "description": "The props used for each slot inside the Slider." },
"slots": {
"description": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component."
},
"step": {
"description": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop."
},
"tabIndex": { "description": "Tab index attribute of the hidden <code>input</code> element." },
"track": {
"description": "<p>The track presentation:</p>\n<ul>\n<li><code>normal</code> the track will render a bar representing the slider value.</li>\n<li><code>inverted</code> the track will render a bar representing the remaining slider value.</li>\n<li><code>false</code> the track will render without a bar.</li>\n</ul>\n"
},
"value": {
"description": "The value of the slider. For ranged sliders, provide an array with two values."
},
"valueLabelFormat": {
"description": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format"
}
},
"classDescriptions": {
"active": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "it&#39;s active"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root and thumb element",
"conditions": "<code>disabled={true}</code>"
},
"dragging": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root",
"conditions": "a thumb is being dragged"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "keyboard focused"
},
"markActive": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the mark element",
"conditions": "active (depending on the value)"
},
"marked": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>marks</code> is provided with at least one label"
},
"markLabelActive": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the mark label element",
"conditions": "active (depending on the value)"
},
"trackFalse": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>track={false}</code>"
},
"trackInverted": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>track=\"inverted\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": {
"input": "The component that renders the input.",
"mark": "The component that renders the mark.",
"markLabel": "The component that renders the mark label.",
"rail": "The component that renders the rail.",
"root": "The component that renders the root.",
"thumb": "The component that renders the thumb.",
"track": "The component that renders the track.",
"valueLabel": "The component that renders the value label."
}
}

View File

@@ -0,0 +1,31 @@
{
"componentDescription": "",
"propDescriptions": {
"autoHideDuration": {
"description": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value."
},
"disableWindowBlurListener": {
"description": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused."
},
"exited": {
"description": "The prop used to handle exited transition and unmount the component."
},
"onClose": {
"description": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>.",
"typeDescriptions": {
"event": "The event source of the callback.",
"reason": "Can be: <code>&quot;timeout&quot;</code> (<code>autoHideDuration</code> expired), <code>&quot;clickaway&quot;</code>, or <code>&quot;escapeKeyDown&quot;</code>."
}
},
"open": { "description": "If <code>true</code>, the component is shown." },
"resumeHideDuration": {
"description": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms."
},
"slotProps": { "description": "The props used for each slot inside the Snackbar." },
"slots": {
"description": "The components used for each slot inside the Snackbar. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,43 @@
{
"componentDescription": "The foundation for building custom-styled switches.",
"propDescriptions": {
"checked": { "description": "If <code>true</code>, the component is checked." },
"className": { "description": "Class name applied to the root element." },
"defaultChecked": {
"description": "The default checked state. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"onChange": {
"description": "Callback fired when the state is changed.",
"typeDescriptions": {
"event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
}
},
"readOnly": { "description": "If <code>true</code>, the component is read only." },
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required."
},
"slotProps": { "description": "The props used for each slot inside the Switch." },
"slots": {
"description": "The components used for each slot inside the Switch. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"checked": {
"description": "State class applied to the root element if the switch is checked"
},
"disabled": {
"description": "State class applied to the root element if the switch is disabled"
},
"focusVisible": {
"description": "State class applied to the root element if the switch has visible focus"
},
"readOnly": { "description": "Class applied to the root element if the switch is read-only" }
},
"slotDescriptions": {
"input": "The component that renders the input.",
"root": "The component that renders the root.",
"thumb": "The component that renders the thumb.",
"track": "The component that renders the track."
}
}

View File

@@ -0,0 +1,21 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"slotProps": { "description": "The props used for each slot inside the TabPanel." },
"slots": {
"description": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component."
},
"value": {
"description": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it&#39;s required for the tab panel to be rendered on the server."
}
},
"classDescriptions": {
"hidden": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>div</code> element",
"conditions": "<code>hidden={true}</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,30 @@
{
"componentDescription": "",
"propDescriptions": {
"action": {
"description": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"onChange": { "description": "Callback invoked when new value is being set." },
"slotProps": { "description": "The props used for each slot inside the Tab." },
"slots": {
"description": "The components used for each slot inside the Tab. Either a string to use a HTML element or a component."
},
"value": {
"description": "You can provide your own value. Otherwise, it falls back to the child position index."
}
},
"classDescriptions": {
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>disabled={true}</code>"
},
"selected": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root <code>button</code> element",
"conditions": "<code>selected={true}</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,68 @@
{
"componentDescription": "A pagination for tables.",
"propDescriptions": {
"count": {
"description": "The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1."
},
"getItemAriaLabel": {
"description": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>.",
"typeDescriptions": {
"type": "The link or button type to format (&#39;first&#39; | &#39;last&#39; | &#39;next&#39; | &#39;previous&#39;)."
}
},
"labelDisplayedRows": {
"description": "Customize the displayed rows label. Invoked with a <code>{ from, to, count, page }</code> object.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"labelId": { "description": "Id of the label element within the pagination." },
"labelRowsPerPage": {
"description": "Customize the rows per page label.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"onPageChange": {
"description": "Callback fired when the page is changed.",
"typeDescriptions": {
"event": "The event source of the callback.",
"page": "The page selected."
}
},
"onRowsPerPageChange": {
"description": "Callback fired when the number of rows per page is changed.",
"typeDescriptions": { "event": "The event source of the callback." }
},
"page": { "description": "The zero-based index of the current page." },
"rowsPerPage": {
"description": "The number of rows per page.<br>Set -1 to display all the rows."
},
"rowsPerPageOptions": {
"description": "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows."
},
"selectId": { "description": "Id of the select element within the pagination." },
"slotProps": { "description": "The props used for each slot inside the TablePagination." },
"slots": {
"description": "The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"input": {
"description": "Class name applied to {{nodeName}}.",
"nodeName": "the Select component <code>root</code> element"
},
"selectIcon": {
"description": "Class name applied to {{nodeName}}.",
"nodeName": "the Select component <code>icon</code> class"
},
"selectRoot": {
"description": "Class name applied to {{nodeName}}.",
"nodeName": "the Select component <code>root</code> element"
}
},
"slotDescriptions": {
"actions": "The component that renders the actions.",
"displayedRows": "The component that renders the displayed rows.",
"menuItem": "The component that renders the menu item.",
"root": "The component that renders the root.",
"select": "The component that renders the select.",
"selectLabel": "The component that renders the select label.",
"spacer": "The component that renders the spacer.",
"toolbar": "The component that renders the toolbar."
}
}

View File

@@ -0,0 +1,23 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"slotProps": { "description": "The props used for each slot inside the TabsList." },
"slots": {
"description": "The components used for each slot inside the TabsList. Either a string to use a HTML element or a component."
}
},
"classDescriptions": {
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation='horizontal'</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation='vertical'</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,35 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"direction": { "description": "The direction of the text." },
"onChange": { "description": "Callback invoked when new value is being set." },
"orientation": { "description": "The component orientation (layout flow direction)." },
"selectionFollowsFocus": {
"description": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation."
},
"slotProps": { "description": "The props used for each slot inside the Tabs." },
"slots": {
"description": "The components used for each slot inside the Tabs. Either a string to use a HTML element or a component."
},
"value": {
"description": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>."
}
},
"classDescriptions": {
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation='horizontal'</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation='vertical'</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,8 @@
{
"componentDescription": "",
"propDescriptions": {
"maxRows": { "description": "Maximum number of rows to display." },
"minRows": { "description": "Minimum number of rows to display." }
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,125 @@
{
"hookDescription": "",
"parametersDescriptions": {
"autoComplete": {
"description": "If <code>true</code>, the portion of the selected suggestion that the user hasn&#39;t typed, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state."
},
"autoHighlight": {
"description": "If <code>true</code>, the first option is automatically highlighted."
},
"autoSelect": {
"description": "If <code>true</code>, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.<br>When using the <code>freeSolo</code> mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option."
},
"blurOnSelect": {
"description": "<p>Control if the input should be blurred when an option is selected:</p>\n<ul>\n<li><code>false</code> the input is not blurred.</li>\n<li><code>true</code> the input is always blurred.</li>\n<li><code>touch</code> the input is blurred after a touch event.</li>\n<li><code>mouse</code> the input is blurred after a mouse event.</li>\n</ul>\n"
},
"clearOnBlur": {
"description": "If <code>true</code>, the input&#39;s text is cleared on blur if no value is selected.<br>Set it to <code>true</code> if you want to help the user enter a new value. Set it to <code>false</code> if you want to help the user resume their search."
},
"clearOnEscape": {
"description": "If <code>true</code>, clear all values when the user presses escape and the popup is closed."
},
"componentName": {
"description": "The component name that is using this hook. Used for warnings."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disableClearable": { "description": "If <code>true</code>, the input can&#39;t be cleared." },
"disableCloseOnSelect": {
"description": "If <code>true</code>, the popup won&#39;t close when a value is selected."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"disabledItemsFocusable": {
"description": "If <code>true</code>, will allow focus on disabled items."
},
"disableListWrap": {
"description": "If <code>true</code>, the list box in the popup will not wrap focus."
},
"filterOptions": {
"description": "A function that determines the filtered options to be rendered on search."
},
"filterSelectedOptions": {
"description": "If <code>true</code>, hide the selected options from the list box."
},
"freeSolo": {
"description": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options."
},
"getOptionDisabled": {
"description": "Used to determine the disabled state for a given option."
},
"getOptionKey": {
"description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default)."
},
"getOptionLabel": {
"description": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string."
},
"groupBy": {
"description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided."
},
"handleHomeEndKeys": {
"description": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively."
},
"id": {
"description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide an id it will fall back to a randomly generated one."
},
"includeInputInList": {
"description": "If <code>true</code>, the highlight can move to the input."
},
"inputValue": { "description": "The input value." },
"isOptionEqualToValue": {
"description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value."
},
"multiple": {
"description": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections."
},
"onChange": { "description": "Callback fired when the value changes." },
"onClose": {
"description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open)."
},
"onHighlightChange": { "description": "Callback fired when the highlight option changes." },
"onInputChange": { "description": "Callback fired when the input value changes." },
"onOpen": {
"description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open)."
},
"open": { "description": "If <code>true</code>, the component is shown." },
"openOnFocus": { "description": "If <code>true</code>, the popup will open on input focus." },
"options": { "description": "Array of options." },
"readOnly": {
"description": "If <code>true</code>, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted."
},
"selectOnFocus": {
"description": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value."
},
"value": {
"description": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
}
},
"returnValueDescriptions": {
"anchorEl": {
"description": "An HTML element that is used to set the position of the component."
},
"dirty": { "description": "If <code>true</code>, the component input has some values." },
"expanded": { "description": "If <code>true</code>, the listbox is being displayed." },
"focused": { "description": "If <code>true</code>, the component is focused." },
"focusedTag": { "description": "Index of the focused tag for the component." },
"getClearProps": {
"description": "Resolver for the <code>clear</code> button element&#39;s props."
},
"getInputLabelProps": { "description": "Resolver for the input label element&#39;s props." },
"getInputProps": { "description": "Resolver for the input element&#39;s props." },
"getListboxProps": { "description": "Resolver for the listbox component&#39;s props." },
"getOptionProps": { "description": "Resolver for the rendered option element&#39;s props." },
"getPopupIndicatorProps": { "description": "Resolver for the popup icon&#39;s props." },
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"getTagProps": { "description": "A tag props getter." },
"groupedOptions": {
"description": "The options to render. It&#39;s either <code>Value[]</code> or <code>AutocompleteGroupedOption&lt;Value&gt;[]</code> if the groupBy prop is provided."
},
"id": { "description": "Id for the Autocomplete." },
"inputValue": { "description": "The input value." },
"popupOpen": { "description": "If <code>true</code>, the popup is open on the component." },
"setAnchorEl": { "description": "Setter for the component <code>anchorEl</code>." },
"value": { "description": "The value of the autocomplete." }
}
}

View File

@@ -0,0 +1,19 @@
{
"hookDescription": "",
"parametersDescriptions": {
"badgeContent": { "description": "The content rendered within the badge." },
"invisible": { "description": "If <code>true</code>, the badge is invisible." },
"max": { "description": "Max count to show." },
"showZero": {
"description": "Controls whether the badge is hidden when <code>badgeContent</code> is zero."
}
},
"returnValueDescriptions": {
"badgeContent": { "description": "Defines the content that&#39;s displayed inside the badge." },
"displayValue": {
"description": "Value to be displayed in the badge. If <code>badgeContent</code> is greater than <code>max</code>, it will return <code>max+</code>."
},
"invisible": { "description": "If <code>true</code>, the component will not be visible." },
"max": { "description": "Maximum number to be displayed in the badge." }
}
}

View File

@@ -0,0 +1,24 @@
{
"hookDescription": "",
"parametersDescriptions": {
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusableWhenDisabled": {
"description": "If <code>true</code>, allows a disabled button to receive focus."
},
"rootElementName": { "description": "The HTML element, e.g.&#39;button&#39;, &#39;a&#39; etc" },
"type": {
"description": "Type attribute applied when the <code>component</code> is <code>button</code>."
}
},
"returnValueDescriptions": {
"active": { "description": "If <code>true</code>, the component is active (pressed)." },
"focusVisible": {
"description": "If <code>true</code>, the component is being focused using keyboard."
},
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"rootRef": { "description": "A ref to the component&#39;s root DOM element." },
"setFocusVisible": {
"description": "Callback for setting the <code>focusVisible</code> param."
}
}
}

View File

@@ -0,0 +1,19 @@
{
"hookDescription": "",
"parametersDescriptions": {
"componentName": {
"description": "The name of the component using useDropdown. For debugging purposes."
},
"defaultOpen": { "description": "If <code>true</code>, the dropdown is initially open." },
"onOpenChange": {
"description": "Callback fired when the component requests to be opened or closed."
},
"open": {
"description": "Allows to control whether the dropdown is open. This is a controlled counterpart of <code>defaultOpen</code>."
}
},
"returnValueDescriptions": {
"contextValue": { "description": "The value to be passed into the DropdownContext provider." },
"open": { "description": "If <code>true</code>, the dropdown is open." }
}
}

View File

@@ -0,0 +1,21 @@
{
"hookDescription": "",
"parametersDescriptions": {},
"returnValueDescriptions": {
"disabled": {
"description": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state."
},
"error": { "description": "If <code>true</code>, the label is displayed in an error state." },
"filled": { "description": "If <code>true</code>, the form element has some value." },
"focused": {
"description": "If <code>true</code>, the form element is focused and not disabled."
},
"onBlur": { "description": "Callback fired when the form element has lost focus." },
"onChange": { "description": "Callback fired when the form element&#39;s value is modified." },
"onFocus": { "description": "Callback fired when the form element receives focus." },
"required": {
"description": "If <code>true</code>, the label will indicate that the <code>input</code> is required."
},
"value": { "description": "The value of the form element." }
}
}

View File

@@ -0,0 +1,33 @@
{
"hookDescription": "",
"parametersDescriptions": {
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disabled": {
"description": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
}
},
"returnValueDescriptions": {
"disabled": { "description": "If <code>true</code>, the component will be disabled." },
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute."
},
"focused": { "description": "If <code>true</code>, the <code>input</code> will be focused." },
"formControlContext": {
"description": "Return value from the <code>useFormControlContext</code> hook."
},
"getInputProps": { "description": "Resolver for the input slot&#39;s props." },
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"required": {
"description": "If <code>true</code>, the <code>input</code> will indicate that it&#39;s required."
},
"value": { "description": "The <code>value</code> of the <code>input</code> element." }
}
}

View File

@@ -0,0 +1,15 @@
{
"hookDescription": "",
"parametersDescriptions": {
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusableWhenDisabled": {
"description": "If <code>true</code>, allows a disabled button to receive focus."
},
"rootRef": { "description": "The ref to the root element." }
},
"returnValueDescriptions": {
"active": { "description": "If <code>true</code>, the component is active (pressed)." },
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"rootRef": { "description": "The ref to the root element." }
}
}

View File

@@ -0,0 +1,5 @@
{
"hookDescription": "Stabilizes the ListContext value for the MenuItem component, so it doesn't change when sibling items update.",
"parametersDescriptions": {},
"returnValueDescriptions": {}
}

View File

@@ -0,0 +1,19 @@
{
"hookDescription": "",
"parametersDescriptions": {
"disableFocusOnHover": {
"description": "If <code>true</code>, the menu item won&#39;t receive focus when the mouse moves over it."
}
},
"returnValueDescriptions": {
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusVisible": {
"description": "If <code>true</code>, the component is being focused using keyboard."
},
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"highlighted": { "description": "If <code>true</code>, the component is being highlighted." },
"index": { "description": "0-based index of the item in the menu." },
"rootRef": { "description": "The ref to the component&#39;s root DOM element." },
"totalItemCount": { "description": "Total number of items in the menu." }
}
}

View File

@@ -0,0 +1,32 @@
{
"hookDescription": "",
"parametersDescriptions": {
"autoFocus": {
"description": "If <code>true</code> (Default) will focus the highligted item. If you set this prop to <code>false</code> the focus will not be moved inside the Menu component. This has severe accessibility implications and should only be considered if you manage focus otherwise."
},
"componentName": {
"description": "The name of the component using useMenu. For debugging purposes."
},
"disabledItemsFocusable": {
"description": "If <code>true</code>, it will be possible to highlight disabled items."
},
"disableListWrap": {
"description": "If <code>true</code>, the highlight will not wrap around the list if arrow keys are used."
},
"id": { "description": "The id of the menu. If not provided, it will be generated." },
"listboxRef": { "description": "The ref to the menu&#39;s listbox node." },
"onItemsChange": { "description": "Callback fired when the menu items change." }
},
"returnValueDescriptions": {
"contextValue": { "description": "The value to be passed into the MenuProvider." },
"dispatch": {
"description": "Action dispatcher for the menu component. Allows to programmatically control the menu."
},
"getListboxProps": { "description": "Resolver for the listbox slot&#39;s props." },
"highlightedValue": { "description": "The highlighted option in the menu listbox." },
"listboxRef": { "description": "The ref to the menu&#39;s listbox node." },
"menuItems": { "description": "Items in the menu listbox." },
"open": { "description": "If <code>true</code>, the menu is open." },
"triggerElement": { "description": "An element that triggers the visibility of the menu." }
}
}

View File

@@ -0,0 +1,36 @@
{
"hookDescription": "",
"parametersDescriptions": {
"children": { "description": "A single child content element." },
"closeAfterTransition": {
"description": "When set to true the Modal waits until a nested Transition is completed before closing."
},
"container": {
"description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
},
"disableEscapeKeyDown": {
"description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
},
"disableScrollLock": { "description": "Disable the scroll lock behavior." },
"onClose": {
"description": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>."
},
"onTransitionEnter": { "description": "A function called when a transition enters." },
"onTransitionExited": { "description": "A function called when a transition has exited." },
"open": { "description": "If <code>true</code>, the component is shown." }
},
"returnValueDescriptions": {
"exited": {
"description": "If <code>true</code>, the exiting transition finished (to be used for unmounting the component)."
},
"getBackdropProps": { "description": "Resolver for the backdrop slot&#39;s props." },
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"getTransitionProps": { "description": "Resolver for the transition related props." },
"hasTransition": {
"description": "If <code>true</code>, the component&#39;s child is transition component."
},
"isTopModal": { "description": "If <code>true</code>, the modal is the top most one." },
"portalRef": { "description": "A ref to the component&#39;s portal DOM element." },
"rootRef": { "description": "A ref to the component&#39;s root DOM element." }
}
}

View File

@@ -0,0 +1,69 @@
{
"hookDescription": "",
"parametersDescriptions": {
"componentName": {
"description": "The name of the component using useNumberInput. For debugging purposes."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disabled": {
"description": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"inputId": { "description": "The <code>id</code> attribute of the input element." },
"inputRef": { "description": "The ref of the input element." },
"max": { "description": "The maximum value." },
"min": { "description": "The minimum value." },
"onChange": {
"description": "Callback fired after the value is clamped and changes - when the <code>input</code> is blurred or when the stepper buttons are triggered. Called with <code>undefined</code> when the value is unset."
},
"onInputChange": {
"description": "Callback fired when the <code>input</code> value changes after each keypress, before clamping is applied. Note that <code>event.target.value</code> may contain values that fall outside of <code>min</code> and <code>max</code> or are otherwise &quot;invalid&quot;."
},
"readOnly": {
"description": "If <code>true</code>, the <code>input</code> element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable."
},
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"shiftMultiplier": {
"description": "Multiplier applied to <code>step</code> if the shift key is held while incrementing or decrementing the value. Defaults to <code>10</code>."
},
"step": { "description": "The amount that the value changes on each increment or decrement." },
"value": { "description": "The current value. Use when the component is controlled." }
},
"returnValueDescriptions": {
"disabled": { "description": "If <code>true</code>, the component will be disabled." },
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute."
},
"focused": { "description": "If <code>true</code>, the <code>input</code> will be focused." },
"formControlContext": {
"description": "Return value from the <code>useFormControlContext</code> hook."
},
"getDecrementButtonProps": {
"description": "Resolver for the decrement button slot&#39;s props."
},
"getIncrementButtonProps": {
"description": "Resolver for the increment button slot&#39;s props."
},
"getInputProps": { "description": "Resolver for the input slot&#39;s props." },
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"inputValue": {
"description": "The dirty <code>value</code> of the <code>input</code> element when it is in focus."
},
"isDecrementDisabled": {
"description": "If <code>true</code>, the decrement button will be disabled. e.g. when the <code>value</code> is already at <code>min</code>"
},
"isIncrementDisabled": {
"description": "If <code>true</code>, the increment button will be disabled. e.g. when the <code>value</code> is already at <code>max</code>"
},
"required": {
"description": "If <code>true</code>, the <code>input</code> will indicate that it&#39;s required."
},
"value": { "description": "The clamped <code>value</code> of the <code>input</code> element." }
}
}

View File

@@ -0,0 +1,5 @@
{
"hookDescription": "Stabilizes the ListContext value for the Option component, so it doesn't change when sibling Options update.",
"parametersDescriptions": {},
"returnValueDescriptions": {}
}

View File

@@ -0,0 +1,10 @@
{
"hookDescription": "",
"parametersDescriptions": {},
"returnValueDescriptions": {
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"highlighted": { "description": "If <code>true</code>, the option is highlighted." },
"rootRef": { "description": "Ref to the root slot DOM node." },
"selected": { "description": "If <code>true</code>, the option is selected." }
}
}

View File

@@ -0,0 +1,73 @@
{
"hookDescription": "",
"parametersDescriptions": {
"areOptionsEqual": {
"description": "A function used to determine if two options&#39; values are equal. By default, reference equality is used.<br>There is a performance impact when using the <code>areOptionsEqual</code> prop (proportional to the number of options). Therefore, it&#39;s recommented to use the default reference equality comparison whenever possible."
},
"buttonRef": { "description": "The ref of the trigger button element." },
"componentName": {
"description": "The name of the component using useSelect. For debugging purposes."
},
"defaultOpen": { "description": "If <code>true</code>, the select will be open by default." },
"defaultValue": {
"description": "The default selected value. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the select is disabled." },
"getOptionAsString": {
"description": "A function used to convert the option label to a string. This is useful when labels are elements and need to be converted to plain text to enable keyboard navigation with character keys."
},
"getSerializedValue": {
"description": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form."
},
"listboxId": { "description": "The <code>id</code> attribute of the listbox element." },
"listboxRef": { "description": "The ref of the listbox element." },
"multiple": {
"description": "If <code>true</code>, the end user can select multiple values. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props."
},
"name": {
"description": "The <code>name</code> attribute of the hidden input element. This is useful when the select is embedded in a form and you want to access the selected value in the form data."
},
"onChange": { "description": "Callback fired when an option is selected." },
"onHighlightChange": { "description": "Callback fired when an option is highlighted." },
"onOpenChange": { "description": "Callback fired when the listbox is opened or closed." },
"open": {
"description": "Controls the open state of the select&#39;s listbox. This is the controlled equivalent of the <code>defaultOpen</code> prop."
},
"options": {
"description": "An alternative way to specify the options. If this parameter is set, options defined as JSX children are ignored."
},
"required": {
"description": "If <code>true</code>, the select embedded in a form must have a selected value. Otherwise, the form submission will fail."
},
"value": {
"description": "The selected value. Set to <code>null</code> to deselect all options."
}
},
"returnValueDescriptions": {
"buttonActive": {
"description": "If <code>true</code>, the trigger button is active (pressed)."
},
"buttonFocusVisible": {
"description": "If <code>true</code>, the trigger button has a visible focus."
},
"buttonRef": { "description": "Ref to the button slot DOM node." },
"contextValue": {
"description": "A value to be passed to the <code>SelectProvider</code> component."
},
"disabled": { "description": "If <code>true</code>, the select is disabled." },
"dispatch": {
"description": "Action dispatcher for the select component. Allows to programmatically control the select."
},
"getButtonProps": { "description": "Resolver for the button slot&#39;s props." },
"getHiddenInputProps": { "description": "Resolver for the hidden input slot&#39;s props." },
"getListboxProps": { "description": "Resolver for the listbox slot&#39;s props." },
"getOptionMetadata": {
"description": "A function that returns the metadata of an option with a given value."
},
"highlightedOption": { "description": "The value of the highlighted option." },
"listboxRef": { "description": "Ref to the listbox slot DOM node." },
"open": { "description": "If <code>true</code>, the listbox is open." },
"options": { "description": "Values of all the registered options." },
"value": { "description": "The value of the selected option(s)." }
}
}

View File

@@ -0,0 +1,73 @@
{
"hookDescription": "",
"parametersDescriptions": {
"aria-labelledby": {
"description": "The id of the element containing a label for the slider."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"disableSwap": {
"description": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb."
},
"isRtl": {
"description": "If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side)."
},
"marks": {
"description": "Marks indicate predetermined values to which the user can move the slider. If <code>true</code> the marks are spaced according the value of the <code>step</code> prop. If an array, it should contain objects with <code>value</code> and an optional <code>label</code> keys."
},
"max": {
"description": "The maximum allowed value of the slider. Should not be equal to min."
},
"min": {
"description": "The minimum allowed value of the slider. Should not be equal to max."
},
"name": { "description": "Name attribute of the hidden <code>input</code> element." },
"onChange": {
"description": "Callback function that is fired when the slider&#39;s value changed."
},
"onChangeCommitted": {
"description": "Callback function that is fired when the <code>mouseup</code> is triggered."
},
"orientation": { "description": "The component orientation." },
"rootRef": { "description": "The ref attached to the root of the Slider." },
"scale": { "description": "A transformation function, to change the scale of the slider." },
"shiftStep": {
"description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
},
"step": {
"description": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop."
},
"tabIndex": { "description": "Tab index attribute of the hidden <code>input</code> element." },
"value": {
"description": "The value of the slider. For ranged sliders, provide an array with two values."
}
},
"returnValueDescriptions": {
"active": { "description": "The active index of the slider." },
"axis": { "description": "The orientation of the slider." },
"axisProps": {
"description": "Returns the <code>offset</code> and <code>leap</code> methods to calculate the positioning styles based on the slider axis."
},
"dragging": { "description": "If <code>true</code>, the slider is being dragged." },
"focusedThumbIndex": {
"description": "The index of the thumb which is focused on the slider."
},
"getHiddenInputProps": { "description": "Resolver for the hidden input slot&#39;s props." },
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"getThumbProps": { "description": "Resolver for the thumb slot&#39;s props." },
"getThumbStyle": { "description": "Resolver for the thumb slot&#39;s style prop." },
"marks": {
"description": "The marks of the slider. Marks indicate predetermined values to which the user can move the slider."
},
"open": { "description": "The thumb index for the current value when in hover state." },
"range": {
"description": "If <code>true</code>, the slider is a range slider when the <code>value</code> prop passed is an array."
},
"rootRef": { "description": "Ref to the root slot&#39;s DOM node." },
"trackLeap": { "description": "The track leap for the current value of the slider." },
"trackOffset": { "description": "The track offset for the current value of the slider." },
"values": { "description": "The possible values of the slider." }
}
}

View File

@@ -0,0 +1,24 @@
{
"hookDescription": "The basic building block for creating custom snackbar.",
"parametersDescriptions": {
"autoHideDuration": {
"description": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value."
},
"disableWindowBlurListener": {
"description": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused."
},
"onClose": {
"description": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>."
},
"open": { "description": "If <code>true</code>, the component is shown." },
"resumeHideDuration": {
"description": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms."
}
},
"returnValueDescriptions": {
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"onClickAway": {
"description": "Callback fired when a &quot;click away&quot; event is detected."
}
}
}

View File

@@ -0,0 +1,25 @@
{
"hookDescription": "The basic building block for creating custom switches.",
"parametersDescriptions": {
"checked": { "description": "If <code>true</code>, the component is checked." },
"defaultChecked": {
"description": "The default checked state. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"onChange": { "description": "Callback fired when the state is changed." },
"readOnly": { "description": "If <code>true</code>, the component is read only." },
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required."
}
},
"returnValueDescriptions": {
"checked": { "description": "If <code>true</code>, the component will be checked." },
"disabled": { "description": "If <code>true</code>, the component will be disabled." },
"focusVisible": {
"description": "If <code>true</code>, it indicates that the component is being focused using keyboard."
},
"getInputProps": { "description": "Resolver for the input slot&#39;s props." },
"inputRef": { "description": "Ref to the input slot&#39;s DOM node." },
"readOnly": { "description": "If <code>true</code>, the component will be read only." }
}
}

View File

@@ -0,0 +1,16 @@
{
"hookDescription": "",
"parametersDescriptions": {
"id": { "description": "The id of the TabPanel." },
"rootRef": { "description": "The ref of the TabPanel." },
"value": {
"description": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
}
},
"returnValueDescriptions": {
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"hidden": {
"description": "If <code>true</code>, it indicates that the tab panel will be hidden."
}
}
}

View File

@@ -0,0 +1,34 @@
{
"hookDescription": "",
"parametersDescriptions": {
"disabled": { "description": "If <code>true</code>, the tab will be disabled." },
"id": {
"description": "The id of the tab. If not provided, it will be automatically generated."
},
"onChange": { "description": "Callback invoked when new value is being set." },
"onClick": { "description": "Callback fired when the tab is clicked." },
"rootRef": { "description": "Ref to the root slot&#39;s DOM element." },
"value": {
"description": "The value of the tab. It&#39;s used to associate the tab with a tab panel(s) with the same value. If the value is not provided, it falls back to the position index."
}
},
"returnValueDescriptions": {
"active": {
"description": "If <code>true</code>, the tab is active (as in <code>:active</code> pseudo-class; in other words, pressed)."
},
"focusVisible": {
"description": "If <code>true</code>, the tab has visible focus. This is a workaround for browsers that do not support this feature natively."
},
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"highlighted": { "description": "If <code>true</code>, the tab is highlighted." },
"index": { "description": "0-based index of the tab in the list of tabs." },
"rootRef": { "description": "Ref to the root slot&#39;s DOM element." },
"selected": { "description": "If <code>true</code>, the tab is selected." },
"setFocusVisible": {
"description": "Sets the focus-visible state of the tab. This is a workaround for browsers that do not support this feature natively."
},
"totalTabsCount": {
"description": "Total number of tabs in the nearest parent TabsList. This can be used to determine if the tab is the last one to style it accordingly."
}
}
}

View File

@@ -0,0 +1,19 @@
{
"hookDescription": "",
"parametersDescriptions": { "rootRef": { "description": "Ref to the root element." } },
"returnValueDescriptions": {
"contextValue": {
"description": "The value to be passed to the TabListProvider above all the tabs."
},
"dispatch": {
"description": "Action dispatcher for the tabs list component. Allows to programmatically control the tabs list."
},
"getRootProps": { "description": "Resolver for the root slot&#39;s props." },
"highlightedValue": { "description": "The value of the currently highlighted tab." },
"isRtl": {
"description": "If <code>true</code>, it will indicate that the text&#39;s direction in right-to-left."
},
"orientation": { "description": "The component orientation (layout flow direction)." },
"selectedValue": { "description": "The value of the currently selected tab." }
}
}

View File

@@ -0,0 +1,20 @@
{
"hookDescription": "",
"parametersDescriptions": {
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"direction": { "description": "The direction of the text." },
"onChange": { "description": "Callback invoked when new value is being set." },
"orientation": { "description": "The component orientation (layout flow direction)." },
"selectionFollowsFocus": {
"description": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation."
},
"value": {
"description": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>."
}
},
"returnValueDescriptions": {
"contextValue": { "description": "Returns the values to be passed to the tabs provider." }
}
}

View File

@@ -0,0 +1,5 @@
{
"hookDescription": "Allows an element to be transitioned in and out.\nThe transition is triggerred by a `TransitionContext` placed above in the component tree.",
"parametersDescriptions": {},
"returnValueDescriptions": {}
}

View File

@@ -0,0 +1,5 @@
{
"hookDescription": "Allows child elements to be transitioned in and out.",
"parametersDescriptions": {},
"returnValueDescriptions": {}
}

View File

@@ -0,0 +1,33 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the AccordionDetails if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"expanded": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "expanded"
}
},
"slotDescriptions": {
"content": "The component that renders the content.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,95 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the AccordionGroup if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disableDivider": {
"description": "If <code>true</code>, the divider between accordions will be hidden."
},
"size": { "description": "The size of the component (affect other nested list* components)." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"transition": { "description": "The CSS transition for the Accordion details." },
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,32 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the AccordionSummary if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"indicator": { "description": "The indicator element to display." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"disabled": { "description": "Class name applied when the accordion is disabled." },
"expanded": { "description": "Class name applied when the accordion is expanded." }
},
"slotDescriptions": {
"button": "The component that renders the button.",
"indicator": "The component that renders the indicator.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,56 @@
{
"componentDescription": "",
"propDescriptions": {
"accordionId": {
"description": "The id to be used in the AccordionDetails which is controlled by the AccordionSummary. If not provided, the id is autogenerated."
},
"children": {
"description": "Used to render icon or text elements inside the Accordion if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"defaultExpanded": { "description": "If <code>true</code>, expands the accordion by default." },
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"expanded": {
"description": "If <code>true</code>, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion."
},
"onChange": {
"description": "Callback fired when the expand/collapse state is changed.",
"typeDescriptions": {
"event": {
"name": "event",
"description": "The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event."
},
"expanded": {
"name": "expanded",
"description": "The <code>expanded</code> state of the accordion."
}
}
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"disabled": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled</code> is true"
},
"expanded": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>expanded</code> is true"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,98 @@
{
"componentDescription": "",
"propDescriptions": {
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"endDecorator": { "description": "Element placed after the children." },
"invertedColors": {
"description": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color."
},
"role": { "description": "The ARIA role attribute of the element." },
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"startDecorator": { "description": "Element placed before the children." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"endDecorator": "The component that renders the end decorator.",
"root": "The component that renders the root.",
"startDecorator": "The component that renders the start decorator."
}
}

View File

@@ -0,0 +1,91 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the AspectRatio if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"flex": {
"description": "By default, the AspectRatio will maintain the aspect ratio of its content. Set this prop to <code>true</code> when the container is a flex row and you want the AspectRatio to fill the height of its container."
},
"maxHeight": {
"description": "The maximum calculated height of the element (not the CSS height)."
},
"minHeight": {
"description": "The minimum calculated height of the element (not the CSS height)."
},
"objectFit": { "description": "The CSS object-fit value of the first-child." },
"ratio": {
"description": "The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support. <a href=\"https://caniuse.com/?search=aspect-ratio\">https://caniuse.com/?search=aspect-ratio</a>"
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>color=\"warning\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the content element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"content": "The component that renders the content.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,88 @@
{
"componentDescription": "",
"propDescriptions": {
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"size": { "description": "The size of the component (affect other nested list* components)." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,81 @@
{
"componentDescription": "",
"propDescriptions": {
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"focused": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "focused"
},
"focusVisible": {
"description": "State class applied to {{nodeName}}.",
"nodeName": "the <code>component</code>&#39;s <code>focusVisibleClassName</code> prop"
},
"variantOutlined": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,354 @@
{
"componentDescription": "",
"propDescriptions": {
"aria-describedby": {
"description": "Identifies the element (or elements) that describes the object."
},
"aria-label": { "description": "Defines a string value that labels the current element." },
"aria-labelledby": {
"description": "Identifies the element (or elements) that labels the current element."
},
"autoComplete": {
"description": "If <code>true</code>, the portion of the selected suggestion that the user hasn&#39;t typed, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state."
},
"autoFocus": {
"description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
},
"autoHighlight": {
"description": "If <code>true</code>, the first option is automatically highlighted."
},
"autoSelect": {
"description": "If <code>true</code>, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.<br>When using the <code>freeSolo</code> mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option."
},
"blurOnSelect": {
"description": "<p>Control if the input should be blurred when an option is selected:</p>\n<ul>\n<li><code>false</code> the input is not blurred.</li>\n<li><code>true</code> the input is always blurred.</li>\n<li><code>touch</code> the input is blurred after a touch event.</li>\n<li><code>mouse</code> the input is blurred after a mouse event.</li>\n</ul>\n"
},
"clearIcon": { "description": "The icon to display in place of the default clear icon." },
"clearOnBlur": {
"description": "If <code>true</code>, the input&#39;s text is cleared on blur if no value is selected.<br>Set it to <code>true</code> if you want to help the user enter a new value. Set it to <code>false</code> if you want to help the user resume their search."
},
"clearOnEscape": {
"description": "If <code>true</code>, clear all values when the user presses escape and the popup is closed."
},
"clearText": {
"description": "Override the default text for the <em>clear</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"closeText": {
"description": "Override the default text for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
"disableClearable": { "description": "If <code>true</code>, the input can&#39;t be cleared." },
"disableCloseOnSelect": {
"description": "If <code>true</code>, the popup won&#39;t close when a value is selected."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"disabledItemsFocusable": {
"description": "If <code>true</code>, will allow focus on disabled items."
},
"disableListWrap": {
"description": "If <code>true</code>, the list box in the popup will not wrap focus."
},
"endDecorator": { "description": "Trailing adornment for this input." },
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"filterOptions": {
"description": "A function that determines the filtered options to be rendered on search.",
"typeDescriptions": {
"options": { "name": "options", "description": "The options to render." },
"state": { "name": "state", "description": "The state of the component." }
}
},
"filterSelectedOptions": {
"description": "If <code>true</code>, hide the selected options from the list box."
},
"forcePopupIcon": { "description": "Force the visibility display of the popup icon." },
"freeSolo": {
"description": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options."
},
"getLimitTagsText": {
"description": "The label to display when the tags are truncated (<code>limitTags</code>).",
"typeDescriptions": {
"more": { "name": "more", "description": "The number of truncated tags." }
}
},
"getOptionDisabled": {
"description": "Used to determine the disabled state for a given option.",
"typeDescriptions": { "option": { "name": "option", "description": "The option to test." } }
},
"getOptionKey": {
"description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).",
"typeDescriptions": {
"option": { "name": "option", "description": "The option to get the key for." }
}
},
"getOptionLabel": {
"description": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string."
},
"groupBy": {
"description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided.",
"typeDescriptions": {
"options": { "name": "options", "description": "The options to group." }
}
},
"handleHomeEndKeys": {
"description": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively."
},
"id": {
"description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide an id it will fall back to a randomly generated one."
},
"includeInputInList": {
"description": "If <code>true</code>, the highlight can move to the input."
},
"inputValue": { "description": "The input value." },
"isOptionEqualToValue": {
"description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.",
"typeDescriptions": {
"option": { "name": "option", "description": "The option to test." },
"value": { "name": "value", "description": "The value to test against." }
}
},
"limitTags": {
"description": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit."
},
"loading": {
"description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, for example <code>options</code> are empty)."
},
"loadingText": {
"description": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"multiple": {
"description": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections."
},
"name": { "description": "Name attribute of the <code>input</code> element." },
"noOptionsText": {
"description": "Text to display when there are no options.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"onChange": {
"description": "Callback fired when the value changes.",
"typeDescriptions": {
"event": { "name": "event", "description": "The event source of the callback." },
"value": { "name": "value", "description": "The new value of the component." },
"reason": {
"name": "reason",
"description": "One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;."
}
}
},
"onClose": {
"description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
"typeDescriptions": {
"event": { "name": "event", "description": "The event source of the callback." },
"reason": {
"name": "reason",
"description": "Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>."
}
}
},
"onHighlightChange": {
"description": "Callback fired when the highlight option changes.",
"typeDescriptions": {
"event": { "name": "event", "description": "The event source of the callback." },
"option": { "name": "option", "description": "The highlighted option." },
"reason": {
"name": "reason",
"description": "Can be: <code>&quot;keyboard&quot;</code>, <code>&quot;auto&quot;</code>, <code>&quot;mouse&quot;</code>, <code>&quot;touch&quot;</code>."
}
}
},
"onInputChange": {
"description": "Callback fired when the input value changes.",
"typeDescriptions": {
"event": { "name": "event", "description": "The event source of the callback." },
"value": { "name": "value", "description": "The new value of the text input." },
"reason": {
"name": "reason",
"description": "Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>, <code>&quot;blur&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>"
}
}
},
"onOpen": {
"description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
"typeDescriptions": {
"event": { "name": "event", "description": "The event source of the callback." }
}
},
"open": { "description": "If <code>true</code>, the component is shown." },
"openOnFocus": { "description": "If <code>true</code>, the popup will open on input focus." },
"openText": {
"description": "Override the default text for the <em>open popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
},
"options": { "description": "Array of options." },
"placeholder": { "description": "The input placeholder" },
"popupIcon": { "description": "The icon to display in place of the default popup icon." },
"readOnly": {
"description": "If <code>true</code>, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted."
},
"renderGroup": {
"description": "Render the group.",
"typeDescriptions": { "params": { "name": "params", "description": "The group to render." } }
},
"renderOption": {
"description": "Render the option, use <code>getOptionLabel</code> by default.",
"typeDescriptions": {
"props": { "name": "props", "description": "The props to apply on the li element." },
"option": { "name": "option", "description": "The option to render." },
"state": { "name": "state", "description": "The state of the component." }
}
},
"renderTags": {
"description": "Render the selected value.",
"typeDescriptions": {
"value": {
"name": "value",
"description": "The <code>value</code> provided to the component."
},
"getTagProps": { "name": "getTagProps", "description": "A tag props getter." },
"ownerState": {
"name": "ownerState",
"description": "The state of the Autocomplete component."
}
}
},
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"selectOnFocus": {
"description": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value."
},
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"startDecorator": { "description": "Leading adornment for this input." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"type": {
"description": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types\">a valid HTML5 input type</a>."
},
"value": {
"description": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"error": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>error={true}</code>"
},
"focused": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is focused"
},
"formControl": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is a descendant of <code>FormControl</code>"
},
"hasClearIcon": { "description": "Class name applied when the clear icon is rendered." },
"hasPopupIcon": { "description": "Class name applied when the popup icon is rendered." },
"multiple": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the wrapper element",
"conditions": "<code>multiple={true}</code>"
},
"popupIndicatorOpen": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the popup indicator",
"conditions": "the popup is open"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"clearIndicator": "The component that renders the clear indicator.",
"endDecorator": "The component that renders the end decorator.",
"input": "The component that renders the input.",
"limitTag": "The component that renders the limit tag.",
"listbox": "The component that renders the listbox.",
"loading": "The component that renders the loading.",
"noOptions": "The component that renders the no-options.",
"option": "The component that renders the option.",
"popupIndicator": "The component that renders the popup indicator.",
"root": "The component that renders the root.",
"startDecorator": "The component that renders the start decorator.",
"wrapper": "The component that renders the wrapper."
}
}

View File

@@ -0,0 +1,27 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the AvatarGroup if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,99 @@
{
"componentDescription": "",
"propDescriptions": {
"alt": {
"description": "Used in combination with <code>src</code> or <code>srcSet</code> to provide an alt attribute for the rendered <code>img</code> element."
},
"children": {
"description": "Used to render icon or text elements inside the Avatar if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"src": { "description": "The <code>src</code> attribute for the <code>img</code> element." },
"srcSet": {
"description": "The <code>srcSet</code> attribute for the <code>img</code> element. Use this attribute for responsive image display."
},
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"fallback": "The component that renders the fallback.",
"img": "The component that renders the img.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,137 @@
{
"componentDescription": "",
"propDescriptions": {
"anchorOrigin": { "description": "The anchor of the badge." },
"badgeContent": { "description": "The content rendered within the badge." },
"badgeInset": {
"description": "The inset of the badge. Support shorthand syntax as described in <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset\">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset</a>."
},
"children": { "description": "The badge will be added relative to this node." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"invisible": { "description": "If <code>true</code>, the badge is invisible." },
"max": { "description": "Max count to show." },
"showZero": {
"description": "Controls whether the badge is hidden when <code>badgeContent</code> is zero."
},
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"anchorOriginBottomLeft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
},
"anchorOriginBottomRight": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
},
"anchorOriginTopLeft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
},
"anchorOriginTopRight": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
},
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>color=\"warning\"</code>"
},
"invisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>invisible={true}</code>"
},
"locationInside": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>location=\"inside\"</code>"
},
"locationOutside": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>location=\"outside\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the badge <code>span</code> element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"badge": "The component that renders the badge.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,12 @@
{
"componentDescription": "",
"propDescriptions": {
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": { "root": { "description": "Class name applied to the root element." } }
}

View File

@@ -0,0 +1,41 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"separator": { "description": "Custom separator node." },
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
}
},
"slotDescriptions": {
"li": "The component that renders the li.",
"ol": "The component that renders the ol.",
"root": "The component that renders the root.",
"separator": "The component that renders the separator."
}
}

View File

@@ -0,0 +1,109 @@
{
"componentDescription": "",
"propDescriptions": {
"buttonFlex": { "description": "The flex value of the button." },
"children": {
"description": "Used to render icon or text elements inside the ButtonGroup if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, all the buttons will be disabled." },
"orientation": { "description": "The component orientation." },
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"spacing": {
"description": "Defines the space between the type <code>item</code> components. It can only be used on a type <code>container</code> component."
},
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"horizontal\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,131 @@
{
"componentDescription": "",
"propDescriptions": {
"action": {
"description": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"endDecorator": { "description": "Element placed after the children." },
"fullWidth": {
"description": "If <code>true</code>, the button will take up the full width of its container."
},
"loading": {
"description": "If <code>true</code>, the loading indicator is shown and the button becomes disabled."
},
"loadingIndicator": {
"description": "The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself."
},
"loadingPosition": {
"description": "The loading indicator can be positioned on the start, end, or the center of the button."
},
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"startDecorator": { "description": "Element placed before the children." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the ButtonBase root element",
"conditions": "the button is keyboard focused"
},
"fullWidth": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>fullWidth={true}</code>"
},
"loading": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>loading={true}</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"endDecorator": "The component that renders the end decorator.",
"loadingIndicatorCenter": "The component that renders the loading indicator center.",
"root": "The component that renders the root.",
"startDecorator": "The component that renders the start decorator."
}
}

View File

@@ -0,0 +1,20 @@
{
"componentDescription": "",
"propDescriptions": {
"buttonFlex": { "description": "The CSS <code>flex</code> for the Button and its wrapper." },
"children": {
"description": "Used to render icon or text elements inside the CardActions if <code>src</code> is not set. This can be an element, or just a string."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"orientation": { "description": "The component orientation." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,19 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the CardContent if <code>src</code> is not set. This can be an element, or just a string."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"orientation": { "description": "The component orientation." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,18 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the CardCover if <code>src</code> is not set. This can be an element, or just a string."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,75 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the CardOverflow if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,107 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the Card if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"invertedColors": {
"description": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color."
},
"orientation": { "description": "The component orientation." },
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"horizontal\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,143 @@
{
"componentDescription": "",
"propDescriptions": {
"checked": { "description": "If <code>true</code>, the component is checked." },
"checkedIcon": { "description": "The icon to display when the component is checked." },
"className": { "description": "Class name applied to the root element." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"defaultChecked": {
"description": "The default checked state. Use when the component is not controlled."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"disableIcon": {
"description": "If <code>true</code>, the checked icon is removed and the selected variant is applied on the <code>action</code> element instead."
},
"indeterminate": {
"description": "If <code>true</code>, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a <code>data-indeterminate</code> attribute on the <code>input</code>."
},
"indeterminateIcon": {
"description": "The icon to display when the component is indeterminate."
},
"label": { "description": "The label element next to the checkbox." },
"name": { "description": "The <code>name</code> attribute of the input." },
"onChange": {
"description": "Callback fired when the state is changed.",
"typeDescriptions": {
"event": {
"name": "event",
"description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
}
}
},
"overlay": {
"description": "If <code>true</code>, the root element&#39;s position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Checkbox with ListItem component."
},
"readOnly": { "description": "If <code>true</code>, the component is read only." },
"required": {
"description": "If <code>true</code>, the <code>input</code> element is required."
},
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"uncheckedIcon": { "description": "The icon when <code>checked</code> is false." },
"value": {
"description": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"checked": {
"description": "State class applied to {{nodeName}}.",
"nodeName": "the input component&#39;s <code>checked</code> class"
},
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}}.",
"nodeName": "the input component&#39;s disabled class"
},
"focusVisible": {
"description": "Class name applied to the root element if the switch has visible focus"
},
"indeterminate": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>indeterminate={true}</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"action": "The component that renders the action.",
"checkbox": "The component that renders the checkbox.",
"input": "The component that renders the input.",
"label": "The component that renders the label.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,89 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "If provided, it will replace the default icon." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": {
"description": "If <code>true</code>, the component is disabled. If <code>undefined</code>, the value inherits from the parent chip via a React context."
},
"onDelete": {
"description": "<p>Callback fired when the component is not disabled and either:</p>\n<ul>\n<li><code>Backspace</code>, <code>Enter</code> or <code>Delete</code> is pressed.</li>\n<li>The component is clicked.</li>\n</ul>\n"
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "keyboard focused"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,126 @@
{
"componentDescription": "Chips represent complex entities in small blocks, such as a contact.",
"propDescriptions": {
"children": { "description": "The content of the component." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"endDecorator": { "description": "Element placed after the children." },
"onClick": { "description": "Element action click handler." },
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"startDecorator": { "description": "Element placed before the children." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "keyboard focused"
},
"labelLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label <code>span</code> element",
"conditions": "<code>size=\"lg\"</code>"
},
"labelMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label <code>span</code> element",
"conditions": "<code>size=\"md\"</code>"
},
"labelSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label <code>span</code> element",
"conditions": "<code>size=\"sm\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"action": "The component that renders the action.",
"endDecorator": "The component that renders the end decorator.",
"label": "The component that renders the label.",
"root": "The component that renders the root.",
"startDecorator": "The component that renders the start decorator."
}
}

View File

@@ -0,0 +1,107 @@
{
"componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
"propDescriptions": {
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"determinate": {
"description": "The boolean to select a variant. Use indeterminate when there is no progress value."
},
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"thickness": { "description": "The thickness of the circle." },
"value": {
"description": "The value of the progress indicator for the determinate variant. Value between 0 and 100."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"determinate": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>determinate</code> is true"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"progress": "The component that renders the progress.",
"root": "The component that renders the root.",
"svg": "The component that renders the svg.",
"track": "The component that renders the track."
}
}

View File

@@ -0,0 +1,10 @@
{
"componentDescription": "Kickstart an elegant, consistent, and simple baseline to build upon.",
"propDescriptions": {
"children": { "description": "You can wrap a node." },
"disableColorScheme": {
"description": "Disable <code>color-scheme</code> CSS property.<br>For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
}
},
"classDescriptions": {}
}

View File

@@ -0,0 +1,20 @@
{
"componentDescription": "",
"propDescriptions": {
"buttonFlex": { "description": "The CSS <code>flex</code> for the Button and its wrapper." },
"children": {
"description": "Used to render icon or text elements inside the DialogActions if <code>src</code> is not set. This can be an element, or just a string."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"orientation": { "description": "The component orientation." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,19 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the CardContent if <code>src</code> is not set. This can be an element, or just a string."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"orientation": { "description": "The component orientation." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,131 @@
{
"componentDescription": "",
"propDescriptions": {
"children": {
"description": "Used to render icon or text elements inside the DialogTitle if <code>src</code> is not set. This can be an element, or just a string."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"level": { "description": "Applies the theme typography styles." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"body-lg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-lg\"</code>"
},
"body-md": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-md\"</code>"
},
"body-sm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-sm\"</code>"
},
"body-xs": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-xs\"</code>"
},
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"h1": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h1\"</code>"
},
"h2": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h2\"</code>"
},
"h3": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h3\"</code>"
},
"h4": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h4\"</code>"
},
"title-lg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"title-lg\"</code>"
},
"title-md": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"title-md\"</code>"
},
"title-sm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"title-sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,41 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"inset": {
"description": "Class name applied to the divider to shrink or stretch the line based on the orientation."
},
"orientation": { "description": "The component orientation." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"horizontal\"</code>"
},
"insetContext": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>inset=\"context\"</code>"
},
"insetNone": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>inset=\"none\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,129 @@
{
"componentDescription": "The navigation drawers (or \"sidebars\") provide ergonomic access to destinations in a site or app functionality such as switching accounts.",
"propDescriptions": {
"anchor": { "description": "Side from which the drawer will appear." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"container": {
"description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
},
"disableAutoFocus": {
"description": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
},
"disableEnforceFocus": {
"description": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
},
"disableEscapeKeyDown": {
"description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
},
"disablePortal": {
"description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
},
"disableRestoreFocus": {
"description": "If <code>true</code>, the modal will not restore focus to previously focused element once modal is hidden or unmounted."
},
"disableScrollLock": { "description": "Disable the scroll lock behavior." },
"hideBackdrop": { "description": "If <code>true</code>, the backdrop is not rendered." },
"invertedColors": {
"description": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color."
},
"onClose": {
"description": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.",
"typeDescriptions": {
"event": { "name": "event", "description": "The event source of the callback." },
"reason": {
"name": "reason",
"description": "Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;closeClick&quot;</code>."
}
}
},
"open": { "description": "If <code>true</code>, the component is shown." },
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"hidden": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "open is false"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"backdrop": "The component that renders the backdrop.",
"content": "The component that renders the content of the drawer.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,87 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, the children are in disabled state." },
"error": { "description": "If <code>true</code>, the children will indicate an error." },
"orientation": { "description": "The content direction flow." },
"required": {
"description": "If <code>true</code>, the user must specify a value for the input before the owning form can be submitted. If <code>true</code>, the asterisk appears on the FormLabel."
},
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"error": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>error={true}</code>"
},
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"horizontal\"</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,16 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,20 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"required": { "description": "The asterisk is added if required=<code>true</code>" },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": {
"asterisk": "The component that renders the asterisk.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,6 @@
{
"componentDescription": "",
"propDescriptions": { "children": { "description": "The content of the component." } },
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,119 @@
{
"componentDescription": "",
"propDescriptions": {
"action": {
"description": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action."
},
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusVisibleClassName": {
"description": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
},
"loading": {
"description": "If <code>true</code>, the loading indicator is shown and the icon button becomes disabled."
},
"loadingIndicator": {
"description": "The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself."
},
"size": { "description": "The size of the component." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the button is keyboard focused"
},
"loading": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>loading={true}</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"loadingIndicator": "The component that renders the loading indicator.",
"root": "The component that renders the root."
}
}

View File

@@ -0,0 +1,122 @@
{
"componentDescription": "",
"propDescriptions": {
"className": { "description": "Class name applied to the root element." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"endDecorator": { "description": "Trailing adornment for this input." },
"error": {
"description": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
},
"fullWidth": {
"description": "If <code>true</code>, the input will take up the full width of its container."
},
"size": { "description": "The size of the component." },
"startDecorator": { "description": "Leading adornment for this input." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"error": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>error={true}</code>"
},
"focused": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is focused"
},
"formControl": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the component is a descendant of <code>FormControl</code>"
},
"fullWidth": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>fullWidth={true}</code>"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"endDecorator": "The component that renders the end decorator.",
"input": "The component that renders the input.",
"root": "The component that renders the root.",
"startDecorator": "The component that renders the start decorator."
}
}

View File

@@ -0,0 +1,102 @@
{
"componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
"propDescriptions": {
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"determinate": {
"description": "The boolean to select a variant. Use indeterminate when there is no progress value."
},
"size": {
"description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"thickness": { "description": "The thickness of the bar." },
"value": {
"description": "The value of the progress indicator for the determinate variant. Value between 0 and 100."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"determinate": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>determinate</code> is true"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,162 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"color": { "description": "The color of the link." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"endDecorator": { "description": "Element placed after the children." },
"level": { "description": "Applies the theme typography styles." },
"overlay": {
"description": "If <code>true</code>, the ::after pseudo element is added to cover the area of interaction. The parent of the overlay Link should have <code>relative</code> CSS position."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"startDecorator": { "description": "Element placed before the children." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"textColor": { "description": "The system color." },
"underline": { "description": "Controls when the link should have an underline." },
"variant": { "description": "Applies the theme link styles." }
},
"classDescriptions": {
"body-lg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-lg\"</code>"
},
"body-md": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-md\"</code>"
},
"body-sm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-sm\"</code>"
},
"body-xs": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"body-xs\"</code>"
},
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "the link is keyboard focused"
},
"h1": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h1\"</code>"
},
"h2": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h2\"</code>"
},
"h3": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h3\"</code>"
},
"h4": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"h4\"</code>"
},
"title-lg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"title-lg\"</code>"
},
"title-md": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"title-md\"</code>"
},
"title-sm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>level=\"title-sm\"</code>"
},
"underlineAlways": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>underline=\"always\"</code>"
},
"underlineHover": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>underline=\"hover\"</code>"
},
"underlineNone": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>underline=\"none\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"endDecorator": "The component that renders the end decorator.",
"root": "The component that renders the root.",
"startDecorator": "The component that renders the start decorator."
}
}

View File

@@ -0,0 +1,46 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"inset": {
"description": "The empty space on the side(s) of the divider in a vertical list.<br>For horizontal list (the nearest parent List has <code>row</code> prop set to <code>true</code>), only <code>inset=&quot;gutter&quot;</code> affects the list divider."
},
"orientation": { "description": "The component orientation." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"horizontal\"</code>"
},
"insetGutter": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>inset=\"gutter\"</code>"
},
"insetStartContent": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>inset=\"startContent\"</code>"
},
"insetStartDecorator": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>inset=\"startDecorator\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,109 @@
{
"componentDescription": "",
"propDescriptions": {
"action": {
"description": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action."
},
"autoFocus": {
"description": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true."
},
"children": { "description": "The content of the component." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If <code>true</code>, the component is disabled." },
"focusVisibleClassName": {
"description": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
},
"orientation": { "description": "The content direction flow." },
"selected": { "description": "If <code>true</code>, the component is selected." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"context\"</code>"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the inner <code>component</code> element",
"conditions": "<code>disabled={true}</code>"
},
"focusVisible": {
"description": "State class applied to {{nodeName}}.",
"nodeName": "the <code>component</code>&#39;s <code>focusVisibleClassName</code> prop"
},
"horizontal": {
"description": "Class name applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the root element",
"conditions": "if <code>orientation=\"horizontal\"</code>"
},
"selected": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>selected={true}</code>"
},
"variantOutlined": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the root element",
"conditions": "if <code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,16 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,16 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
},
"classDescriptions": {},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,98 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"endAction": { "description": "The element to display at the end of ListItem." },
"nested": { "description": "If <code>true</code>, the component can contain NestedList." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"startAction": { "description": "The element to display at the start of ListItem." },
"sticky": {
"description": "If <code>true</code>, the component has sticky position (with top = 0)."
},
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"nested": {
"description": "Class name applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the root element",
"conditions": "if nested={true}"
},
"nesting": {
"description": "Class name applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the root element",
"conditions": "if it is under a nested list item"
},
"sticky": {
"description": "Class name applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the root element",
"conditions": "if sticky={true}"
},
"variantOutlined": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": {
"endAction": "The component that renders the end action.",
"root": "The component that renders the root.",
"startAction": "The component that renders the start action."
}
}

View File

@@ -0,0 +1,81 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sticky": {
"description": "If <code>true</code>, the component has sticky position (with top = 0)."
},
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"sticky": {
"description": "Class name applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the root element",
"conditions": "if sticky={true}"
},
"variantOutlined": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

View File

@@ -0,0 +1,116 @@
{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"marker": {
"description": "The marker (such as a disc, character, or custom counter style) of the list items. When this prop is specified, the List Item changes the CSS display to <code>list-item</code> in order to apply the marker.<br>To see all available options, check out the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/list-style-type\">MDN list-style-type page</a>."
},
"orientation": { "description": "The component orientation." },
"size": { "description": "The size of the component (affect other nested list* components)." },
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": {
"description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
},
"wrap": {
"description": "Only for horizontal list. If <code>true</code>, the list sets the flex-wrap to &quot;wrap&quot; and adjust margin to have gap-like behavior (will move to <code>gap</code> in the future)."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"danger\"</code>"
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"neutral\"</code>"
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"primary\"</code>"
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"success\"</code>"
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>color=\"warning\"</code>"
},
"horizontal": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"horizontal\"</code>"
},
"nesting": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "wrapped with nested context"
},
"scoped": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>scoped</code> is true"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"lg\"</code>"
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"md\"</code>"
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"sm\"</code>"
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code>"
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"plain\"</code>"
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"soft\"</code>"
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"solid\"</code>"
},
"vertical": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": { "root": "The component that renders the root." }
}

Some files were not shown because too many files have changed in this diff Show More