Skip to content

Commit 9e6b70a

Browse files
mj12albertatomiks
authored andcommitted
[docs] Fix style prop docs generation (#4406)
1 parent 554ceb1 commit 9e6b70a

447 files changed

Lines changed: 10757 additions & 385 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "AccordionHeader",
3+
"description": "A heading that labels the corresponding panel.\nRenders an `<h3>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: Accordion.Header.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((state: Accordion.Header.State) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: Accordion.Header.State) => CSSProperties | undefined)",
12+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
13+
"detailedType": "| React.CSSProperties\n| ((\n state: Accordion.Header.State,\n ) => CSSProperties | undefined)\n| undefined"
14+
},
15+
"render": {
16+
"type": "ReactElement | ((props: HTMLProps, state: Accordion.Header.State) => ReactElement)",
17+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
18+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Accordion.Header.State,\n ) => ReactElement)"
19+
}
20+
},
21+
"dataAttributes": {
22+
"data-open": {
23+
"description": "Present when the accordion item is open."
24+
},
25+
"data-disabled": {
26+
"description": "Present when the accordion item is disabled."
27+
},
28+
"data-index": {
29+
"description": "Indicates the index of the accordion item.",
30+
"type": "number"
31+
}
32+
},
33+
"cssVariables": {}
34+
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "AccordionItem",
3+
"description": "Groups an accordion header with the corresponding panel.\nRenders a `<div>` element.",
4+
"props": {
5+
"value": {
6+
"type": "any",
7+
"description": "A unique value that identifies this accordion item.\nIf no value is provided, a unique ID will be generated automatically.\nUse when controlling the accordion programmatically, or to set an initial\nopen state.",
8+
"example": "```tsx\n<Accordion.Root value={['a']}>\n <Accordion.Item value=\"a\" /> // initially open\n <Accordion.Item value=\"b\" /> // initially closed\n</Accordion.Root>\n```"
9+
},
10+
"onOpenChange": {
11+
"type": "((open: boolean, eventDetails: Accordion.Item.ChangeEventDetails) => void)",
12+
"description": "Event handler called when the panel is opened or closed.",
13+
"detailedType": "| ((\n open: boolean,\n eventDetails: Accordion.Item.ChangeEventDetails,\n ) => void)\n| undefined"
14+
},
15+
"disabled": {
16+
"type": "boolean",
17+
"default": "false",
18+
"description": "Whether the component should ignore user interaction.",
19+
"detailedType": "boolean | undefined"
20+
},
21+
"className": {
22+
"type": "string | ((state: Accordion.Item.State) => string | undefined)",
23+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
24+
"detailedType": "| string\n| ((state: Accordion.Item.State) => string | undefined)"
25+
},
26+
"style": {
27+
"type": "CSSProperties | ((state: Accordion.Item.State) => CSSProperties | undefined)",
28+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
29+
"detailedType": "| React.CSSProperties\n| ((\n state: Accordion.Item.State,\n ) => CSSProperties | undefined)\n| undefined"
30+
},
31+
"render": {
32+
"type": "ReactElement | ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)",
33+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
34+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Accordion.Item.State,\n ) => ReactElement)"
35+
}
36+
},
37+
"dataAttributes": {
38+
"data-open": {
39+
"description": "Present when the accordion item is open."
40+
},
41+
"data-disabled": {
42+
"description": "Present when the accordion item is disabled."
43+
},
44+
"data-index": {
45+
"description": "Indicates the index of the accordion item.",
46+
"type": "number"
47+
}
48+
},
49+
"cssVariables": {}
50+
}
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "AccordionPanel",
3+
"description": "A collapsible panel with the accordion item contents.\nRenders a `<div>` element.",
4+
"props": {
5+
"hiddenUntilFound": {
6+
"type": "boolean",
7+
"default": "false",
8+
"description": "Allows the browser’s built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM.",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"className": {
12+
"type": "string | ((state: Accordion.Panel.State) => string | undefined)",
13+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
14+
"detailedType": "| string\n| ((state: Accordion.Panel.State) => string | undefined)"
15+
},
16+
"style": {
17+
"type": "CSSProperties | ((state: Accordion.Panel.State) => CSSProperties | undefined)",
18+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
19+
"detailedType": "| React.CSSProperties\n| ((\n state: Accordion.Panel.State,\n ) => CSSProperties | undefined)\n| undefined"
20+
},
21+
"keepMounted": {
22+
"type": "boolean",
23+
"default": "false",
24+
"description": "Whether to keep the element in the DOM while the panel is closed.\nThis prop is ignored when `hiddenUntilFound` is used.",
25+
"detailedType": "boolean | undefined"
26+
},
27+
"render": {
28+
"type": "ReactElement | ((props: HTMLProps, state: Accordion.Panel.State) => ReactElement)",
29+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
30+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Accordion.Panel.State,\n ) => ReactElement)"
31+
}
32+
},
33+
"dataAttributes": {
34+
"data-open": {
35+
"description": "Present when the accordion panel is open."
36+
},
37+
"data-orientation": {
38+
"description": "Indicates the orientation of the accordion."
39+
},
40+
"data-disabled": {
41+
"description": "Present when the accordion item is disabled."
42+
},
43+
"data-index": {
44+
"description": "Indicates the index of the accordion item.",
45+
"type": "number"
46+
},
47+
"data-starting-style": {
48+
"description": "Present when the panel is animating in."
49+
},
50+
"data-ending-style": {
51+
"description": "Present when the panel is animating out."
52+
}
53+
},
54+
"cssVariables": {
55+
"--accordion-panel-height": {
56+
"description": "The accordion panel's height.",
57+
"type": "number"
58+
},
59+
"--accordion-panel-width": {
60+
"description": "The accordion panel's width.",
61+
"type": "number"
62+
}
63+
}
64+
}
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
{
2+
"name": "AccordionRoot",
3+
"description": "Groups all parts of the accordion.\nRenders a `<div>` element.",
4+
"props": {
5+
"defaultValue": {
6+
"type": "Value[]",
7+
"description": "The uncontrolled value of the item(s) that should be initially expanded.\n\nTo render a controlled accordion, use the `value` prop instead.",
8+
"detailedType": "Value[] | undefined"
9+
},
10+
"value": {
11+
"type": "Value[]",
12+
"description": "The controlled value of the item(s) that should be expanded.\n\nTo render an uncontrolled accordion, use the `defaultValue` prop instead.",
13+
"detailedType": "Value[] | undefined"
14+
},
15+
"onValueChange": {
16+
"type": "((value: Value[], eventDetails: Accordion.Root.ChangeEventDetails) => void)",
17+
"description": "Event handler called when an accordion item is expanded or collapsed.\nProvides the new value as an argument.",
18+
"detailedType": "| ((\n value: Value[],\n eventDetails: Accordion.Root.ChangeEventDetails,\n ) => void)\n| undefined"
19+
},
20+
"hiddenUntilFound": {
21+
"type": "boolean",
22+
"default": "false",
23+
"description": "Allows the browser’s built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM.",
24+
"detailedType": "boolean | undefined"
25+
},
26+
"loopFocus": {
27+
"type": "boolean",
28+
"default": "true",
29+
"description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys.",
30+
"detailedType": "boolean | undefined"
31+
},
32+
"multiple": {
33+
"type": "boolean",
34+
"default": "false",
35+
"description": "Whether multiple items can be open at the same time.",
36+
"detailedType": "boolean | undefined"
37+
},
38+
"disabled": {
39+
"type": "boolean",
40+
"default": "false",
41+
"description": "Whether the component should ignore user interaction.",
42+
"detailedType": "boolean | undefined"
43+
},
44+
"orientation": {
45+
"type": "Orientation",
46+
"default": "'vertical'",
47+
"description": "The visual orientation of the accordion.\nControls whether roving focus uses left/right or up/down arrow keys.",
48+
"detailedType": "'horizontal' | 'vertical' | undefined"
49+
},
50+
"className": {
51+
"type": "string | ((state: Accordion.Root.State<Value>) => string | undefined)",
52+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
53+
"detailedType": "| string\n| ((\n state: Accordion.Root.State<Value>,\n ) => string | undefined)"
54+
},
55+
"style": {
56+
"type": "CSSProperties | ((state: Accordion.Root.State<Value>) => CSSProperties | undefined)",
57+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
58+
"detailedType": "| React.CSSProperties\n| ((\n state: Accordion.Root.State<Value>,\n ) => CSSProperties | undefined)\n| undefined"
59+
},
60+
"keepMounted": {
61+
"type": "boolean",
62+
"default": "false",
63+
"description": "Whether to keep the element in the DOM while the panel is closed.\nThis prop is ignored when `hiddenUntilFound` is used.",
64+
"detailedType": "boolean | undefined"
65+
},
66+
"render": {
67+
"type": "ReactElement | ((props: HTMLProps, state: Accordion.Root.State<Value>) => ReactElement)",
68+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
69+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Accordion.Root.State<Value>,\n ) => ReactElement)"
70+
}
71+
},
72+
"dataAttributes": {
73+
"data-orientation": {
74+
"description": "Indicates the orientation of the accordion."
75+
},
76+
"data-disabled": {
77+
"description": "Present when the accordion is disabled."
78+
}
79+
},
80+
"cssVariables": {}
81+
}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "AccordionTrigger",
3+
"description": "A button that opens and closes the corresponding panel.\nRenders a `<button>` element.",
4+
"props": {
5+
"nativeButton": {
6+
"type": "boolean",
7+
"default": "true",
8+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"className": {
12+
"type": "string | ((state: Accordion.Trigger.State) => string | undefined)",
13+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
14+
"detailedType": "| string\n| ((state: Accordion.Trigger.State) => string | undefined)"
15+
},
16+
"style": {
17+
"type": "CSSProperties | ((state: Accordion.Trigger.State) => CSSProperties | undefined)",
18+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
19+
"detailedType": "| React.CSSProperties\n| ((\n state: Accordion.Trigger.State,\n ) => CSSProperties | undefined)\n| undefined"
20+
},
21+
"render": {
22+
"type": "ReactElement | ((props: HTMLProps, state: Accordion.Trigger.State) => ReactElement)",
23+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
24+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Accordion.Trigger.State,\n ) => ReactElement)"
25+
}
26+
},
27+
"dataAttributes": {
28+
"data-panel-open": {
29+
"description": "Present when the accordion panel is open."
30+
},
31+
"data-disabled": {
32+
"description": "Present when the accordion item is disabled."
33+
}
34+
},
35+
"cssVariables": {}
36+
}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "AvatarFallback",
3+
"description": "Rendered when the image fails to load or when no image is provided.\nRenders a `<span>` element.",
4+
"props": {
5+
"delay": {
6+
"type": "number",
7+
"description": "How long to wait before showing the fallback. Specified in milliseconds.",
8+
"detailedType": "number | undefined"
9+
},
10+
"className": {
11+
"type": "string | ((state: Avatar.Fallback.State) => string | undefined)",
12+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
13+
"detailedType": "| string\n| ((state: Avatar.Fallback.State) => string | undefined)"
14+
},
15+
"style": {
16+
"type": "CSSProperties | ((state: Avatar.Fallback.State) => CSSProperties | undefined)",
17+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
18+
"detailedType": "| React.CSSProperties\n| ((\n state: Avatar.Fallback.State,\n ) => CSSProperties | undefined)\n| undefined"
19+
},
20+
"render": {
21+
"type": "ReactElement | ((props: HTMLProps, state: Avatar.Fallback.State) => ReactElement)",
22+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
23+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Avatar.Fallback.State,\n ) => ReactElement)"
24+
}
25+
},
26+
"dataAttributes": {},
27+
"cssVariables": {}
28+
}
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "AvatarImage",
3+
"description": "The image to be displayed in the avatar.\nRenders an `<img>` element.",
4+
"props": {
5+
"onLoadingStatusChange": {
6+
"type": "((status: ImageLoadingStatus) => void)",
7+
"description": "Callback fired when the loading status changes.",
8+
"detailedType": "((status: ImageLoadingStatus) => void) | undefined"
9+
},
10+
"className": {
11+
"type": "string | ((state: Avatar.Image.State) => string | undefined)",
12+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
13+
"detailedType": "| string\n| ((state: Avatar.Image.State) => string | undefined)"
14+
},
15+
"style": {
16+
"type": "CSSProperties | ((state: Avatar.Image.State) => CSSProperties | undefined)",
17+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
18+
"detailedType": "| React.CSSProperties\n| ((state: Avatar.Image.State) => CSSProperties | undefined)\n| undefined"
19+
},
20+
"render": {
21+
"type": "ReactElement | ((props: HTMLProps, state: Avatar.Image.State) => ReactElement)",
22+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
23+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Avatar.Image.State,\n ) => ReactElement)"
24+
}
25+
},
26+
"dataAttributes": {
27+
"data-starting-style": {
28+
"description": "Present when the image is animating in."
29+
},
30+
"data-ending-style": {
31+
"description": "Present when the image is animating out."
32+
}
33+
},
34+
"cssVariables": {}
35+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "AvatarRoot",
3+
"description": "Displays a user's profile picture, initials, or fallback icon.\nRenders a `<span>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: Avatar.Root.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((state: Avatar.Root.State) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: Avatar.Root.State) => CSSProperties | undefined)",
12+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
13+
"detailedType": "| React.CSSProperties\n| ((state: Avatar.Root.State) => CSSProperties | undefined)\n| undefined"
14+
},
15+
"render": {
16+
"type": "ReactElement | ((props: HTMLProps, state: Avatar.Root.State) => ReactElement)",
17+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
18+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Avatar.Root.State,\n ) => ReactElement)"
19+
}
20+
},
21+
"dataAttributes": {},
22+
"cssVariables": {}
23+
}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "Button",
3+
"description": "A button component that can be used to trigger actions.\nRenders a `<button>` element.",
4+
"props": {
5+
"focusableWhenDisabled": {
6+
"type": "boolean",
7+
"default": "false",
8+
"description": "Whether the button should be focusable when disabled.",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"nativeButton": {
12+
"type": "boolean",
13+
"default": "true",
14+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
15+
"detailedType": "boolean | undefined"
16+
},
17+
"className": {
18+
"type": "string | ((state: Button.State) => string | undefined)",
19+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
20+
"detailedType": "| string\n| ((state: Button.State) => string | undefined)"
21+
},
22+
"style": {
23+
"type": "CSSProperties | ((state: Button.State) => CSSProperties | undefined)",
24+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component’s state.",
25+
"detailedType": "| React.CSSProperties\n| ((state: Button.State) => CSSProperties | undefined)\n| undefined"
26+
},
27+
"render": {
28+
"type": "ReactElement | ((props: HTMLProps, state: Button.State) => ReactElement)",
29+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
30+
"detailedType": "| ReactElement\n| ((props: HTMLProps, state: Button.State) => ReactElement)"
31+
}
32+
},
33+
"dataAttributes": {
34+
"data-disabled": {
35+
"description": "Present when the button is disabled."
36+
}
37+
},
38+
"cssVariables": {}
39+
}

0 commit comments

Comments
 (0)