src is not set. This can be an element, or just a string.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "maxHeight": "The maximum calculated height of the element (not the CSS height).",
+ "minHeight": "The minimum calculated height of the element (not the CSS height).",
+ "objectFit": "The CSS object-fit value of the first-child.",
+ "ratio": "The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support. https://caniuse.com/?search=aspect-ratio",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json b/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json
new file mode 100644
index 00000000000000..9f449e003040f1
--- /dev/null
+++ b/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json
@@ -0,0 +1,11 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "size": "The size of the component (affect other nested list* components).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json b/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json
new file mode 100644
index 00000000000000..6eef5e02a34f4b
--- /dev/null
+++ b/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json
@@ -0,0 +1,10 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/autocomplete/autocomplete.json b/docs/translations/api-docs-joy/autocomplete/autocomplete.json
new file mode 100644
index 00000000000000..584d9d526f86a8
--- /dev/null
+++ b/docs/translations/api-docs-joy/autocomplete/autocomplete.json
@@ -0,0 +1,56 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "aria-describedby": "Identifies the element (or elements) that describes the object.",
+ "aria-label": "Defines a string value that labels the current element.",
+ "aria-labelledby": "Identifies the element (or elements) that labels the current element.",
+ "autoFocus": "If true, the input element is focused during the first mount.",
+ "clearIcon": "The icon to display in place of the default clear icon.",
+ "clearText": "Override the default text for the clear icon button.true, the input can't be cleared.",
+ "disabled": "If true, the component is disabled.",
+ "endDecorator": "Trailing adornment for this input.",
+ "error": "If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.",
+ "filterOptions": "A function that determines the filtered options to be rendered on search.function(options: Array<T>, state: object) => Array<T>true, the Autocomplete is free solo, meaning that the user input is not bound to provided options.",
+ "getLimitTagsText": "The label to display when the tags are truncated (limitTags).function(more: string | number) => ReactNodefunction(option: T) => booleanrenderOption is not provided).function(option: T) => stringrenderGroup is not provided.function(options: T) => stringfunction(option: T, value: T) => boolean-1 to disable the limit.",
+ "loading": "If true, the component is in a loading state. This shows the loadingText in place of suggestions (only if there are no suggestions to show, e.g. options are empty).",
+ "loadingText": "Text to display when in a loading state.true, value must be an array and the menu will support multiple selections.",
+ "name": "Name attribute of the input element.",
+ "noOptionsText": "Text to display when there are no options.function(event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => voidfunction(event: React.SyntheticEvent, reason: string) => void"toggleInput", "escape", "selectOption", "removeOption", "blur".",
+ "onHighlightChange": "Callback fired when the highlight option changes.function(event: React.SyntheticEvent, option: T, reason: string) => void"keyboard", "auto", "mouse".",
+ "onInputChange": "Callback fired when the input value changes.function(event: React.SyntheticEvent, value: string, reason: string) => void"input" (user input), "reset" (programmatic change), "clear".",
+ "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).function(event: React.SyntheticEvent) => voidtrue, the component is shown.",
+ "openText": "Override the default text for the open popup icon button.true, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.",
+ "renderGroup": "Render the group.function(params: AutocompleteRenderGroupParams) => ReactNodegetOptionLabel by default.function(props: object, option: T, state: object) => ReactNodefunction(value: Array<T>, getTagProps: function, ownerState: object) => ReactNodevalue provided to the component.true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.",
+ "size": "The size of the component.",
+ "startDecorator": "Leading adornment for this input.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "type": "Type of the input element. It should be a valid HTML5 input type.",
+ "value": "The value of the autocomplete.isOptionEqualToValue prop.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/avatar-group/avatar-group.json b/docs/translations/api-docs-joy/avatar-group/avatar-group.json
new file mode 100644
index 00000000000000..0642addc5bb5cf
--- /dev/null
+++ b/docs/translations/api-docs-joy/avatar-group/avatar-group.json
@@ -0,0 +1,12 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Used to render icon or text elements inside the AvatarGroup if src is not set. This can be an element, or just a string.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/avatar/avatar.json b/docs/translations/api-docs-joy/avatar/avatar.json
new file mode 100644
index 00000000000000..e0e27ec923ea84
--- /dev/null
+++ b/docs/translations/api-docs-joy/avatar/avatar.json
@@ -0,0 +1,14 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "alt": "Used in combination with src or srcSet to provide an alt attribute for the rendered img element.",
+ "children": "Used to render icon or text elements inside the Avatar if src is not set. This can be an element, or just a string.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "src": "The src attribute for the img element.",
+ "srcSet": "The srcSet attribute for the img element. Use this attribute for responsive image display.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/badge/badge.json b/docs/translations/api-docs-joy/badge/badge.json
new file mode 100644
index 00000000000000..d125244d9f16a7
--- /dev/null
+++ b/docs/translations/api-docs-joy/badge/badge.json
@@ -0,0 +1,17 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "anchorOrigin": "The anchor of the badge.",
+ "badgeContent": "The content rendered within the badge.",
+ "badgeInset": "The inset of the badge. Support shorthand syntax as described in https://developer.mozilla.org/en-US/docs/Web/CSS/inset.",
+ "children": "The badge will be added relative to this node.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "invisible": "If true, the badge is invisible.",
+ "max": "Max count to show.",
+ "showZero": "Controls whether the badge is hidden when badgeContent is zero.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json b/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json
new file mode 100644
index 00000000000000..4e6791681916aa
--- /dev/null
+++ b/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json
@@ -0,0 +1,10 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "separator": "Custom separator node.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/button/button.json b/docs/translations/api-docs-joy/button/button.json
new file mode 100644
index 00000000000000..ee38c292f67cd1
--- /dev/null
+++ b/docs/translations/api-docs-joy/button/button.json
@@ -0,0 +1,18 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "action": "A ref for imperative actions. It currently only supports focusVisible() action.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "disabled": "If true, the component is disabled.",
+ "endDecorator": "Element placed after the children.",
+ "fullWidth": "If true, the button will take up the full width of its container.",
+ "loading": "If true, the loading indicator is shown.",
+ "loadingIndicator": "The node should contain an element with role="progressbar" with an accessible name. By default we render a CircularProgress that is labelled by the button itself.",
+ "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
+ "size": "The size of the component.",
+ "startDecorator": "Element placed before the children.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/card-content/card-content.json b/docs/translations/api-docs-joy/card-content/card-content.json
new file mode 100644
index 00000000000000..c7e0fa30f47774
--- /dev/null
+++ b/docs/translations/api-docs-joy/card-content/card-content.json
@@ -0,0 +1,9 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Used to render icon or text elements inside the CardContent if src is not set. This can be an element, or just a string.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/card-cover/card-cover.json b/docs/translations/api-docs-joy/card-cover/card-cover.json
new file mode 100644
index 00000000000000..826e917ca084be
--- /dev/null
+++ b/docs/translations/api-docs-joy/card-cover/card-cover.json
@@ -0,0 +1,9 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Used to render icon or text elements inside the CardCover if src is not set. This can be an element, or just a string.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/card-overflow/card-overflow.json b/docs/translations/api-docs-joy/card-overflow/card-overflow.json
new file mode 100644
index 00000000000000..f06ece5ed9e306
--- /dev/null
+++ b/docs/translations/api-docs-joy/card-overflow/card-overflow.json
@@ -0,0 +1,11 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Used to render icon or text elements inside the CardOverflow if src is not set. This can be an element, or just a string.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/card/card.json b/docs/translations/api-docs-joy/card/card.json
new file mode 100644
index 00000000000000..0138f5ae272db9
--- /dev/null
+++ b/docs/translations/api-docs-joy/card/card.json
@@ -0,0 +1,14 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Used to render icon or text elements inside the Card if src is not set. This can be an element, or just a string.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "invertedColors": "If true, the children with an implicit color prop invert their colors to match the component's variant and color.",
+ "orientation": "The component orientation.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/checkbox/checkbox.json b/docs/translations/api-docs-joy/checkbox/checkbox.json
new file mode 100644
index 00000000000000..b3b8131b09b249
--- /dev/null
+++ b/docs/translations/api-docs-joy/checkbox/checkbox.json
@@ -0,0 +1,26 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "checked": "If true, the component is checked.",
+ "checkedIcon": "The icon to display when the component is checked.",
+ "className": "Class name applied to the root element.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "defaultChecked": "The default checked state. Use when the component is not controlled.",
+ "disabled": "If true, the component is disabled.",
+ "disableIcon": "If true, the checked icon is removed and the selected variant is applied on the action element instead.",
+ "indeterminate": "If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.",
+ "indeterminateIcon": "The icon to display when the component is indeterminate.",
+ "label": "The label element next to the checkbox.",
+ "name": "The name attribute of the input.",
+ "onChange": "Callback fired when the state is changed.function(event: React.ChangeEvent<HTMLInputElement>) => voidevent.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean).",
+ "overlay": "If true, the root element'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": "If true, the component is read only.",
+ "required": "If true, the input element is required.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "uncheckedIcon": "The icon when checked is false.",
+ "value": "The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/chip-delete/chip-delete.json b/docs/translations/api-docs-joy/chip-delete/chip-delete.json
new file mode 100644
index 00000000000000..7dc24529e314ce
--- /dev/null
+++ b/docs/translations/api-docs-joy/chip-delete/chip-delete.json
@@ -0,0 +1,13 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "If provided, it will replace the default icon.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disabled": "If true, the component is disabled. If undefined, the value inherits from the parent chip via a React context.",
+ "onDelete": "Callback fired when the component is not disabled and either: - Backspace, Enter or Delete is pressed. - The component is clicked.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/chip/chip.json b/docs/translations/api-docs-joy/chip/chip.json
new file mode 100644
index 00000000000000..2c1576b528c6bc
--- /dev/null
+++ b/docs/translations/api-docs-joy/chip/chip.json
@@ -0,0 +1,15 @@
+{
+ "componentDescription": "Chips represent complex entities in small blocks, such as a contact.",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "disabled": "If true, the component is disabled.",
+ "endDecorator": "Element placed after the children.",
+ "onClick": "Element action click handler.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "startDecorator": "Element placed before the children.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/circular-progress/circular-progress.json b/docs/translations/api-docs-joy/circular-progress/circular-progress.json
new file mode 100644
index 00000000000000..2b527d0a1ca52e
--- /dev/null
+++ b/docs/translations/api-docs-joy/circular-progress/circular-progress.json
@@ -0,0 +1,13 @@
+{
+ "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": "The color of the component. It supports those theme colors that make sense for this component.",
+ "determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "thickness": "The thickness of the circle.",
+ "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/css-baseline/css-baseline.json b/docs/translations/api-docs-joy/css-baseline/css-baseline.json
new file mode 100644
index 00000000000000..f2fcbd9425d184
--- /dev/null
+++ b/docs/translations/api-docs-joy/css-baseline/css-baseline.json
@@ -0,0 +1,8 @@
+{
+ "componentDescription": "Kickstart an elegant, consistent, and simple baseline to build upon.",
+ "propDescriptions": {
+ "children": "You can wrap a node.",
+ "disableColorScheme": "Disable color-scheme CSS property.true, the children are in disabled state.",
+ "error": "If true, the children will indicate an error.",
+ "orientation": "The content direction flow.",
+ "required": "If true, the user must specify a value for the input before the owning form can be submitted. If true, the asterisk appears on the FormLabel.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json b/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json
new file mode 100644
index 00000000000000..22d43a6210559c
--- /dev/null
+++ b/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json
@@ -0,0 +1,9 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/form-label/form-label.json b/docs/translations/api-docs-joy/form-label/form-label.json
new file mode 100644
index 00000000000000..5ec77c29cd103a
--- /dev/null
+++ b/docs/translations/api-docs-joy/form-label/form-label.json
@@ -0,0 +1,10 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "required": "The asterisk is added if required=true",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/icon-button/icon-button.json b/docs/translations/api-docs-joy/icon-button/icon-button.json
new file mode 100644
index 00000000000000..94152ed51a1fdf
--- /dev/null
+++ b/docs/translations/api-docs-joy/icon-button/icon-button.json
@@ -0,0 +1,14 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "action": "A ref for imperative actions. It currently only supports focusVisible() action.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disabled": "If true, the component is disabled.",
+ "focusVisibleClassName": "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's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/input/input.json b/docs/translations/api-docs-joy/input/input.json
new file mode 100644
index 00000000000000..ddd21dbb81b993
--- /dev/null
+++ b/docs/translations/api-docs-joy/input/input.json
@@ -0,0 +1,15 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "className": "Class name applied to the root element.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "endDecorator": "Trailing adornment for this input.",
+ "error": "If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.",
+ "fullWidth": "If true, the button will take up the full width of its container.",
+ "size": "The size of the component.",
+ "startDecorator": "Leading adornment for this input.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/linear-progress/linear-progress.json b/docs/translations/api-docs-joy/linear-progress/linear-progress.json
new file mode 100644
index 00000000000000..75e4f89a2d0122
--- /dev/null
+++ b/docs/translations/api-docs-joy/linear-progress/linear-progress.json
@@ -0,0 +1,14 @@
+{
+ "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": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
+ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "thickness": "The thickness of the bar.",
+ "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/link/link.json b/docs/translations/api-docs-joy/link/link.json
new file mode 100644
index 00000000000000..474352de3533d7
--- /dev/null
+++ b/docs/translations/api-docs-joy/link/link.json
@@ -0,0 +1,17 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the link.",
+ "disabled": "If true, the component is disabled.",
+ "endDecorator": "Element placed after the children.",
+ "level": "Applies the theme typography styles.",
+ "overlay": "If true, the ::after psuedo element is added to cover the area of interaction. The parent of the overlay Link should have relative CSS position.",
+ "startDecorator": "Element placed before the children.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "textColor": "The system color.",
+ "underline": "Controls when the link should have an underline.",
+ "variant": "Applies the theme link styles."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list-divider/list-divider.json b/docs/translations/api-docs-joy/list-divider/list-divider.json
new file mode 100644
index 00000000000000..b502a9acd01f5b
--- /dev/null
+++ b/docs/translations/api-docs-joy/list-divider/list-divider.json
@@ -0,0 +1,11 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "inset": "The empty space on the side(s) of the divider in a vertical list.row prop set to true), only inset="gutter" affects the list divider.",
+ "orientation": "The component orientation.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list-item-button/list-item-button.json b/docs/translations/api-docs-joy/list-item-button/list-item-button.json
new file mode 100644
index 00000000000000..679f527c3f87e2
--- /dev/null
+++ b/docs/translations/api-docs-joy/list-item-button/list-item-button.json
@@ -0,0 +1,17 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "action": "A ref for imperative actions. It currently only supports focusVisible() action.",
+ "autoFocus": "If true, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disabled": "If true, the component is disabled.",
+ "focusVisibleClassName": "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's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.",
+ "orientation": "The content direction flow.",
+ "selected": "If true, the component is selected.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list-item-content/list-item-content.json b/docs/translations/api-docs-joy/list-item-content/list-item-content.json
new file mode 100644
index 00000000000000..22d43a6210559c
--- /dev/null
+++ b/docs/translations/api-docs-joy/list-item-content/list-item-content.json
@@ -0,0 +1,9 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json b/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json
new file mode 100644
index 00000000000000..22d43a6210559c
--- /dev/null
+++ b/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json
@@ -0,0 +1,9 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list-item/list-item.json b/docs/translations/api-docs-joy/list-item/list-item.json
new file mode 100644
index 00000000000000..762b4c9e1220b6
--- /dev/null
+++ b/docs/translations/api-docs-joy/list-item/list-item.json
@@ -0,0 +1,15 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "endAction": "The element to display at the end of ListItem.",
+ "nested": "If true, the component can contain NestedList.",
+ "startAction": "The element to display at the start of ListItem.",
+ "sticky": "If true, the component has sticky position (with top = 0).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list-subheader/list-subheader.json b/docs/translations/api-docs-joy/list-subheader/list-subheader.json
new file mode 100644
index 00000000000000..288d4bf5e42493
--- /dev/null
+++ b/docs/translations/api-docs-joy/list-subheader/list-subheader.json
@@ -0,0 +1,12 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sticky": "If true, the component has sticky position (with top = 0).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/list/list.json b/docs/translations/api-docs-joy/list/list.json
new file mode 100644
index 00000000000000..6e66c8d232485d
--- /dev/null
+++ b/docs/translations/api-docs-joy/list/list.json
@@ -0,0 +1,14 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "orientation": "The component orientation.",
+ "size": "The size of the component (affect other nested list* components).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use.",
+ "wrap": "Only for horizontal list. If true, the list sets the flex-wrap to "wrap" and adjust margin to have gap-like behavior (will move to gap in the future)."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/menu-item/menu-item.json b/docs/translations/api-docs-joy/menu-item/menu-item.json
new file mode 100644
index 00000000000000..5fa11e776da12e
--- /dev/null
+++ b/docs/translations/api-docs-joy/menu-item/menu-item.json
@@ -0,0 +1,10 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "selected": "If true, the component is selected.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/menu-list/menu-list.json b/docs/translations/api-docs-joy/menu-list/menu-list.json
new file mode 100644
index 00000000000000..82ea39a8eed6f5
--- /dev/null
+++ b/docs/translations/api-docs-joy/menu-list/menu-list.json
@@ -0,0 +1,12 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "size": "The size of the component (affect other nested list* components because the Menu inherits List).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/menu/menu.json b/docs/translations/api-docs-joy/menu/menu.json
new file mode 100644
index 00000000000000..f7ca05131276a7
--- /dev/null
+++ b/docs/translations/api-docs-joy/menu/menu.json
@@ -0,0 +1,18 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
+ "anchorEl": "An HTML element, virtualElement, or a function that returns either. It's used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disablePortal": "The children will be under the DOM hierarchy of the parent component.",
+ "keepMounted": "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": "Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".Menu inherits List).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/modal-close/modal-close.json b/docs/translations/api-docs-joy/modal-close/modal-close.json
new file mode 100644
index 00000000000000..efa6ca7c99ce0e
--- /dev/null
+++ b/docs/translations/api-docs-joy/modal-close/modal-close.json
@@ -0,0 +1,11 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json b/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json
new file mode 100644
index 00000000000000..60ee88be071508
--- /dev/null
+++ b/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json
@@ -0,0 +1,13 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "layout": "The layout of the dialog",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/modal/modal.json b/docs/translations/api-docs-joy/modal/modal.json
new file mode 100644
index 00000000000000..2a9a7779b25300
--- /dev/null
+++ b/docs/translations/api-docs-joy/modal/modal.json
@@ -0,0 +1,19 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "A single child content element.container will have the portal children appended to it.document.body most of the time.",
+ "disableAutoFocus": "If true, 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 disableAutoFocus prop.true as it makes the modal less accessible to assistive technologies, like screen readers.",
+ "disableEnforceFocus": "If true, the modal will not prevent focus from leaving the modal while open.true as it makes the modal less accessible to assistive technologies, like screen readers.",
+ "disableEscapeKeyDown": "If true, hitting escape will not fire the onClose callback.",
+ "disablePortal": "The children will be under the DOM hierarchy of the parent component.",
+ "disableRestoreFocus": "If true, the modal will not restore focus to previously focused element once modal is hidden or unmounted.",
+ "disableScrollLock": "Disable the scroll lock behavior.",
+ "hideBackdrop": "If true, the backdrop is not rendered.",
+ "keepMounted": "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.",
+ "onClose": "Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.function(event: object, reason: string) => void"escapeKeyDown", "backdropClick", "closeClick".",
+ "open": "If true, the component is shown.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/option/option.json b/docs/translations/api-docs-joy/option/option.json
new file mode 100644
index 00000000000000..f62b73037b5d13
--- /dev/null
+++ b/docs/translations/api-docs-joy/option/option.json
@@ -0,0 +1,14 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disabled": "If true, the component is disabled.",
+ "label": "A text representation of the option's content. Used for keyboard text navigation matching.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "value": "The option value.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/radio-group/radio-group.json b/docs/translations/api-docs-joy/radio-group/radio-group.json
new file mode 100644
index 00000000000000..9c415568daa613
--- /dev/null
+++ b/docs/translations/api-docs-joy/radio-group/radio-group.json
@@ -0,0 +1,19 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "className": "Class name applied to the root element.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "defaultValue": "The default value. Use when the component is not controlled.",
+ "disableIcon": "The radio's disabledIcon prop. If specified, the value is passed down to every radios under this element.",
+ "name": "The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.",
+ "onChange": "Callback fired when a radio button is selected.function(event: React.ChangeEvent<HTMLInputElement>) => voidevent.target.value (string).",
+ "orientation": "The component orientation.",
+ "overlay": "The radio's overlay prop. If specified, the value is passed down to every radios under this element.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "value": "Value of the selected radio button. The DOM API casts this to a string.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/radio/radio.json b/docs/translations/api-docs-joy/radio/radio.json
new file mode 100644
index 00000000000000..ff780a15e0cdfb
--- /dev/null
+++ b/docs/translations/api-docs-joy/radio/radio.json
@@ -0,0 +1,24 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "checked": "If true, the component is checked.",
+ "checkedIcon": "The icon to display when the component is checked.",
+ "className": "Class name applied to the root element.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "defaultChecked": "The default checked state. Use when the component is not controlled.",
+ "disabled": "If true, the component is disabled.",
+ "disableIcon": "If true, the checked icon is removed and the selected variant is applied on the action element instead.",
+ "label": "The label element at the end the radio.",
+ "name": "The name attribute of the input.",
+ "onChange": "Callback fired when the state is changed.function(event: React.ChangeEvent<HTMLInputElement>) => voidevent.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean).",
+ "overlay": "If true, the root element's position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Radio with ListItem component.",
+ "readOnly": "If true, the component is read only.",
+ "required": "If true, the input element is required.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "uncheckedIcon": "The icon to display when the component is not checked.",
+ "value": "The value of the component. The DOM API casts this to a string.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json b/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json
new file mode 100644
index 00000000000000..d643f5af443473
--- /dev/null
+++ b/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json
@@ -0,0 +1,10 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "You can wrap a node.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disableColorScheme": "Disable color-scheme CSS property. For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme For browser support, check out https://caniuse.com/?search=color-scheme",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/select/select.json b/docs/translations/api-docs-joy/select/select.json
new file mode 100644
index 00000000000000..d2a9acb1db0a66
--- /dev/null
+++ b/docs/translations/api-docs-joy/select/select.json
@@ -0,0 +1,23 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "action": "A ref for imperative actions. It currently only supports focusVisible() action.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "defaultValue": "The default selected value. Use when the component is not controlled.",
+ "disabled": "If true, the component is disabled.",
+ "endDecorator": "Trailing adornment for the select.",
+ "getSerializedValue": "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.",
+ "indicator": "The indicator(*) for the select. ________________ [ value * ] ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾",
+ "onChange": "Callback fired when an option is selected.",
+ "onClose": "Triggered when focus leaves the menu and the menu should close.",
+ "placeholder": "Text to show when there is no selected value.",
+ "renderValue": "Function that customizes the rendering of the selected value.",
+ "size": "The size of the component.",
+ "startDecorator": "Leading adornment for the select.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "value": "The selected value. Set to null to deselect all options.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/sheet/sheet.json b/docs/translations/api-docs-joy/sheet/sheet.json
new file mode 100644
index 00000000000000..59ca2abe835ac6
--- /dev/null
+++ b/docs/translations/api-docs-joy/sheet/sheet.json
@@ -0,0 +1,12 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "invertedColors": "If true, the children with an implicit color prop invert their colors to match the component's variant and color.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/slider/slider.json b/docs/translations/api-docs-joy/slider/slider.json
new file mode 100644
index 00000000000000..b9d183eaf41dcf
--- /dev/null
+++ b/docs/translations/api-docs-joy/slider/slider.json
@@ -0,0 +1,105 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "aria-label": "The label of the slider.",
+ "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
+ "classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "defaultValue": "The default value. Use when the component is not controlled.",
+ "disabled": "If true, the component is disabled.",
+ "disableSwap": "If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.",
+ "getAriaLabel": "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.function(index: number) => stringfunction(value: number, index: number) => stringtrue the Slider will be rendered right-to-left (with the lowest value on the right-hand side).",
+ "marks": "Marks indicate predetermined values to which the user can move the slider. If true the marks are spaced according the value of the step prop. If an array, it should contain objects with value and an optional label keys.",
+ "max": "The maximum allowed value of the slider. Should not be equal to min.",
+ "min": "The minimum allowed value of the slider. Should not be equal to max.",
+ "name": "Name attribute of the hidden input element.",
+ "onChange": "Callback function that is fired when the slider's value changed.function(event: Event, value: number | Array<number>, activeThumb: number) => voidevent.target.value (any). Warning: This is a generic event not a change event.mouseup is triggered.function(event: React.SyntheticEvent | Event, value: number | Array<number>) => voidfunction(x: any) => anymin prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.null, the thumb can only be slid onto marks provided with the marks prop.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "tabIndex": "Tab index attribute of the hidden input element.",
+ "track": "The track presentation:normal the track will render a bar representing the slider value. - inverted the track will render a bar representing the remaining slider value. - false the track will render without a bar.",
+ "value": "The value of the slider. For ranged sliders, provide an array with two values.",
+ "valueLabelDisplay": "Controls when the value label is displayed:auto the value label will display when the thumb is hovered or focused. - on will display persistently. - off will never display.",
+ "valueLabelFormat": "The format function the value label's value.marks is provided with at least one label"
+ },
+ "vertical": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "orientation=\"vertical\""
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root and thumb element",
+ "conditions": "disabled={true}"
+ },
+ "dragging": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root",
+ "conditions": "a thumb is being dragged"
+ },
+ "rail": {
+ "description": "Class name applied to {{nodeName}}.",
+ "nodeName": "the rail element"
+ },
+ "track": {
+ "description": "Class name applied to {{nodeName}}.",
+ "nodeName": "the track element"
+ },
+ "trackFalse": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "track={false}"
+ },
+ "trackInverted": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "track=\"inverted\""
+ },
+ "thumb": {
+ "description": "Class name applied to {{nodeName}}.",
+ "nodeName": "the thumb element"
+ },
+ "active": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the thumb element",
+ "conditions": "it's active"
+ },
+ "focusVisible": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the thumb element",
+ "conditions": "keyboard focused"
+ },
+ "mark": {
+ "description": "Class name applied to {{nodeName}}.",
+ "nodeName": "the mark element"
+ },
+ "markActive": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the mark element",
+ "conditions": "active (depending on the value)"
+ },
+ "markLabel": {
+ "description": "Class name applied to {{nodeName}}.",
+ "nodeName": "the mark label element"
+ },
+ "markLabelActive": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the mark label element",
+ "conditions": "active (depending on the value)"
+ }
+ }
+}
diff --git a/docs/translations/api-docs-joy/svg-icon/svg-icon.json b/docs/translations/api-docs-joy/svg-icon/svg-icon.json
new file mode 100644
index 00000000000000..b5ac449f5ca580
--- /dev/null
+++ b/docs/translations/api-docs-joy/svg-icon/svg-icon.json
@@ -0,0 +1,16 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Node passed into the SVG element.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component. You can use the htmlColor prop to apply a color attribute to the SVG element.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "fontSize": "The fontSize applied to the icon. Defaults to 1rem, but can be configure to inherit font size.",
+ "htmlColor": "Applies a color attribute to the SVG element.",
+ "inheritViewBox": "If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored. Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node.",
+ "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent",
+ "viewBox": "Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/switch/switch.json b/docs/translations/api-docs-joy/switch/switch.json
new file mode 100644
index 00000000000000..f188704218e4e5
--- /dev/null
+++ b/docs/translations/api-docs-joy/switch/switch.json
@@ -0,0 +1,18 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "checked": "If true, the component is checked.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "defaultChecked": "The default checked state. Use when the component is not controlled.",
+ "disabled": "If true, the component is disabled.",
+ "endDecorator": "The element that appears at the end of the switch.",
+ "onChange": "Callback fired when the state is changed.function(event: React.ChangeEvent<HTMLInputElement>) => voidevent.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean).",
+ "readOnly": "If true, the component is read only.",
+ "required": "If true, the input element is required.",
+ "size": "The size of the component.",
+ "startDecorator": "The element that appears at the end of the switch.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/tab-list/tab-list.json b/docs/translations/api-docs-joy/tab-list/tab-list.json
new file mode 100644
index 00000000000000..4a9b444f78a340
--- /dev/null
+++ b/docs/translations/api-docs-joy/tab-list/tab-list.json
@@ -0,0 +1,12 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "Used to render icon or text elements inside the TabList if src is not set. This can be an element, or just a string.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/tab-panel/tab-panel.json b/docs/translations/api-docs-joy/tab-panel/tab-panel.json
new file mode 100644
index 00000000000000..86b88be794147b
--- /dev/null
+++ b/docs/translations/api-docs-joy/tab-panel/tab-panel.json
@@ -0,0 +1,11 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/tab/tab.json b/docs/translations/api-docs-joy/tab/tab.json
new file mode 100644
index 00000000000000..813838fdbd4ccc
--- /dev/null
+++ b/docs/translations/api-docs-joy/tab/tab.json
@@ -0,0 +1,15 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "action": "A ref for imperative actions. It currently only supports focusVisible() action.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "disabled": "If true, the component is disabled.",
+ "onChange": "Callback invoked when new value is being set.",
+ "orientation": "The content direction flow.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "value": "You can provide your own value. Otherwise, we fall back to the child position index.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/table/table.json b/docs/translations/api-docs-joy/table/table.json
new file mode 100644
index 00000000000000..f408f6a2b807ee
--- /dev/null
+++ b/docs/translations/api-docs-joy/table/table.json
@@ -0,0 +1,17 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "borderAxis": "The axis to display a border on the table cell.",
+ "children": "Children of the table",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "hoverRow": "If true, the table row will shade on hover.",
+ "noWrap": "If true, the body cells will not wrap, but instead will truncate with a text overflow ellipsis.true the selected tab changes on focus. Otherwise it only changes on activation.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "value": "The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/textarea/textarea.json b/docs/translations/api-docs-joy/textarea/textarea.json
new file mode 100644
index 00000000000000..5fa1846304c5a1
--- /dev/null
+++ b/docs/translations/api-docs-joy/textarea/textarea.json
@@ -0,0 +1,15 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "endDecorator": "Trailing adornment for this input.",
+ "error": "If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.",
+ "maxRows": "Maximum number of rows to display.",
+ "minRows": "Minimum number of rows to display.",
+ "size": "The size of the component.",
+ "startDecorator": "Leading adornment for this input.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/tooltip/tooltip.json b/docs/translations/api-docs-joy/tooltip/tooltip.json
new file mode 100644
index 00000000000000..406157fcf044df
--- /dev/null
+++ b/docs/translations/api-docs-joy/tooltip/tooltip.json
@@ -0,0 +1,33 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "arrow": "If true, adds an arrow to the tooltip.",
+ "children": "Tooltip reference element.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "describeChild": "Set to true if the title acts as an accessible description. By default the title acts as an accessible label for the child.",
+ "direction": "Direction of the text.",
+ "disableFocusListener": "Do not respond to focus-visible events.",
+ "disableHoverListener": "Do not respond to hover events.",
+ "disableInteractive": "Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the leaveDelay is expired.",
+ "disablePortal": "The children will be under the DOM hierarchy of the parent component.",
+ "disableTouchListener": "Do not respond to long press touch events.",
+ "enterDelay": "The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (enterTouchDelay).",
+ "enterNextDelay": "The number of milliseconds to wait before showing the tooltip when one was already recently opened.",
+ "enterTouchDelay": "The number of milliseconds a user must touch the element before showing the tooltip.",
+ "followCursor": "If true, the tooltip follow the cursor over the wrapped element.",
+ "id": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.",
+ "keepMounted": "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.",
+ "leaveDelay": "The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (leaveTouchDelay).",
+ "leaveTouchDelay": "The number of milliseconds after the user stops touching an element before hiding the tooltip.",
+ "modifiers": "Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".function(event: React.SyntheticEvent) => voidfunction(event: React.SyntheticEvent) => voidtrue, the component is shown.",
+ "placement": "Tooltip placement.",
+ "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
+ "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
+ "variant": "The variant to use."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-joy/typography/typography.json b/docs/translations/api-docs-joy/typography/typography.json
new file mode 100644
index 00000000000000..f5359e1c20584f
--- /dev/null
+++ b/docs/translations/api-docs-joy/typography/typography.json
@@ -0,0 +1,18 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "color": "The color of the component. It supports those theme colors that make sense for this component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "endDecorator": "Element placed after the children.",
+ "gutterBottom": "If true, the text will have a bottom margin.",
+ "level": "Applies the theme typography styles.",
+ "levelMapping": "The component maps the variant prop to a range of different HTML element types. For instance, body1 to <h6>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the component prop.",
+ "noWrap": "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.Modal has exited"
- },
- "backdrop": {
- "description": "Class name applied to {{nodeName}}.",
- "nodeName": "the backdrop element"
}
}
}
diff --git a/docs/translations/translations-pt.json b/docs/translations/translations-pt.json
index 4fa672d2233b6d..e9a680e8f2bd20 100644
--- a/docs/translations/translations-pt.json
+++ b/docs/translations/translations-pt.json
@@ -24,7 +24,7 @@
"ruleName": "Nome da regra",
"slots": "Slots",
"spreadHint": "Propriedades do componente {{spreadHintElement}} também estão disponíveis.",
- "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.",
+ "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.",
"type": "Tipo"
},
"albumDescr": "Um álbum responsivo / o leiaute da galeria com ações e um rodapé na página.",
diff --git a/docs/translations/translations-zh.json b/docs/translations/translations-zh.json
index bb7e0db94ab3ae..86425768f17c43 100644
--- a/docs/translations/translations-zh.json
+++ b/docs/translations/translations-zh.json
@@ -24,7 +24,7 @@
"ruleName": "规则名称",
"slots": "插槽",
"spreadHint": "{{spreadHintElement}} 组件的属性也是可用的。",
- "styleOverrides": "在主题中，名称“{{componentStyles.name}}”可用于提供默认属性（props），或者样式覆盖",
+ "styleOverrides": "在主题中，名称“{{componentStyles.name}}”可用于提供默认属性（props），或者样式覆盖",
"type": "类型"
},
"albumDescr": "这是一个包含了 hero 的单元和页脚的响应式相册 / 展览页面布局。",
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 6ad953a97f686b..ea7a9d7fca3bca 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -30,7 +30,7 @@
"ruleName": "Rule name",
"slots": "Slots",
"spreadHint": "Props of the {{spreadHintElement}} component are also available.",
- "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.",
+ "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.",
"type": "Type"
},
"albumDescr": "A responsive album / gallery page layout with a hero unit and footer.",
@@ -374,6 +374,63 @@
"Earlier versions": "Earlier versions",
"/material-ui/migration/migration-v3": "Migration from v3 to v4",
"/material-ui/migration/migration-v0x": "Migration from v0.x to v1",
- "https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav": "Templates"
+ "https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav": "Templates",
+ "/joy-ui/getting-started": "Getting started",
+ "/joy-ui/getting-started/overview": "Overview",
+ "/joy-ui/getting-started/installation": "Installation",
+ "/joy-ui/getting-started/usage": "Usage",
+ "/joy-ui/getting-started/tutorial": "Tutorial",
+ "/joy-ui/getting-started/templates": "Templates",
+ "main-features": "Main features",
+ "/joy-ui/main-features/global-variants": "Global variants",
+ "/joy-ui/main-features/color-inversion": "Color inversion",
+ "/joy-ui/main-features/automatic-adjustment": "Automatic adjustment",
+ "/joy-ui/main-features/dark-mode-optimization": "Dark mode optimization",
+ "/joy-ui/react-": "Components",
+ "/joy-ui/react-autocomplete": "Autocomplete",
+ "/joy-ui/react-button": "Button",
+ "/joy-ui/react-checkbox": "Checkbox",
+ "/joy-ui/react-input": "Input",
+ "/joy-ui/react-radio-button": "Radio Group",
+ "/joy-ui/react-select": "Select",
+ "/joy-ui/react-slider": "Slider",
+ "/joy-ui/react-switch": "Switch",
+ "/joy-ui/react-textarea": "Textarea",
+ "/joy-ui/react-text-field": "Text Field",
+ "/joy-ui/react-aspect-ratio": "Aspect Ratio",
+ "/joy-ui/react-avatar": "Avatar",
+ "/joy-ui/react-badge": "Badge",
+ "/joy-ui/react-chip": "Chip",
+ "/joy-ui/react-divider": "Divider",
+ "/joy-ui/react-list": "List",
+ "/joy-ui/react-table": "Table",
+ "/joy-ui/react-tooltip": "Tooltip",
+ "/joy-ui/react-typography": "Typography",
+ "/joy-ui/react-alert": "Alert",
+ "/joy-ui/react-circular-progress": "Circular Progress",
+ "/joy-ui/react-linear-progress": "Linear Progress",
+ "/joy-ui/react-modal": "Modal",
+ "/joy-ui/react-card": "Card",
+ "/joy-ui/react-sheet": "Sheet",
+ "/joy-ui/react-breadcrumbs": "Breadcrumbs",
+ "/joy-ui/react-link": "Link",
+ "/joy-ui/react-menu": "Menu",
+ "/joy-ui/react-tabs": "Tabs",
+ "/joy-ui/react-grid": "Grid",
+ "/joy-ui/react-stack": "Stack",
+ "/joy-ui/react-css-baseline": "CSS Baseline",
+ "/joy-ui/customization": "Customization",
+ "/joy-ui/customization/approaches": "Approaches",
+ "/joy-ui/customization/dark-mode": "Dark mode",
+ "Theme": "Theme",
+ "/joy-ui/customization/theme-colors": "Colors",
+ "/joy-ui/customization/theme-shadow": "Shadow",
+ "/joy-ui/customization/theme-typography": "Typography",
+ "/joy-ui/customization/themed-components": "Components",
+ "/joy-ui/customization/using-css-variables": "Using CSS variables",
+ "/joy-ui/customization/default-theme-viewer": "Default theme viewer",
+ "/joy-ui/guides": "How-to guides",
+ "/joy-ui/guides/using-joy-ui-and-material-ui-together": "Joy UI and Material UI together",
+ "/joy-ui/guides/using-icon-libraries": "Using icon libraries"
}
}
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 98740a4eb8968e..b83ff9cc593e69 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -324,7 +324,11 @@ const generateApiTranslations = (outputDirectory: string, reactApi: ReactApi) =>
});
};
-const generateApiPage = (outputDirectory: string, reactApi: ReactApi) => {
+const generateApiPage = (
+ apiPagesDirectory: string,
+ translationPagesDirectory: string,
+ reactApi: ReactApi,
+) => {
/**
* Gather the metadata needed for the component's API page.
*/
@@ -369,12 +373,12 @@ const generateApiPage = (outputDirectory: string, reactApi: ReactApi) => {
};
writePrettifiedFile(
- path.resolve(outputDirectory, `${kebabCase(reactApi.name)}.json`),
+ path.resolve(apiPagesDirectory, `${kebabCase(reactApi.name)}.json`),
JSON.stringify(pageContent),
);
writePrettifiedFile(
- path.resolve(outputDirectory, `${kebabCase(reactApi.name)}.js`),
+ path.resolve(apiPagesDirectory, `${kebabCase(reactApi.name)}.js`),
`import * as React from 'react';
import ApiPage from 'docs/src/modules/components/ApiPage';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
@@ -387,7 +391,7 @@ export default function Page(props) {
Page.getInitialProps = () => {
const req = require.context(
- 'docs/translations/api-docs/${kebabCase(reactApi.name)}',
+ '${translationPagesDirectory}/${kebabCase(reactApi.name)}',
false,
/${kebabCase(reactApi.name)}.*.json$/,
);
@@ -565,6 +569,7 @@ const generateComponentApi = async (componentInfo: ComponentInfo, project: TypeS
}
}
});
+
return false;
},
});
@@ -612,8 +617,9 @@ const generateComponentApi = async (componentInfo: ComponentInfo, project: TypeS
reactApi.forwardsRefTo = testInfo.forwardsRefTo;
reactApi.spread = testInfo.spread ?? spread;
reactApi.inheritance = getInheritance(testInfo.inheritComponent);
- reactApi.styles = await parseStyles({ project, componentName: reactApi.name });
reactApi.slots = parseSlots({ project, componentName: reactApi.name, muiName: reactApi.muiName });
+ reactApi.styles = parseStyles({ project, componentName: reactApi.name });
+
if (reactApi.styles.classes.length > 0 && !reactApi.name.endsWith('Unstyled')) {
reactApi.styles.name = reactApi.muiName;
}
@@ -630,8 +636,12 @@ const generateComponentApi = async (componentInfo: ComponentInfo, project: TypeS
if (!skipApiGeneration) {
// Generate pages, json and translations
- generateApiTranslations(path.join(process.cwd(), 'docs/translations/api-docs'), reactApi);
- generateApiPage(apiPagesDirectory, reactApi);
+ const translationPagesDirectory =
+ reactApi.apiPathname.indexOf('/joy-ui/') === 0
+ ? 'docs/translations/api-docs-joy'
+ : 'docs/translations/api-docs';
+ generateApiTranslations(path.join(process.cwd(), translationPagesDirectory), reactApi);
+ generateApiPage(apiPagesDirectory, translationPagesDirectory, reactApi);
// Add comment about demo & api links (including inherited component) to the component file
await annotateComponentDefinition(reactApi);
diff --git a/packages/api-docs-builder/buildApi.ts b/packages/api-docs-builder/buildApi.ts
index 9bb1c732711404..d8b2dfcf5f02e9 100644
--- a/packages/api-docs-builder/buildApi.ts
+++ b/packages/api-docs-builder/buildApi.ts
@@ -13,6 +13,7 @@ import {
getBaseHookInfo,
getSystemComponentInfo,
extractApiPage,
+ getJoyComponentInfo,
} from './buildApiUtils';
import generateComponentApi, {
writePrettifiedFile,
@@ -153,6 +154,20 @@ const SETTINGS: Settings[] = [
getComponentInfo: getBaseComponentInfo,
getHookInfo: getBaseHookInfo,
},
+ {
+ output: {
+ apiManifestPath: path.join(process.cwd(), 'docs/data/joy/pagesApi.js'),
+ },
+ getProjects: () => [
+ createTypeScriptProject({
+ name: 'joy',
+ rootPath: path.join(process.cwd(), 'packages/mui-joy'),
+ entryPointPath: 'src/index.ts',
+ }),
+ ],
+ getApiPages: () => findApiPages('docs/pages/joy-ui/api'),
+ getComponentInfo: getJoyComponentInfo,
+ },
{
output: {
apiManifestPath: path.join(process.cwd(), 'docs/data/system/pagesApi.js'),
@@ -192,8 +207,13 @@ async function run(argv: yargs.ArgumentsCamelCase
maxHeight?: number | string;
/**
* The CSS object-fit value of the first-child.
+ * @default 'cover'
*/
objectFit?: React.CSSProperties['objectFit'];
/**
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index 574b3e5f6ce6d3..7540ab1c62905b 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -50,8 +50,8 @@ type OwnerState = Omit
/**
* The color context for the avatar children.
* It has no effect on the AvatarGroup.
+ * @default 'neutral'
*/
color?: AvatarProps['color'];
/**
@@ -30,6 +31,7 @@ export interface AvatarGroupTypeMap
/**
* The variant context for the avatar children.
* It has no effect on the AvatarGroup.
+ * @default 'soft'
*/
variant?: AvatarProps['variant'];
};
diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
index effb210044ef2d..bef2c36bb465b5 100644
--- a/packages/mui-joy/src/Badge/Badge.tsx
+++ b/packages/mui-joy/src/Badge/Badge.tsx
@@ -133,7 +133,16 @@ const BadgeBadge = styled('span', {
...theme.variants[ownerState.variant!]?.[ownerState.color!],
};
});
-
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://mui.com/joy-ui/react-badge/)
+ *
+ * API:
+ *
+ * - [Badge API](https://mui.com/joy-ui/api/badge/)
+ */
const Badge = React.forwardRef(function Badge(inProps, ref) {
const props = useThemeProps {
fullWidth?: boolean;
/**
* The size of the component.
+ * @default 'md'
*/
size?: OverridableStringUnion<'sm' | 'md' | 'lg', ButtonPropsSizeOverrides>;
/**
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
index bef312a0305d41..11660b507105c6 100644
--- a/packages/mui-joy/src/Card/Card.tsx
+++ b/packages/mui-joy/src/Card/Card.tsx
@@ -85,6 +85,16 @@ const CardRoot = styled('div', {
theme.colorInversion[ownerState.variant!]?.[ownerState.color!],
]);
+/**
+ *
+ * Demos:
+ *
+ * - [Card](https://mui.com/joy-ui/react-card/)
+ *
+ * API:
+ *
+ * - [Card API](https://mui.com/joy-ui/api/card/)
+ */
const Card = React.forwardRef(function Card(inProps, ref) {
const props = useThemeProps {
indeterminate?: boolean;
/**
* The icon to display when the component is indeterminate.
- * @default ({
componentName: 'JoyContainer',
diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.test.js b/packages/mui-joy/src/CssBaseline/CssBaseline.test.js
new file mode 100644
index 00000000000000..ee4567edd3934e
--- /dev/null
+++ b/packages/mui-joy/src/CssBaseline/CssBaseline.test.js
@@ -0,0 +1 @@
+describe(' ;
/**
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index 81328bafc17ce5..46e8bf5bde4055 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -245,7 +245,16 @@ const InputEndDecorator = styled(StyledInputEndDecorator, {
slot: 'EndDecorator',
overridesResolver: (props, styles) => styles.endDecorator,
})({});
-
+/**
+ *
+ * Demos:
+ *
+ * - [Input](https://mui.com/joy-ui/react-input/)
+ *
+ * API:
+ *
+ * - [Input API](https://mui.com/joy-ui/api/input/)
+ */
const Input = React.forwardRef(function Input(inProps, ref) {
const props = useThemeProps {
/**
* If `true`, the `input` will indicate an error.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ * @default false
*/
error?: boolean;
/**
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index e3d04cc0df3572..a17f62157e35a6 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -135,6 +135,14 @@ const LinearProgressRoot = styled('div', {
* If the progress bar is describing the loading progress of a particular region of a page,
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
* attribute to `true` on that region until it has finished loading.
+ *
+ * Demos:
+ *
+ * - [Linear Progress](https://mui.com/joy-ui/react-linear-progres/)
+ *
+ * API:
+ *
+ * - [LinearProgress API](https://mui.com/joy-ui/api/linear-progress/)
*/
const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
const props = useThemeProps styles.root,
})({});
-
+/**
+ *
+ * Demos:
+ *
+ * - [Lists](https://mui.com/joy-ui/react-list/)
+ *
+ * API:
+ *
+ * - [List API](https://mui.com/joy-ui/api/list/)
+ */
const List = React.forwardRef(function List(inProps, ref) {
const nesting = React.useContext(NestedListContext);
const menuContext = React.useContext(MenuUnstyledContext);
@@ -157,7 +166,7 @@ const List = React.forwardRef(function List(inProps, ref) {
component,
className,
children,
- size = inProps.size ?? 'md',
+ size: sizeProp,
orientation = 'vertical',
wrap = false,
variant = 'plain',
@@ -167,6 +176,7 @@ const List = React.forwardRef(function List(inProps, ref) {
} = props;
const { getColor } = useColorInversion(variant);
const color = getColor(inProps.color, colorProp);
+ const size = sizeProp || (inProps.size ?? 'md');
let role;
if (menuContext || selectContext) {
diff --git a/packages/mui-joy/src/List/ListProvider.tsx b/packages/mui-joy/src/List/ListProvider.tsx
index 67202fad1fe0cd..6e5972cdf4c7fe 100644
--- a/packages/mui-joy/src/List/ListProvider.tsx
+++ b/packages/mui-joy/src/List/ListProvider.tsx
@@ -26,7 +26,7 @@ export const scopedVariables = {
'--List-item-marginInline': '0px',
};
-export interface ListProviderProps {
+interface ListProviderProps {
/**
* If `undefined`, there is no effect.
* If `true` or `false`, affects the nested List styles.
@@ -46,13 +46,11 @@ export interface ListProviderProps {
wrap?: boolean;
}
-// internal component
-function ListProvider({
- children,
- nested,
- row = false,
- wrap = false,
-}: React.PropsWithChildren ;
/**
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
index ffad6483edc519..10a7e91846a8cd 100644
--- a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
+++ b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
@@ -23,7 +23,16 @@ const ListItemContentRoot = styled('div', {
flex: '1 1 auto',
minWidth: 0,
});
-
+/**
+ *
+ * Demos:
+ *
+ * - [Lists](https://mui.com/joy-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemContent API](https://mui.com/joy-ui/api/list-item-content/)
+ */
const ListItemContent = React.forwardRef(function ListItemContent(inProps, ref) {
const props = useThemeProps {
- props: P &
- Omit {
color?: OverridableStringUnion {
sx?: SxProps;
/**
* The variant to use.
- * @default 'plain'
+ * @default 'outlined'
*/
variant?: OverridableStringUnion
sx?: SxProps;
/**
* The variant to use.
- * @default 'plain'
+ * @default 'outlined'
*/
variant?: OverridableStringUnion {
/**
* If `true`, the root element's position is set to initial which allows the action area to fill the nearest positioned parent.
* This prop is useful for composing Radio with ListItem component.
- * @default false;
+ * @default false
*/
overlay?: boolean;
/**
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
index 613f6166fd8b62..0b2eb0a2c86ed1 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
+++ b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
@@ -48,7 +48,16 @@ const RadioGroupRoot = styled('div', {
borderRadius: theme.vars.radius.sm,
...theme.variants[ownerState.variant!]?.[ownerState.color!],
}));
-
+/**
+ *
+ * Demos:
+ *
+ * - [Radio Group](https://mui.com/joy-ui/react-radio/)
+ *
+ * API:
+ *
+ * - [RadioGroup API](https://mui.com/joy-ui/api/radio-group/)
+ */
const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {
const props = useThemeProps
component?: React.ElementType;
/**
* The color of the component. It supports those theme colors that make sense for this component.
+ * @default 'neutral'
*/
color?: RadioProps['color'];
/**
@@ -26,6 +27,7 @@ export interface RadioGroupTypeMap
defaultValue?: any;
/**
* The radio's `disabledIcon` prop. If specified, the value is passed down to every radios under this element.
+ * @default false
*/
disableIcon?: boolean;
/**
@@ -35,6 +37,7 @@ export interface RadioGroupTypeMap
name?: string;
/**
* The radio's `overlay` prop. If specified, the value is passed down to every radios under this element.
+ * @default false
*/
overlay?: boolean;
/**
@@ -64,6 +67,7 @@ export interface RadioGroupTypeMap
value?: any;
/**
* The variant to use.
+ * @default 'plain'
*/
variant?: RadioProps['variant'];
};
diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
index e1b1b8d6978a04..55d1b419cb93d1 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
+++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
@@ -60,7 +60,16 @@ const ScopedCssBaselineRoot = styled('div', {
...colorSchemeStyles,
};
});
-
+/**
+ *
+ * Demos:
+ *
+ * - [CSS Baseline](https://mui.com/joy-ui/react-css-baseline/)
+ *
+ * API:
+ *
+ * - [ScopedCssBaseline API](https://mui.com/joy-ui/api/scoped-css-baseline/)
+ */
const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, ref) {
const props = useThemeProps (
inProps: SelectOwnProps {
color?: OverridableStringUnion {
/**
* If `true`, the `input` will indicate an error.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ * @default false
*/
error?: boolean;
/**
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index e99f1fcaf75dc9..a8764dda51c9c5 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -204,7 +204,16 @@ function composeFocusEventHandler(
handler(event);
};
}
-
+/**
+ *
+ * Demos:
+ *
+ * - [Tooltip](https://mui.com/joy-ui/react-tooltip/)
+ *
+ * API:
+ *
+ * - [Tooltip API](https://mui.com/joy-ui/api/tooltip/)
+ */
const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
const props = useThemeProps {
children: React.ReactElement;
/**
* The color of the component. It supports those theme colors that make sense for this component.
- * @default 'primary'
+ * @default 'neutral'
*/
color?: OverridableStringUnion {
title: React.ReactNode;
/**
* The variant to use.
- * @default 'soft'
+ * @default 'solid'
*/
variant?: OverridableStringUnion