@imfusion/web-ui 0.10.0 → 0.10.1-dev.11.g9f5bc06e

package/src/docgen/doc.gen.json

@@ -1517,6 +1517,828 @@
     },
     "subComponents": []
   },
+  "dialog": {
+    "root": {
+      "name": "Dialog.Root",
+      "description": "Dialog.Root — container that manages open/closed state.",
+      "props": [
+        {
+          "name": "actionsRef",
+          "required": false,
+          "type": "RefObject<DialogRootActions | null>",
+          "defaultValue": null,
+          "description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the dialog imperatively when called."
+        },
+        {
+          "name": "children",
+          "required": false,
+          "type": "ReactNode | PayloadChildRenderFunction<Payload>",
+          "defaultValue": null,
+          "description": "The content of the dialog.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger."
+        },
+        {
+          "name": "defaultOpen",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
+        },
+        {
+          "name": "defaultTriggerId",
+          "required": false,
+          "type": "string | null",
+          "defaultValue": null,
+          "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."
+        },
+        {
+          "name": "disablePointerDismissal",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."
+        },
+        {
+          "name": "handle",
+          "required": false,
+          "type": "DialogHandle<Payload>",
+          "defaultValue": null,
+          "description": "A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."
+        },
+        {
+          "name": "modal",
+          "required": false,
+          "type": "boolean | \"trap-focus\"",
+          "defaultValue": "true",
+          "description": "Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."
+        },
+        {
+          "name": "onOpenChange",
+          "required": false,
+          "type": "(\n  open: boolean,\n  eventDetails: DialogRootChangeEventDetails\n) => void",
+          "defaultValue": null,
+          "description": "Event handler called when the dialog is opened or closed."
+        },
+        {
+          "name": "onOpenChangeComplete",
+          "required": false,
+          "type": "(open: boolean) => void",
+          "defaultValue": null,
+          "description": "Event handler called after any animations complete when the dialog is opened or closed."
+        },
+        {
+          "name": "open",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": "Whether the dialog is currently open."
+        },
+        {
+          "name": "triggerId",
+          "required": false,
+          "type": "string | null",
+          "defaultValue": null,
+          "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Dialog.Backdrop",
+        "description": "Dialog.Backdrop — flat dark overlay that dims the page behind the dialog.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogBackdropState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "forceRender",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the backdrop is forced to render even when nested."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogBackdropState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogBackdropState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Body",
+        "description": "Dialog.Body — the scrolling region between header and footer, a ScrollArea with the library's thumb and edge fades.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ScrollAreaRootState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "orientation",
+            "required": false,
+            "type": "\"none\" | \"both\" | \"horizontal\" | \"vertical\"",
+            "defaultValue": "vertical",
+            "description": "Which scrollbars to render. `both` also adds the Corner; `none` scrolls and fades without a visible bar."
+          },
+          {
+            "name": "overflowEdgeThreshold",
+            "required": false,
+            "type": "| number\n| Partial<{\n    xStart: number;\n    xEnd: number;\n    yStart: number;\n    yEnd: number;\n  }>",
+            "defaultValue": "0",
+            "description": "The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaRootState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaRootState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Close",
+        "description": "Dialog.Close — button that closes the dialog. With no `children` and no `render` it renders the library's ghost close\nbutton (an × icon labelled \"Close\"); otherwise render your own `Button`.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogCloseState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "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 (for example, `<div>`)."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogCloseState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogCloseState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Description",
+        "description": "Dialog.Description — supplementary paragraph that describes the dialog for screen readers, set as `Typo.P`.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: DialogDescriptionState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogDescriptionState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogDescriptionState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Footer",
+        "description": "Dialog.Footer — row of actions pinned to the bottom of the popup.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Header",
+        "description": "Dialog.Header — band at the top of the popup that holds the title, description, and close button.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "HeaderVariant",
+            "defaultValue": "main",
+            "description": "Colour of the header band. On `primary` the title, description, and close button turn light."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Inline",
+        "description": "Dialog.Inline — like Dialog.Simple, but the trigger is text inside a sentence.",
+        "props": [
+          {
+            "name": "actions",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the footer, usually buttons. The footer renders only when this is set."
+          },
+          {
+            "name": "actionsRef",
+            "required": false,
+            "type": "RefObject<DialogRootActions | null>",
+            "defaultValue": null,
+            "description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the dialog imperatively when called."
+          },
+          {
+            "name": "children",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the body."
+          },
+          {
+            "name": "defaultOpen",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
+          },
+          {
+            "name": "defaultTriggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."
+          },
+          {
+            "name": "description",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Line of context under the title."
+          },
+          {
+            "name": "disablePointerDismissal",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."
+          },
+          {
+            "name": "eyebrow",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Short uppercase label above the title."
+          },
+          {
+            "name": "handle",
+            "required": false,
+            "type": "DialogHandle<Payload>",
+            "defaultValue": null,
+            "description": "A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."
+          },
+          {
+            "name": "headerVariant",
+            "required": false,
+            "type": "HeaderVariant",
+            "defaultValue": "main",
+            "description": "Colour of the header band."
+          },
+          {
+            "name": "modal",
+            "required": false,
+            "type": "boolean | \"trap-focus\"",
+            "defaultValue": "true",
+            "description": "Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."
+          },
+          {
+            "name": "onOpenChange",
+            "required": false,
+            "type": "(\n  open: boolean,\n  eventDetails: DialogRootChangeEventDetails\n) => void",
+            "defaultValue": null,
+            "description": "Event handler called when the dialog is opened or closed."
+          },
+          {
+            "name": "onOpenChangeComplete",
+            "required": false,
+            "type": "(open: boolean) => void",
+            "defaultValue": null,
+            "description": "Event handler called after any animations complete when the dialog is opened or closed."
+          },
+          {
+            "name": "open",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": null,
+            "description": "Whether the dialog is currently open."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"full\"",
+            "defaultValue": "md",
+            "description": "Width of the window."
+          },
+          {
+            "name": "status",
+            "required": false,
+            "type": "| NonNullable<\n    \"info\" | \"positive\" | \"warning\" | \"negative\" | null\n  >\n| undefined",
+            "defaultValue": null,
+            "description": "Adds a `Dialog.Status` with this variant at the start of the popup."
+          },
+          {
+            "name": "title",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Heading of the dialog."
+          },
+          {
+            "name": "trigger",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Text of the trigger, set as an inline term inside running prose."
+          },
+          {
+            "name": "triggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Popup",
+        "description": "Dialog.Popup — the window. Holds Header, Body, and Footer, or any free content.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogPopupState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "finalFocus",
+            "required": false,
+            "type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n    closeType: InteractionType\n  ) => boolean | void | HTMLElement | null)",
+            "defaultValue": null,
+            "description": "Determines the element to focus when the dialog is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."
+          },
+          {
+            "name": "initialFocus",
+            "required": false,
+            "type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n    openType: InteractionType\n  ) => boolean | void | HTMLElement | null)",
+            "defaultValue": null,
+            "description": "Determines the element to focus when the dialog is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the dialog\nis opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogPopupState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"full\"",
+            "defaultValue": "md",
+            "description": "Width of the window. `full` fills the screen minus a margin."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogPopupState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Portal",
+        "description": "Dialog.Portal — renders backdrop and popup in a portal outside the main document flow.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogPortalState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "container",
+            "required": false,
+            "type": "| HTMLElement\n| ShadowRoot\n| RefObject<HTMLElement | ShadowRoot | null>\n| null",
+            "defaultValue": null,
+            "description": "A parent element to render the portal element into."
+          },
+          {
+            "name": "keepMounted",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogPortalState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogPortalState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Simple",
+        "description": "Dialog.Simple — pre-composed dialog: trigger, header with title, description, optional status and close button, a\nscrolling body, and an optional footer. Root props pass through.",
+        "props": [
+          {
+            "name": "actions",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the footer, usually buttons. The footer renders only when this is set."
+          },
+          {
+            "name": "actionsRef",
+            "required": false,
+            "type": "RefObject<DialogRootActions | null>",
+            "defaultValue": null,
+            "description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the dialog imperatively when called."
+          },
+          {
+            "name": "children",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the body."
+          },
+          {
+            "name": "defaultOpen",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
+          },
+          {
+            "name": "defaultTriggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."
+          },
+          {
+            "name": "description",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Line of context under the title."
+          },
+          {
+            "name": "disablePointerDismissal",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."
+          },
+          {
+            "name": "eyebrow",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Short uppercase label above the title."
+          },
+          {
+            "name": "handle",
+            "required": false,
+            "type": "DialogHandle<Payload>",
+            "defaultValue": null,
+            "description": "A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."
+          },
+          {
+            "name": "headerVariant",
+            "required": false,
+            "type": "HeaderVariant",
+            "defaultValue": "main",
+            "description": "Colour of the header band."
+          },
+          {
+            "name": "modal",
+            "required": false,
+            "type": "boolean | \"trap-focus\"",
+            "defaultValue": "true",
+            "description": "Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."
+          },
+          {
+            "name": "onOpenChange",
+            "required": false,
+            "type": "(\n  open: boolean,\n  eventDetails: DialogRootChangeEventDetails\n) => void",
+            "defaultValue": null,
+            "description": "Event handler called when the dialog is opened or closed."
+          },
+          {
+            "name": "onOpenChangeComplete",
+            "required": false,
+            "type": "(open: boolean) => void",
+            "defaultValue": null,
+            "description": "Event handler called after any animations complete when the dialog is opened or closed."
+          },
+          {
+            "name": "open",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": null,
+            "description": "Whether the dialog is currently open."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"full\"",
+            "defaultValue": "md",
+            "description": "Width of the window."
+          },
+          {
+            "name": "status",
+            "required": false,
+            "type": "| NonNullable<\n    \"info\" | \"positive\" | \"warning\" | \"negative\" | null\n  >\n| undefined",
+            "defaultValue": null,
+            "description": "Adds a `Dialog.Status` with this variant at the start of the popup."
+          },
+          {
+            "name": "title",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Heading of the dialog."
+          },
+          {
+            "name": "trigger",
+            "required": false,
+            "type": "ReactElement<\n  unknown,\n  string | JSXElementConstructor<any>\n>",
+            "defaultValue": null,
+            "description": "Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog."
+          },
+          {
+            "name": "triggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Status",
+        "description": "Dialog.Status — a tinted column at the start of the popup, spanning its full height, that marks the dialog's\nstatus with the variant's glyph. Place it first inside `Dialog.Popup`. Pass children to replace the glyph.\nDecorative (`aria-hidden`); the title carries the status.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"info\"\n| \"positive\"\n| \"warning\"\n| \"negative\"\n| null",
+            "defaultValue": "info",
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Title",
+        "description": "Dialog.Title — heading that names the dialog for screen readers, set as `Typo.H2`. Light on a `primary` header.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogTitleState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogTitleState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogTitleState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Trigger",
+        "description": "Dialog.Trigger — button that opens the dialog. `inline` styles it as a dashed-underlined term inside running text.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogTriggerState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "handle",
+            "required": false,
+            "type": "DialogHandle<unknown>",
+            "defaultValue": null,
+            "description": "A handle to associate the trigger with a dialog.\nCan be created with the Dialog.createHandle() method."
+          },
+          {
+            "name": "id",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop)."
+          },
+          {
+            "name": "inline",
+            "required": false,
+            "type": "boolean | null",
+            "defaultValue": "false",
+            "description": ""
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "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 (for example, `<div>`)."
+          },
+          {
+            "name": "payload",
+            "required": false,
+            "type": "unknown",
+            "defaultValue": null,
+            "description": "A payload to pass to the dialog when it is opened."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogTriggerState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogTriggerState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Viewport",
+        "description": "Dialog.Viewport — full-screen container that centres the popup.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogViewportState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogViewportState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogViewportState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "drawer": {
     "root": {
       "name": "Drawer.Root",
@@ -5356,6 +6178,283 @@
     },
     "subComponents": []
   },
+  "scroll-area": {
+    "root": {
+      "name": "ScrollArea.Root",
+      "description": "ScrollArea.Root — groups the viewport and its scrollbars. Give it a height or max-height.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ScrollAreaRootState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "overflowEdgeThreshold",
+          "required": false,
+          "type": "| number\n| Partial<{\n    xStart: number;\n    xEnd: number;\n    yStart: number;\n    yEnd: number;\n  }>",
+          "defaultValue": "0",
+          "description": "The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaRootState>",
+          "defaultValue": null,
+          "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."
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ScrollAreaRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "ScrollArea.Auto",
+        "description": "ScrollArea.Auto — Root, Viewport, Content, and the scrollbars for `orientation`, around `children`.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ScrollAreaRootState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "orientation",
+            "required": false,
+            "type": "\"none\" | \"both\" | \"horizontal\" | \"vertical\"",
+            "defaultValue": "vertical",
+            "description": "Which scrollbars to render. `both` also adds the Corner; `none` scrolls and fades without a visible bar."
+          },
+          {
+            "name": "overflowEdgeThreshold",
+            "required": false,
+            "type": "| number\n| Partial<{\n    xStart: number;\n    xEnd: number;\n    yStart: number;\n    yEnd: number;\n  }>",
+            "defaultValue": "0",
+            "description": "The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaRootState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaRootState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Content",
+        "description": "ScrollArea.Content — wraps the scrolled content so the viewport can measure it.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaContentState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaContentState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaContentState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Corner",
+        "description": "ScrollArea.Corner — the square where a vertical and a horizontal scrollbar meet.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaCornerState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaCornerState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaCornerState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Scrollbar",
+        "description": "ScrollArea.Scrollbar — overlay bar that shows while the area is hovered or scrolling.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaScrollbarState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "keepMounted",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to keep the HTML element in the DOM when the viewport isn't scrollable."
+          },
+          {
+            "name": "orientation",
+            "required": false,
+            "type": "\"horizontal\" | \"vertical\"",
+            "defaultValue": "vertical",
+            "description": "Whether the scrollbar controls vertical or horizontal scroll."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaScrollbarState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaScrollbarState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Thumb",
+        "description": "ScrollArea.Thumb — the draggable part of the scrollbar.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaThumbState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaThumbState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaThumbState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Viewport",
+        "description": "ScrollArea.Viewport — the scrolling box. It fades its content out at each edge with more to scroll.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaViewportState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaViewportState>",
+            "defaultValue": null,
+            "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."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaViewportState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "select": {
     "root": {
       "name": "Select.Root",