e7da97194a
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s
5438 lines
226 KiB
JSON
5438 lines
226 KiB
JSON
[
|
|
{
|
|
"name": "IconButton",
|
|
"entryPoint": "twenty-ui/components",
|
|
"slug": "input/icon-button",
|
|
"props": [
|
|
{
|
|
"name": "aria-label",
|
|
"type": "string",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Required accessible name describing the action."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Icon content. Decorative and hidden from assistive technology."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: ButtonState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"accent\" | \"danger\" | \"success\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Semantic color of the button."
|
|
},
|
|
{
|
|
"name": "elevated",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Adds a shadow to the button."
|
|
},
|
|
{
|
|
"name": "focusableWhenDisabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the button should be focusable when disabled."
|
|
},
|
|
{
|
|
"name": "loading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Shows a loading indicator and disables activation while preserving the button width."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Square button size: `sm` (24px) or `md` (32px)."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: ButtonState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "tooltip",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Text displayed when hovering or focusing the button."
|
|
},
|
|
{
|
|
"name": "tooltipDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "1000",
|
|
"description": "Delay before showing the tooltip."
|
|
},
|
|
{
|
|
"name": "tooltipOffset",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "5",
|
|
"description": "Distance in pixels between the button and the tooltip."
|
|
},
|
|
{
|
|
"name": "tooltipPlace",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
"required": false,
|
|
"defaultValue": "bottom",
|
|
"description": "Preferred placement of the tooltip relative to the button."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Visual treatment of the button surface."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "MainButton",
|
|
"entryPoint": "twenty-ui/components",
|
|
"slug": "input/main-button",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: ButtonState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"accent\" | \"danger\" | \"success\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Semantic color of the button."
|
|
},
|
|
{
|
|
"name": "elevated",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Adds a shadow to the button."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative content displayed after the label."
|
|
},
|
|
{
|
|
"name": "focusableWhenDisabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the button should be focusable when disabled."
|
|
},
|
|
{
|
|
"name": "fullWidth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Expands the button to fill its container width."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut hints displayed on non-mobile screens."
|
|
},
|
|
{
|
|
"name": "loading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Shows a loading indicator and disables activation while preserving the button width."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Button height: `sm` (24px) or `md` (32px)."
|
|
},
|
|
{
|
|
"name": "soon",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Displays a coming-soon label and disables activation."
|
|
},
|
|
{
|
|
"name": "soonLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Text for the coming-soon label."
|
|
},
|
|
{
|
|
"name": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative content displayed before the label."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: ButtonState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "solid",
|
|
"description": "Visual treatment of the button surface."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "LightButton",
|
|
"entryPoint": "twenty-ui/components",
|
|
"slug": "input/light-button",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: ButtonState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"accent\" | \"danger\" | \"success\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Semantic color of the button."
|
|
},
|
|
{
|
|
"name": "elevated",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Adds a shadow to the button."
|
|
},
|
|
{
|
|
"name": "emphasis",
|
|
"type": "\"standard\" | \"subtle\"",
|
|
"required": false,
|
|
"defaultValue": "standard",
|
|
"description": "Uses secondary or tertiary text for neutral buttons. Semantic colors and solid surfaces retain their contrast treatment."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative content displayed after the label."
|
|
},
|
|
{
|
|
"name": "focusableWhenDisabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the button should be focusable when disabled."
|
|
},
|
|
{
|
|
"name": "fullWidth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Expands the button to fill its container width."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut hints displayed on non-mobile screens."
|
|
},
|
|
{
|
|
"name": "loading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Shows a loading indicator and disables activation while preserving the button width."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "sm",
|
|
"description": "Button height: `sm` (24px) or `md` (32px)."
|
|
},
|
|
{
|
|
"name": "soon",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Displays a coming-soon label and disables activation."
|
|
},
|
|
{
|
|
"name": "soonLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Text for the coming-soon label."
|
|
},
|
|
{
|
|
"name": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative content displayed before the label."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: ButtonState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "ghost",
|
|
"description": "Visual treatment of the button surface."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Button",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/button",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: ButtonState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"accent\" | \"danger\" | \"success\"",
|
|
"required": false,
|
|
"defaultValue": "neutral",
|
|
"description": "Semantic color of the button."
|
|
},
|
|
{
|
|
"name": "elevated",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Adds a shadow to the button."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative content displayed after the label."
|
|
},
|
|
{
|
|
"name": "focusableWhenDisabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the button should be focusable when disabled."
|
|
},
|
|
{
|
|
"name": "fullWidth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Expands the button to fill its container width."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut hints displayed on non-mobile screens."
|
|
},
|
|
{
|
|
"name": "loading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Shows a loading indicator and disables activation while preserving the button width."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Button height: `sm` (24px) or `md` (32px)."
|
|
},
|
|
{
|
|
"name": "soon",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Displays a coming-soon label and disables activation."
|
|
},
|
|
{
|
|
"name": "soonLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Text for the coming-soon label."
|
|
},
|
|
{
|
|
"name": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative content displayed before the label."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: ButtonState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "outline",
|
|
"description": "Visual treatment of the button surface."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "ButtonGroup",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/button-group",
|
|
"props": [
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"accent\" | \"danger\" | \"success\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Shared semantic color that overrides the color of buttons in the group."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Shared button height that overrides the size of buttons in the group."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Shared surface treatment that overrides the variant of buttons in the group."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Field",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/field",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<FieldRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `validate`: Validates the field when called."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: FieldRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "dirty",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the field's value has been changed from its initial value.\nUseful when the field state is controlled by an external library."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction.\nTakes precedence over the `disabled` prop on the `<Field.Control>` component."
|
|
},
|
|
{
|
|
"name": "invalid",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the field is invalid.\nUseful when the field state is controlled by an external library."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the field when a form is submitted.\nTakes precedence over the `name` prop on the `<Field.Control>` component."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldRootState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: FieldRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "touched",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the field has been touched.\nUseful when the field state is controlled by an external library."
|
|
},
|
|
{
|
|
"name": "validate",
|
|
"type": "((value: unknown, formValues: Record<string, any>) => string | void | string[] | Promise<string | void | string[] | null> | null)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A function for custom validation. Return a string or an array of strings with\nthe error message(s) if the value is invalid. Returning nothing, `null`, an empty\nstring, or an empty array means the value is valid.\nAsynchronous functions are supported, but they do not prevent form submission\nwhen using `validationMode=\"onSubmit\"`."
|
|
},
|
|
{
|
|
"name": "validationDebounceTime",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "How long to wait between `validate` callbacks if\n`validationMode=\"onChange\"` is used. Specified in milliseconds."
|
|
},
|
|
{
|
|
"name": "validationMode",
|
|
"type": "\"onBlur\" | \"onChange\" | \"onSubmit\"",
|
|
"required": false,
|
|
"defaultValue": "onSubmit",
|
|
"description": "Determines when the field should be validated.\nThis takes precedence over the `validationMode` prop on `<Form>`.\n\n- `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.\n- `onBlur`: triggers validation when the control loses focus.\n- `onChange`: triggers validation on every change to the control value."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Label",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: FieldLabelState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "nativeLabel",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether the component renders a native `<label>` element when replacing it via the `render` prop.\nSet to `false` if the rendered element is not a label (for example, `<div>`).\n\nThis is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldLabelState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: FieldLabelState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Control",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: FieldControlState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "string | number | readonly string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": ""
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: string, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Callback fired when the `value` changes. Use when controlled."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldControlState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: FieldControlState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Description",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: FieldDescriptionState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldDescriptionState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: FieldDescriptionState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Error",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: FieldErrorState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "match",
|
|
"type": "boolean | keyof ValidityState",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines whether to show the error message according to the field's\n[ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).\nSpecifying `true` will always show the error message, and lets external libraries\ncontrol the visibility."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldErrorState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: FieldErrorState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Validity",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "(state: FieldValidityState) => ReactNode",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "A function that accepts the field validity state as an argument.\n\n```jsx\n<Field.Validity>\n {(validity) => {\n return <div>...</div>\n }}\n</Field.Validity>\n```"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Input",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/input",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: InputState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "string | number | readonly string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The default value of the input. Use when uncontrolled."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: string, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Callback fired when the `value` changes. Use when controlled."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Visual size of the input. Inside an `InputGroup`, the group's size applies."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: InputState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string | number | readonly string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value of the input. Use when controlled."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "InputGroup",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/input-group",
|
|
"props": [
|
|
{
|
|
"name": "endElement",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content rendered after the input, such as a suffix or a button."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Visual size of the group and its input."
|
|
},
|
|
{
|
|
"name": "startElement",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content rendered before the input, such as a prefix or an icon."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Textarea",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/textarea",
|
|
"props": [
|
|
{
|
|
"name": "autoResize",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Grows the textarea with its content instead of showing a scrollbar."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: InputState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the textarea, or a function that returns a class\nbased on the input state."
|
|
},
|
|
{
|
|
"name": "maxRows",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Maximum number of rows the textarea grows to when `autoResize` is set.\nLonger content scrolls."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: string, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Called with the new value when the textarea value changes."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"defaultValue": "<textarea />",
|
|
"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",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Visual size of the textarea."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Checkbox",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/checkbox",
|
|
"props": [
|
|
{
|
|
"name": "checked",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the checkbox is currently ticked.\n\nTo render an uncontrolled checkbox, use the `defaultChecked` prop instead."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: CheckboxRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"accent\" | \"success\" | \"warning\"",
|
|
"required": false,
|
|
"defaultValue": "accent",
|
|
"description": "Color used while the checkbox is checked or indeterminate."
|
|
},
|
|
{
|
|
"name": "defaultChecked",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the checkbox is initially ticked.\n\nTo render a controlled checkbox, use the `checked` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "form",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the form that owns the hidden input.\nUseful when the checkbox is rendered outside the form."
|
|
},
|
|
{
|
|
"name": "hoverable",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Adds padding around the box and a hover background. Disable it for a\ncompact checkbox inside another interactive element."
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The id of the input element."
|
|
},
|
|
{
|
|
"name": "indeterminate",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the checkbox is in a mixed state: neither ticked, nor unticked."
|
|
},
|
|
{
|
|
"name": "inputRef",
|
|
"type": "Ref<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to access the hidden `<input>` element."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the field when a form is submitted."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "onCheckedChange",
|
|
"type": "((checked: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the checkbox is ticked or unticked."
|
|
},
|
|
{
|
|
"name": "parent",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the checkbox controls a group of child checkboxes.\n\nMust be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group)."
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user should be unable to tick or untick the checkbox."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CheckboxRootState>",
|
|
"required": false,
|
|
"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": "required",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user must tick the checkbox before submitting a form."
|
|
},
|
|
{
|
|
"name": "shape",
|
|
"type": "\"square\" | \"round\"",
|
|
"required": false,
|
|
"defaultValue": "square",
|
|
"description": "Corner shape of the box."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "sm",
|
|
"description": "Visual size of the checkbox."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: CheckboxRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "uncheckedValue",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value submitted with the form when the checkbox is unchecked.\nBy default, unchecked checkboxes do not submit any value, matching native checkbox behavior."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted.\nWhen submitting a form, a checked box submits `value`; with no `value`, it submits the native \"on\"."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "solid",
|
|
"description": "Visual style of the box: filled, outlined, or tinted."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Radio",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/radio",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: RadioRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "inputRef",
|
|
"type": "Ref<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to access the hidden input element."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the user should be unable to select the radio button."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioRootState>",
|
|
"required": false,
|
|
"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": "required",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the user must choose a value before submitting a form."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "sm",
|
|
"description": "Visual size of the radio."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: RadioRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "TValue",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "The unique identifying value of the radio in a group."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "RadioGroup",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/radio-group",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: RadioGroupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "TValue",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The uncontrolled value of the radio button that should be initially selected.\n\nTo render a controlled radio group, use the `value` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "form",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the form that owns the radio inputs.\nUseful when the radio group is rendered outside the form."
|
|
},
|
|
{
|
|
"name": "inputRef",
|
|
"type": "Ref<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to access the hidden input element."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the field when a form is submitted."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: TValue, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Callback fired when the value changes."
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user should be unable to select a different radio button in the group."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioGroupState>",
|
|
"required": false,
|
|
"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": "required",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user must choose a value before submitting a form."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "TValue",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The controlled value of the radio item that should be currently selected.\n\nTo render an uncontrolled radio group, use the `defaultValue` prop instead."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Select",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/select",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<SelectRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the select.\nCall this after any externally controlled closing animation finishes."
|
|
},
|
|
{
|
|
"name": "autoComplete",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Provides a hint to the browser for autofill."
|
|
},
|
|
{
|
|
"name": "defaultOpen",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the select popup is initially open.\n\nTo render a controlled select popup, use the `open` prop instead."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "SelectValueType<Value, Multiple> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The uncontrolled value of the select when it's initially rendered.\n\nTo render a controlled select, use the `value` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "form",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the form that owns the hidden input.\nUseful when the select is rendered outside the form."
|
|
},
|
|
{
|
|
"name": "highlightItemOnHover",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The id of the Select."
|
|
},
|
|
{
|
|
"name": "inputRef",
|
|
"type": "Ref<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to access the hidden input element."
|
|
},
|
|
{
|
|
"name": "isItemEqualToValue",
|
|
"type": "((itemValue: Value, value: Value) => boolean)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.\nDefaults to `Object.is` comparison."
|
|
},
|
|
{
|
|
"name": "items",
|
|
"type": "Record<string, ReactNode> | readonly { label: ReactNode; value: any; }[] | readonly Group<any>[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Data structure of the items rendered in the select popup.\nWhen specified, `<Select.Value>` renders the label of the selected item instead of the raw value."
|
|
},
|
|
{
|
|
"name": "itemToStringLabel",
|
|
"type": "((itemValue: Value) => string)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.\nIf the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop."
|
|
},
|
|
{
|
|
"name": "itemToStringValue",
|
|
"type": "((itemValue: Value) => string)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.\nIf the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop."
|
|
},
|
|
{
|
|
"name": "modal",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Determines if the select enters a modal state when open.\n- `true`: user interaction is limited to the select: 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\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior."
|
|
},
|
|
{
|
|
"name": "multiple",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether multiple items can be selected."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the field when a form is submitted."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: SelectRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the select popup is opened or closed."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the select popup is opened or closed."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the value of the select changes."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the select popup is currently open."
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user should be unable to choose a different option from the select popup."
|
|
},
|
|
{
|
|
"name": "required",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user must choose a value before submitting a form."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "SelectValueType<Value, Multiple> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value of the select. Use when controlled."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Trigger",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectTriggerState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectTriggerState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Visual size of the trigger."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: SelectTriggerState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Value",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode | ((value: any) => ReactNode)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Accepts a function that returns a `ReactNode` to format the selected value.\nTreat the value as read-only: in `multiple` mode it may be a shared frozen array\nwhen nothing is selected."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectValueState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "placeholder",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The placeholder value to display when no value is selected.\nThis is overridden by `children` if specified, or by a null item's label in `items`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectValueState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SelectValueState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Popup",
|
|
"props": [
|
|
{
|
|
"name": "align",
|
|
"type": "\"center\" | \"start\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": "start",
|
|
"description": "How to align the popup relative to the specified side."
|
|
},
|
|
{
|
|
"name": "alignItemWithTrigger",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space."
|
|
},
|
|
{
|
|
"name": "alignOffset",
|
|
"type": "number | OffsetFunction",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side."
|
|
},
|
|
{
|
|
"name": "anchor",
|
|
"type": "Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "An element to position the popup against.\nBy default, the popup will be positioned against the trigger."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectPopupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "container",
|
|
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Element the popup is portaled into. Defaults to the theme's portal\ncontainer."
|
|
},
|
|
{
|
|
"name": "finalFocus",
|
|
"type": "boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines the element to focus when the select popup 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, or `false`/`undefined` to do nothing."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectPopupState>",
|
|
"required": false,
|
|
"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": "side",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"inline-end\" | \"inline-start\"",
|
|
"required": false,
|
|
"defaultValue": "bottom",
|
|
"description": "Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."
|
|
},
|
|
{
|
|
"name": "sideOffset",
|
|
"type": "number | OffsetFunction",
|
|
"required": false,
|
|
"defaultValue": "8",
|
|
"description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: SelectPopupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Item",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectItemState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text, placed according to `descriptionPlacement`."
|
|
},
|
|
{
|
|
"name": "descriptionPlacement",
|
|
"type": "\"inline\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": "inline",
|
|
"description": "Where the description renders: inline after the content or at the end of\nthe row."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered after the content."
|
|
},
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Specifies the text label to use when the item is matched during keyboard text navigation.\n\nDefaults to the item text content if not provided."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectItemState>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the content."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: SelectItemState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "any",
|
|
"required": false,
|
|
"defaultValue": "null",
|
|
"description": "A unique value that identifies this select item."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Group",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectGroupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectGroupState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SelectGroupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "GroupLabel",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectGroupLabelState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectGroupLabelState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SelectGroupLabelState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Separator",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SelectSeparatorState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "orientation",
|
|
"type": "\"horizontal\" | \"vertical\"",
|
|
"required": false,
|
|
"defaultValue": "horizontal",
|
|
"description": "The orientation of the separator."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectSeparatorState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SelectSeparatorState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Slider",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/slider",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"accent\" | \"success\"",
|
|
"required": false,
|
|
"defaultValue": "accent",
|
|
"description": "Color of the indicator and thumbs."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "number | readonly number[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The uncontrolled value of the slider when it's initially rendered.\n\nTo render a controlled slider, use the `value` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the slider should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "form",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the form that owns the slider inputs.\nUseful when the slider is rendered outside the form."
|
|
},
|
|
{
|
|
"name": "format",
|
|
"type": "NumberFormatOptions",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Options to format the value."
|
|
},
|
|
{
|
|
"name": "largeStep",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "10",
|
|
"description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
|
|
},
|
|
{
|
|
"name": "locale",
|
|
"type": "LocalesArgument",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The locale used by `Intl.NumberFormat` when formatting the value.\nDefaults to the user's runtime locale."
|
|
},
|
|
{
|
|
"name": "max",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "100",
|
|
"description": "The maximum allowed value of the slider.\nShould not be equal to min."
|
|
},
|
|
{
|
|
"name": "min",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "The minimum allowed value of the slider.\nShould not be equal to max."
|
|
},
|
|
{
|
|
"name": "minStepsBetweenValues",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "The minimum steps between values in a range slider."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the field when a form is submitted."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: TValue extends number ? number : TValue, eventDetails: SliderRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Callback function that is fired when the slider's value changed.\nReceives the new value as the first argument; the originating event is\navailable as `eventDetails.event`. The value is also reflected on\n`eventDetails.event.target.value` for form integration.\n\nThe `eventDetails.reason` indicates what triggered the change:\n\n- `'input-change'` when the hidden range input emits a change event (for example, via form integration)\n- `'track-press'` when the control track is pressed\n- `'drag'` while dragging a thumb\n- `'keyboard'` for keyboard input\n- `'none'` when the change is triggered without a specific interaction"
|
|
},
|
|
{
|
|
"name": "onValueCommitted",
|
|
"type": "((value: TValue extends number ? number : TValue, eventDetails: SliderRootCommitEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Callback function that is fired when a value change is committed.\nDoes not fire if the value did not change, or if the change was canceled.\n**Warning**: This is a generic event, not a change event.\n\nThe `eventDetails.reason` indicates what triggered the commit:\n\n- `'drag'` while dragging a thumb\n- `'track-press'` when the control track is pressed\n- `'keyboard'` for keyboard input\n- `'input-change'` when the hidden range input emits a change event (for example, via form integration)\n- `'none'` when the commit occurs without a specific interaction"
|
|
},
|
|
{
|
|
"name": "orientation",
|
|
"type": "\"horizontal\" | \"vertical\"",
|
|
"required": false,
|
|
"defaultValue": "horizontal",
|
|
"description": "The component orientation."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>",
|
|
"required": false,
|
|
"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": "step",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "1",
|
|
"description": "The granularity with which the slider can step through values. (A \"discrete\" slider.)\nThe `min` prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: SliderRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "thumbAlignment",
|
|
"type": "\"center\" | \"edge\" | \"edge-client-only\"",
|
|
"required": false,
|
|
"defaultValue": "edge",
|
|
"description": "How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`:\n- `center`: The center of the thumb is aligned with the control edge\n- `edge`: The thumb is inset within the control such that its edge is aligned with the control edge\n- `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return"
|
|
},
|
|
{
|
|
"name": "thumbCollisionBehavior",
|
|
"type": "\"none\" | \"push\" | \"swap\"",
|
|
"required": false,
|
|
"defaultValue": "push",
|
|
"description": "Controls how thumbs behave when they collide during pointer interactions.\n\n- `'push'` (default): Thumbs push each other without restoring their previous positions when dragged back.\n- `'swap'`: Thumbs swap places when dragged past each other.\n- `'none'`: Thumbs cannot move past each other; excess movement is ignored."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "number | readonly number[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value of the slider.\nFor range sliders, provide an array with one value per thumb."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Control",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderControlState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderControlState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SliderControlState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Track",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderTrackState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderTrackState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SliderTrackState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Indicator",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderIndicatorState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderIndicatorState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SliderIndicatorState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Thumb",
|
|
"props": [
|
|
{
|
|
"name": "aria-valuetext",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A string value forwarded to the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.\nIgnored when `getAriaValueText` is provided."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderThumbState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the thumb should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "getAriaLabel",
|
|
"type": "((index: number) => string) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`."
|
|
},
|
|
{
|
|
"name": "getAriaValueText",
|
|
"type": "((formattedValue: string, value: number, index: number) => string) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.\nThis is important for screen reader users."
|
|
},
|
|
{
|
|
"name": "index",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The index of the thumb which corresponds to the index of its value in the\n`value` or `defaultValue` array.\nThis prop is required to support server-side rendering for range sliders\nwith multiple thumbs."
|
|
},
|
|
{
|
|
"name": "inputRef",
|
|
"type": "Ref<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to access the nested input element."
|
|
},
|
|
{
|
|
"name": "onBlur",
|
|
"type": "FocusEventHandler<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A blur handler forwarded to the `input`."
|
|
},
|
|
{
|
|
"name": "onFocus",
|
|
"type": "FocusEventHandler<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A focus handler forwarded to the `input`."
|
|
},
|
|
{
|
|
"name": "onKeyDown",
|
|
"type": "KeyboardEventHandler<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A keydown handler forwarded to the `input`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderThumbState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SliderThumbState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "tabIndex",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Optional tab index attribute forwarded to the `input`."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Label",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SliderRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Value",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SliderValueState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderValueState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SliderValueState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Switch",
|
|
"entryPoint": "twenty-ui/primitives/input",
|
|
"slug": "input/switch",
|
|
"props": [
|
|
{
|
|
"name": "checked",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the switch is currently active.\n\nTo render an uncontrolled switch, use the `defaultChecked` prop instead."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SwitchRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "defaultChecked",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the switch is initially active.\n\nTo render a controlled switch, use the `checked` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "form",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the form that owns the hidden input.\nUseful when the switch is rendered outside the form."
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The id of the hidden input element.\n\nWhen `nativeButton` is `true`, the id is applied to the root element."
|
|
},
|
|
{
|
|
"name": "inputRef",
|
|
"type": "Ref<HTMLInputElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to access the hidden `<input>` element."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Identifies the field when a form is submitted."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "onCheckedChange",
|
|
"type": "((checked: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the switch is activated or deactivated."
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user should be unable to activate or deactivate the switch."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>",
|
|
"required": false,
|
|
"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": "required",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the user must activate the switch before submitting a form."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Visual size of the switch."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "uncheckedValue",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value submitted with the form when the switch is off.\nBy default, unchecked switches do not submit any value, matching native checkbox behavior."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value submitted with the form when the switch is on.\nBy default, switch submits the \"on\" value, matching native checkbox behavior."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "ListItem",
|
|
"entryPoint": "twenty-ui/primitives/navigation",
|
|
"slug": "navigation/list-item",
|
|
"props": [
|
|
{
|
|
"name": "actions",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Trailing content, such as buttons, rendered after the content."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"danger\"",
|
|
"required": false,
|
|
"defaultValue": "neutral",
|
|
"description": "Color of the text and icons. `danger` marks a destructive action."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text, placed according to `descriptionPlacement`."
|
|
},
|
|
{
|
|
"name": "descriptionPlacement",
|
|
"type": "\"inline\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": "inline",
|
|
"description": "Where the description renders: inline after the content or at the end of\nthe row."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Prevents clicks and applies the disabled style."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered after the content."
|
|
},
|
|
{
|
|
"name": "focused",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Applies the highlighted style, for example to the focused item of a list."
|
|
},
|
|
{
|
|
"name": "hasSubmenu",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Shows a chevron indicating that the item opens a submenu."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut keys displayed at the end of the row. Registering the\nshortcut is up to the application."
|
|
},
|
|
{
|
|
"name": "indicator",
|
|
"type": "\"none\" | \"checkbox\" | \"check\"",
|
|
"required": false,
|
|
"defaultValue": "none",
|
|
"description": "Selection indicator: a check icon after the content or a checkbox before\nit."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ListItemState>",
|
|
"required": false,
|
|
"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": "selected",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the item is selected. Shows the check or checkbox indicator when\n`indicator` is set."
|
|
},
|
|
{
|
|
"name": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the content."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Tabs",
|
|
"entryPoint": "twenty-ui/primitives/navigation",
|
|
"slug": "navigation/tabs",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TabsRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "any",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "The default value. Use when the component is not controlled.\nWhen the value is `null`, no Tab will be active."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: any, eventDetails: TabsRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Callback invoked when new value is being set.\n\nThe event `reason` is `'none'` for user-initiated changes, such as a click\nor keyboard navigation; `'initial'` for the first automatic selection or\nfallback in uncontrolled roots when `defaultValue` is omitted or\n`undefined`, including when the implicit initial value is disabled or\nmissing; `'disabled'` for automatic fallback when the selected tab becomes\ndisabled in uncontrolled roots; or `'missing'` for automatic fallback when\nthe selected tab is removed, or when an explicit `defaultValue` never\nmatches a mounted tab in uncontrolled roots.\n\nFor automatic changes, the selected value can be `null` when no enabled Tab\nis available as a fallback.\n\nAutomatic changes cannot be canceled; calling `eventDetails.cancel()` for\n`'initial'`, `'disabled'`, or `'missing'` has no effect."
|
|
},
|
|
{
|
|
"name": "orientation",
|
|
"type": "\"horizontal\" | \"vertical\"",
|
|
"required": false,
|
|
"defaultValue": "horizontal",
|
|
"description": "The component orientation (layout flow direction)."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsRootState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: TabsRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "any",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The value of the currently active `Tab`. Use when the component is controlled.\nWhen the value is `null`, no Tab will be active."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "List",
|
|
"props": [
|
|
{
|
|
"name": "activateOnFocus",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to automatically change the active tab on arrow key focus.\nOtherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TabsListState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "loopFocus",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsListState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: TabsListState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Tab",
|
|
"props": [
|
|
{
|
|
"name": "badge",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content rendered after the label, such as a count."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TabsTabState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the Tab is disabled.\n\nIf a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.\nInstead, the next enabled Tab will be selected.\nHowever, it does not work like this during server-side rendering, as it is not known\nduring pre-rendering which Tabs are disabled.\nTo work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsTabState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "sm",
|
|
"description": "Visual size of the tab."
|
|
},
|
|
{
|
|
"name": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the label."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: TabsTabState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "any",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "The value of the Tab."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Panel",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TabsPanelState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "keepMounted",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to keep the HTML element in the DOM while the panel is hidden."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsPanelState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: TabsPanelState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "any",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is active."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "AlertDialog",
|
|
"entryPoint": "twenty-ui/primitives/surfaces",
|
|
"slug": "surfaces/alert-dialog",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<DialogRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the alert dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the alert dialog imperatively when called."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode | PayloadChildRenderFunction<Payload>",
|
|
"required": false,
|
|
"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",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
|
|
},
|
|
{
|
|
"name": "defaultTriggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"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": "handle",
|
|
"type": "AlertDialogHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the alert dialog with a trigger.\nIf specified, allows external triggers to control the alert dialog's open state.\nCan be created with the AlertDialog.createHandle() method."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the alert dialog is opened or closed."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the dialog is opened or closed."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the dialog is currently open."
|
|
},
|
|
{
|
|
"name": "triggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"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": "Trigger",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: DialogTriggerState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "AlertDialogHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the trigger with an alert dialog.\nCan be created with the AlertDialog.createHandle() method."
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"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": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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",
|
|
"type": "Payload",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A payload to pass to the dialog when it is opened."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: DialogTriggerState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Popup",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: DialogPopupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "container",
|
|
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Element the dialog is portaled into. Defaults to the theme's portal\ncontainer."
|
|
},
|
|
{
|
|
"name": "finalFocus",
|
|
"type": "boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)",
|
|
"required": false,
|
|
"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",
|
|
"type": "boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)",
|
|
"required": false,
|
|
"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": "keepMounted",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keeps the dialog mounted in the DOM while it is closed."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPopupState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Width of the dialog, or `fullscreen` to fill the viewport."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: DialogPopupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Title",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: DialogTitleState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Description",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: DialogDescriptionState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogDescriptionState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: DialogDescriptionState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Close",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: DialogCloseState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogCloseState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: DialogCloseState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Header",
|
|
"props": [
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "Body",
|
|
"props": [
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "Footer",
|
|
"props": [
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "Menu",
|
|
"entryPoint": "twenty-ui/primitives/surfaces",
|
|
"slug": "surfaces/menu",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<MenuRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the menu.\n Call this after any externally controlled closing animation finishes.\n- `close`: When specified, the menu can be closed imperatively."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode | PayloadChildRenderFunction<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The content of the menu.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger."
|
|
},
|
|
{
|
|
"name": "closeParentOnEsc",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."
|
|
},
|
|
{
|
|
"name": "defaultOpen",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."
|
|
},
|
|
{
|
|
"name": "defaultTriggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open menu."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "MenuHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the menu with a trigger.\nIf specified, allows external triggers to control the menu's open state."
|
|
},
|
|
{
|
|
"name": "highlightItemOnHover",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."
|
|
},
|
|
{
|
|
"name": "loopFocus",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
|
|
},
|
|
{
|
|
"name": "modal",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Determines if the menu enters a modal state when open.\n- `true`: user interaction is limited to the menu: 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\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.\n\nNested menus ignore this prop, and menus opened by hover are never modal."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the menu is opened or closed."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the menu is opened or closed."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the menu is currently open."
|
|
},
|
|
{
|
|
"name": "orientation",
|
|
"type": "\"horizontal\" | \"vertical\"",
|
|
"required": false,
|
|
"defaultValue": "vertical",
|
|
"description": "The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."
|
|
},
|
|
{
|
|
"name": "triggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled menu.\nThere's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set)."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Trigger",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuTriggerState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."
|
|
},
|
|
{
|
|
"name": "delay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "100",
|
|
"description": "How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "MenuHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the trigger with a menu."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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": "openOnHover",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the menu should also open when the trigger is hovered."
|
|
},
|
|
{
|
|
"name": "payload",
|
|
"type": "Payload",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A payload to pass to the menu when it is opened."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuTriggerState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: MenuTriggerState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Popup",
|
|
"props": [
|
|
{
|
|
"name": "align",
|
|
"type": "\"center\" | \"start\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Alignment of the popup along the anchor. Defaults to `start`."
|
|
},
|
|
{
|
|
"name": "alignOffset",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Offset in pixels along the alignment axis. Defaults to `0` for a menu and\n`-4` for a submenu."
|
|
},
|
|
{
|
|
"name": "anchor",
|
|
"type": "Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Element or position the popup is anchored to. Defaults to the trigger."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuPopupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "container",
|
|
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Element the popup is portaled into. Defaults to the theme's portal\ncontainer."
|
|
},
|
|
{
|
|
"name": "finalFocus",
|
|
"type": "boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines the element to focus when the menu 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, or `false`/`undefined` to do nothing."
|
|
},
|
|
{
|
|
"name": "keepMounted",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keeps the popup mounted in the DOM while the menu is closed."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>",
|
|
"required": false,
|
|
"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": "side",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"inline-end\" | \"inline-start\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Side of the anchor the popup is placed on. Defaults to `bottom` for a menu\nand `inline-end` for a submenu."
|
|
},
|
|
{
|
|
"name": "sideOffset",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Distance in pixels between the anchor and the popup. Defaults to `8` for a\nmenu and `0` for a submenu."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: MenuPopupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Item",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuItemState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeOnClick",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether to close the menu when the item is clicked."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"danger\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Color of the text and icons. `danger` marks a destructive action."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text, placed according to `descriptionPlacement`."
|
|
},
|
|
{
|
|
"name": "descriptionPlacement",
|
|
"type": "\"inline\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Where the description renders: inline after the content or at the end of\nthe row."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered after the content."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut keys displayed at the end of the row. Registering the\nshortcut is up to the application."
|
|
},
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Overrides the text label to use when the item is matched during keyboard text navigation."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "onClick",
|
|
"type": "((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The click handler for the menu item."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuItemState>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the content."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: MenuItemState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "CheckboxItem",
|
|
"props": [
|
|
{
|
|
"name": "checked",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the checkbox item is currently ticked.\n\nTo render an uncontrolled checkbox item, use the `defaultChecked` prop instead."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuCheckboxItemState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeOnClick",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to close the menu when the item is clicked."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"danger\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Color of the text and icons. `danger` marks a destructive action."
|
|
},
|
|
{
|
|
"name": "defaultChecked",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the checkbox item is initially ticked.\n\nTo render a controlled checkbox item, use the `checked` prop instead."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text, placed according to `descriptionPlacement`."
|
|
},
|
|
{
|
|
"name": "descriptionPlacement",
|
|
"type": "\"inline\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Where the description renders: inline after the content or at the end of\nthe row."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered after the content."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut keys displayed at the end of the row. Registering the\nshortcut is up to the application."
|
|
},
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Overrides the text label to use when the item is matched during keyboard text navigation."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "onCheckedChange",
|
|
"type": "((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the checkbox item is ticked or unticked."
|
|
},
|
|
{
|
|
"name": "onClick",
|
|
"type": "((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The click handler for the menu item."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuCheckboxItemState>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the content."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: MenuCheckboxItemState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "RadioGroup",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The content of the component."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuRadioGroupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "defaultValue",
|
|
"type": "any",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The uncontrolled value of the radio item that should be initially selected.\n\nTo render a controlled radio group, use the `value` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "onValueChange",
|
|
"type": "((value: any, eventDetails: MenuRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Function called when the selected value changes."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioGroupState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: MenuRadioGroupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "any",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The controlled value of the radio item that should be currently selected.\n\nTo render an uncontrolled radio group, use the `defaultValue` prop instead."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "RadioItem",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuRadioItemState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeOnClick",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to close the menu when the item is clicked."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"danger\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Color of the text and icons. `danger` marks a destructive action."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text, placed according to `descriptionPlacement`."
|
|
},
|
|
{
|
|
"name": "descriptionPlacement",
|
|
"type": "\"inline\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Where the description renders: inline after the content or at the end of\nthe row."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered after the content."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut keys displayed at the end of the row. Registering the\nshortcut is up to the application."
|
|
},
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Overrides the text label to use when the item is matched during keyboard text navigation."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "onClick",
|
|
"type": "((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The click handler for the menu item."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioItemState>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the content."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: MenuRadioItemState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "any",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Value of the radio item.\nThis is the value that will be set in the MenuRadioGroup when the item is selected."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Group",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The content of the component."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuGroupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: MenuGroupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "GroupLabel",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuGroupLabelState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupLabelState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: MenuGroupLabelState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Separator",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: SeparatorState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "orientation",
|
|
"type": "\"horizontal\" | \"vertical\"",
|
|
"required": false,
|
|
"defaultValue": "horizontal",
|
|
"description": "The orientation of the separator."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: SeparatorState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "SubmenuRoot",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<MenuRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the menu.\n Call this after any externally controlled closing animation finishes.\n- `close`: When specified, the menu can be closed imperatively."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The content of the submenu."
|
|
},
|
|
{
|
|
"name": "closeParentOnEsc",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."
|
|
},
|
|
{
|
|
"name": "defaultOpen",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "highlightItemOnHover",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."
|
|
},
|
|
{
|
|
"name": "loopFocus",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the menu is opened or closed."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the menu is opened or closed."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the menu is currently open."
|
|
},
|
|
{
|
|
"name": "orientation",
|
|
"type": "\"horizontal\" | \"vertical\"",
|
|
"required": false,
|
|
"defaultValue": "vertical",
|
|
"description": "The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "SubmenuTrigger",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: MenuSubmenuTriggerState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"neutral\" | \"danger\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Color of the text and icons. `danger` marks a destructive action."
|
|
},
|
|
{
|
|
"name": "delay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "100",
|
|
"description": "How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text, placed according to `descriptionPlacement`."
|
|
},
|
|
{
|
|
"name": "descriptionPlacement",
|
|
"type": "\"inline\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Where the description renders: inline after the content or at the end of\nthe row."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component should ignore user interaction."
|
|
},
|
|
{
|
|
"name": "endIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered after the content."
|
|
},
|
|
{
|
|
"name": "hotkeys",
|
|
"type": "string[]",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keyboard shortcut keys displayed at the end of the row. Registering the\nshortcut is up to the application."
|
|
},
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Overrides the text label to use when the item is matched during keyboard text navigation."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
},
|
|
{
|
|
"name": "onClick",
|
|
"type": "((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": ""
|
|
},
|
|
{
|
|
"name": "openOnHover",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether the menu should also open when the trigger is hovered."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered before the content."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: MenuSubmenuTriggerState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Popover",
|
|
"entryPoint": "twenty-ui/primitives/surfaces",
|
|
"slug": "surfaces/popover",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<PopoverRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the popover.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the popover imperatively when called."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode | PayloadChildRenderFunction<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The content of the popover.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger."
|
|
},
|
|
{
|
|
"name": "defaultOpen",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the popover is initially open.\n\nTo render a controlled popover, use the `open` prop instead."
|
|
},
|
|
{
|
|
"name": "defaultTriggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the popover is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open popover."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "PopoverHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the popover with a trigger.\nIf specified, allows external triggers to control the popover's open state."
|
|
},
|
|
{
|
|
"name": "modal",
|
|
"type": "boolean | \"trap-focus\"",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Determines if the popover enters a modal state when open.\n- `true`: user interaction is limited to the popover: 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 popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.\n\nWhen `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered\ninside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as\nTailwind's `sr-only` utility.\n\nWhen `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch\nscreen readers can escape the popup."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: PopoverRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the popover is opened or closed."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the popover is opened or closed."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the popover is currently open."
|
|
},
|
|
{
|
|
"name": "triggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the popover is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled popover.\nThere's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set)."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Trigger",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: PopoverTriggerState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "How long to wait before closing the popover that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."
|
|
},
|
|
{
|
|
"name": "delay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "300",
|
|
"description": "How long to wait before the popover may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "PopoverHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the trigger with a popover."
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"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 popover in controlled mode (with the PopoverRoot `triggerId` prop)."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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 (e.g. `<div>`)."
|
|
},
|
|
{
|
|
"name": "openOnHover",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the popover should also open when the trigger is hovered."
|
|
},
|
|
{
|
|
"name": "payload",
|
|
"type": "Payload",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A payload to pass to the popover when it is opened."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverTriggerState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: PopoverTriggerState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Popup",
|
|
"props": [
|
|
{
|
|
"name": "align",
|
|
"type": "\"center\" | \"start\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": "center",
|
|
"description": "Alignment of the popup along the anchor."
|
|
},
|
|
{
|
|
"name": "alignOffset",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Offset in pixels along the alignment axis."
|
|
},
|
|
{
|
|
"name": "anchor",
|
|
"type": "Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Element or position the popup is anchored to. Defaults to the trigger."
|
|
},
|
|
{
|
|
"name": "arrow",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Shows an arrow pointing at the anchor."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: PopoverPopupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "container",
|
|
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Element the popup is portaled into. Defaults to the theme's portal\ncontainer."
|
|
},
|
|
{
|
|
"name": "finalFocus",
|
|
"type": "boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines the element to focus when the popover 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",
|
|
"type": "boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines the element to focus when the popover is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the popover\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": "keepMounted",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keeps the popup mounted in the DOM while the popover is closed."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverPopupState>",
|
|
"required": false,
|
|
"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": "side",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"inline-end\" | \"inline-start\"",
|
|
"required": false,
|
|
"defaultValue": "bottom",
|
|
"description": "Side of the anchor the popup is placed on."
|
|
},
|
|
{
|
|
"name": "sideOffset",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "8",
|
|
"description": "Distance in pixels between the anchor and the popup."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: PopoverPopupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Title",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: PopoverTitleState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverTitleState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: PopoverTitleState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Description",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: PopoverDescriptionState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverDescriptionState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: PopoverDescriptionState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Close",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: PopoverCloseState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"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": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverCloseState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: PopoverCloseState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Tooltip",
|
|
"entryPoint": "twenty-ui/primitives/surfaces",
|
|
"slug": "surfaces/tooltip",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<TooltipRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Unmounts the tooltip popup.\n- `close`: Closes the tooltip imperatively when called."
|
|
},
|
|
{
|
|
"name": "align",
|
|
"type": "\"center\" | \"start\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Alignment relative to the trigger. Defaults to center."
|
|
},
|
|
{
|
|
"name": "alignOffset",
|
|
"type": "number | OffsetFunction",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "Offset along the alignment axis in pixels."
|
|
},
|
|
{
|
|
"name": "anchor",
|
|
"type": "Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "An explicit positioning anchor for the popup."
|
|
},
|
|
{
|
|
"name": "arrow",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Displays an arrow pointing to the trigger. Defaults to false."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "A single trigger element. Custom components must forward their ref, native attributes, and event handlers."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TooltipPopupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Additional CSS class for the popup."
|
|
},
|
|
{
|
|
"name": "closeDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "Delay in milliseconds before closing after hover ends. Defaults to 0."
|
|
},
|
|
{
|
|
"name": "closeOnClick",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether the tooltip should close when this trigger is clicked."
|
|
},
|
|
{
|
|
"name": "collisionAvoidance",
|
|
"type": "CollisionAvoidance",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side\n (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within\n the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the\n alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the\npreferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first\n (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first\n (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.\nIf `align` is omitted, it defaults to `'flip'`."
|
|
},
|
|
{
|
|
"name": "collisionBoundary",
|
|
"type": "Boundary",
|
|
"required": false,
|
|
"defaultValue": "clipping-ancestors",
|
|
"description": "An element or a rectangle that delimits the area that the popup is confined to."
|
|
},
|
|
{
|
|
"name": "collisionPadding",
|
|
"type": "Padding",
|
|
"required": false,
|
|
"defaultValue": "5",
|
|
"description": "Additional space to maintain from the edge of the collision boundary."
|
|
},
|
|
{
|
|
"name": "container",
|
|
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Portal destination. Defaults to the current theme container."
|
|
},
|
|
{
|
|
"name": "content",
|
|
"type": "ReactNode",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Supplementary content displayed in the tooltip."
|
|
},
|
|
{
|
|
"name": "defaultOpen",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Initial visibility when the tooltip manages its own state."
|
|
},
|
|
{
|
|
"name": "defaultTriggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the tooltip is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip."
|
|
},
|
|
{
|
|
"name": "delay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "600",
|
|
"description": "Delay in milliseconds before opening on hover. Defaults to 600."
|
|
},
|
|
{
|
|
"name": "disableAnchorTracking",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to disable the popup from tracking any layout shift of its positioning anchor."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Prevents the tooltip from opening."
|
|
},
|
|
{
|
|
"name": "disableHoverablePopup",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Prevents hovering over the popup from keeping it open."
|
|
},
|
|
{
|
|
"name": "keepMounted",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keeps the popup mounted while closed."
|
|
},
|
|
{
|
|
"name": "maxWidth",
|
|
"type": "MaxWidth<string | number>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Maximum popup width. Defaults to 300 pixels."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Called when an interaction requests a visibility change."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the tooltip is opened or closed."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Controlled visibility of the tooltip."
|
|
},
|
|
{
|
|
"name": "positionMethod",
|
|
"type": "\"absolute\" | \"fixed\"",
|
|
"required": false,
|
|
"defaultValue": "absolute",
|
|
"description": "CSS positioning method for the popup."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipPopupState>",
|
|
"required": false,
|
|
"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": "side",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Preferred side of the trigger. Defaults to top and may change to avoid collisions."
|
|
},
|
|
{
|
|
"name": "sideOffset",
|
|
"type": "number | OffsetFunction",
|
|
"required": false,
|
|
"defaultValue": "10",
|
|
"description": "Distance from the trigger in pixels. Defaults to 10."
|
|
},
|
|
{
|
|
"name": "sticky",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: TooltipPopupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Inline styles for the popup."
|
|
},
|
|
{
|
|
"name": "trackCursorAxis",
|
|
"type": "\"none\" | \"both\" | \"x\" | \"y\"",
|
|
"required": false,
|
|
"defaultValue": "none",
|
|
"description": "Determines which axis the tooltip should track the cursor on."
|
|
},
|
|
{
|
|
"name": "triggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the tooltip is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled tooltip.\nThere's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set)."
|
|
}
|
|
],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "actionsRef",
|
|
"type": "RefObject<TooltipRootActions | null>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A ref to imperative actions.\n- `unmount`: Unmounts the tooltip popup.\n- `close`: Closes the tooltip imperatively when called."
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "ReactNode | PayloadChildRenderFunction<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "The content of the tooltip.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger."
|
|
},
|
|
{
|
|
"name": "defaultOpen",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the tooltip is initially open.\n\nTo render a controlled tooltip, use the `open` prop instead."
|
|
},
|
|
{
|
|
"name": "defaultTriggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the tooltip is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the tooltip is disabled."
|
|
},
|
|
{
|
|
"name": "disableHoverablePopup",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether the tooltip contents can be hovered without closing the tooltip."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "TooltipHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the tooltip with a trigger.\nIf specified, allows external triggers to control the tooltip's open state.\nCan be created with the Tooltip.createHandle() method."
|
|
},
|
|
{
|
|
"name": "onOpenChange",
|
|
"type": "((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called when the tooltip is opened or closed."
|
|
},
|
|
{
|
|
"name": "onOpenChangeComplete",
|
|
"type": "((open: boolean) => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Event handler called after any animations complete when the tooltip is opened or closed."
|
|
},
|
|
{
|
|
"name": "open",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Whether the tooltip is currently open."
|
|
},
|
|
{
|
|
"name": "trackCursorAxis",
|
|
"type": "\"none\" | \"both\" | \"x\" | \"y\"",
|
|
"required": false,
|
|
"defaultValue": "none",
|
|
"description": "Determines which axis the tooltip should track the cursor on."
|
|
},
|
|
{
|
|
"name": "triggerId",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "ID of the trigger that the tooltip is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled tooltip.\nThere's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set)."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Trigger",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TooltipTriggerState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "closeDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "How long to wait before closing the tooltip. Specified in milliseconds."
|
|
},
|
|
{
|
|
"name": "closeOnClick",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether the tooltip should close when this trigger is clicked."
|
|
},
|
|
{
|
|
"name": "delay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "600",
|
|
"description": "How long to wait before opening the tooltip on hover. Specified in milliseconds."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "If `true`, the tooltip will not open when interacting with this trigger.\nNote that this doesn't apply the `disabled` attribute to the trigger element.\nIf you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop."
|
|
},
|
|
{
|
|
"name": "handle",
|
|
"type": "TooltipHandle<Payload>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A handle to associate the trigger with a tooltip."
|
|
},
|
|
{
|
|
"name": "payload",
|
|
"type": "Payload",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "A payload to pass to the tooltip when it is opened."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipTriggerState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "CSSProperties | ((state: TooltipTriggerState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Popup",
|
|
"props": [
|
|
{
|
|
"name": "align",
|
|
"type": "\"center\" | \"start\" | \"end\"",
|
|
"required": false,
|
|
"defaultValue": "center",
|
|
"description": "Alignment relative to the trigger. Defaults to center."
|
|
},
|
|
{
|
|
"name": "alignOffset",
|
|
"type": "number | OffsetFunction",
|
|
"required": false,
|
|
"defaultValue": "0",
|
|
"description": "Offset along the alignment axis in pixels."
|
|
},
|
|
{
|
|
"name": "anchor",
|
|
"type": "Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "An explicit positioning anchor for the popup."
|
|
},
|
|
{
|
|
"name": "arrow",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Displays an arrow pointing to the trigger. Defaults to false."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: TooltipPopupState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Additional CSS class for the popup."
|
|
},
|
|
{
|
|
"name": "collisionAvoidance",
|
|
"type": "CollisionAvoidance",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side\n (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within\n the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the\n alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the\npreferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first\n (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first\n (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.\nIf `align` is omitted, it defaults to `'flip'`."
|
|
},
|
|
{
|
|
"name": "collisionBoundary",
|
|
"type": "Boundary",
|
|
"required": false,
|
|
"defaultValue": "clipping-ancestors",
|
|
"description": "An element or a rectangle that delimits the area that the popup is confined to."
|
|
},
|
|
{
|
|
"name": "collisionPadding",
|
|
"type": "Padding",
|
|
"required": false,
|
|
"defaultValue": "5",
|
|
"description": "Additional space to maintain from the edge of the collision boundary."
|
|
},
|
|
{
|
|
"name": "container",
|
|
"type": "HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Portal destination. Defaults to the current theme container."
|
|
},
|
|
{
|
|
"name": "disableAnchorTracking",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to disable the popup from tracking any layout shift of its positioning anchor."
|
|
},
|
|
{
|
|
"name": "keepMounted",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Keeps the popup mounted while closed."
|
|
},
|
|
{
|
|
"name": "maxWidth",
|
|
"type": "MaxWidth<string | number>",
|
|
"required": false,
|
|
"defaultValue": "300px",
|
|
"description": "Maximum popup width. Defaults to 300 pixels."
|
|
},
|
|
{
|
|
"name": "positionMethod",
|
|
"type": "\"absolute\" | \"fixed\"",
|
|
"required": false,
|
|
"defaultValue": "absolute",
|
|
"description": "CSS positioning method for the popup."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipPopupState>",
|
|
"required": false,
|
|
"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": "side",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
"required": false,
|
|
"defaultValue": "top",
|
|
"description": "Preferred side of the trigger. Defaults to top and may change to avoid collisions."
|
|
},
|
|
{
|
|
"name": "sideOffset",
|
|
"type": "number | OffsetFunction",
|
|
"required": false,
|
|
"defaultValue": "10",
|
|
"description": "Distance from the trigger in pixels. Defaults to 10."
|
|
},
|
|
{
|
|
"name": "sticky",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: TooltipPopupState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Inline styles for the popup."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Content",
|
|
"props": [
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Secondary explanation beneath the primary text."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "An icon displayed before the text."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Provider",
|
|
"props": [
|
|
{
|
|
"name": "closeDelay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "How long to wait before closing a tooltip. Specified in milliseconds."
|
|
},
|
|
{
|
|
"name": "delay",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "How long to wait before opening the tooltip on hover. Specified in milliseconds."
|
|
},
|
|
{
|
|
"name": "timeout",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "400",
|
|
"description": "Another tooltip will open instantly if the previous tooltip\nis closed within this timeout. Specified in milliseconds."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Toast",
|
|
"entryPoint": "twenty-ui/primitives/feedback",
|
|
"slug": "feedback/toast",
|
|
"props": [
|
|
{
|
|
"name": "action",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content rendered in the footer, such as an action button."
|
|
},
|
|
{
|
|
"name": "cancelLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": "Cancel",
|
|
"description": "Label of the cancel button."
|
|
},
|
|
{
|
|
"name": "closeLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": "Close",
|
|
"description": "Accessible name of the close button."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting content rendered below the message."
|
|
},
|
|
{
|
|
"name": "duration",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "6000",
|
|
"description": "Milliseconds before `onClose` is called. The countdown pauses while the\npointer is over the toast."
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Replaces the variant's icon."
|
|
},
|
|
{
|
|
"name": "iconLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Accessible name of the default icon. Without it, the icon is hidden from\nassistive technology."
|
|
},
|
|
{
|
|
"name": "onCancel",
|
|
"type": "(() => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Called when the cancel button is clicked. The button renders only when\nthis callback is provided."
|
|
},
|
|
{
|
|
"name": "onClose",
|
|
"type": "(() => void)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Called when the close button is clicked or the countdown completes. The\nbutton renders only when this callback is provided."
|
|
},
|
|
{
|
|
"name": "progress",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Completion percentage shown in the progress bar. When set, the countdown\nis disabled."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "RenderProp<Record<string, unknown>>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Replaces the rendered element or composes it with another component.\nAccepts a React element or a function that returns the element to render."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"success\" | \"warning\" | \"default\" | \"error\" | \"info\"",
|
|
"required": false,
|
|
"defaultValue": "default",
|
|
"description": "Visual variant that selects the icon and colors."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Text",
|
|
"entryPoint": "twenty-ui/primitives/typography",
|
|
"slug": "typography/text",
|
|
"props": [
|
|
{
|
|
"name": "lineClamp",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Maximum number of lines before the text is truncated with an ellipsis.\nCannot be combined with `truncate`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "truncate",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Truncates overflowing text on one line with an ellipsis. Cannot be\ncombined with `lineClamp`."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Avatar",
|
|
"entryPoint": "twenty-ui/primitives/data-display",
|
|
"slug": "data-display/avatar",
|
|
"props": [
|
|
{
|
|
"name": "backgroundColor",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Background color override for a first-letter fallback."
|
|
},
|
|
{
|
|
"name": "borderColor",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Border color override for the outline fallback."
|
|
},
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: AvatarRootState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Text color override for a first-letter fallback."
|
|
},
|
|
{
|
|
"name": "colorSeed",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Stable value used to choose fallback colors. Defaults to `name`."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Applies disabled styling and disables activation when `onClick` is supplied."
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Icon rendered instead of the image and first-letter fallback."
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Name used for the first-letter fallback and the default accessible name when clickable."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Set to `false` when a clickable avatar uses `render` with an element other than a native button."
|
|
},
|
|
{
|
|
"name": "pulsing",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Animates the avatar opacity. Respects reduced-motion preferences."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AvatarRootState>",
|
|
"required": false,
|
|
"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": "shape",
|
|
"type": "\"circle\" | \"square\" | \"rounded-square\"",
|
|
"required": false,
|
|
"defaultValue": "square",
|
|
"description": "Shape of the avatar and its fallback."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"xs\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Avatar size: `xs` (12px), `sm` (14px), `md` (16px), `lg` (24px), or `xl` (40px)."
|
|
},
|
|
{
|
|
"name": "src",
|
|
"type": "string | null",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Image URL. A missing or failed image shows the fallback."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: AvatarRootState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"outline\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "soft",
|
|
"description": "Visual treatment of the fallback."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Chip",
|
|
"entryPoint": "twenty-ui/primitives/data-display",
|
|
"slug": "data-display/chip",
|
|
"props": [
|
|
{
|
|
"name": "alwaysShowTooltip",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Shows the string-label tooltip even when the label is not truncated."
|
|
},
|
|
{
|
|
"name": "clickable",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "isDefined(onClick)",
|
|
"description": "Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not add button semantics by itself."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"primary\" | \"secondary\"",
|
|
"required": false,
|
|
"defaultValue": "primary",
|
|
"description": "Primary or secondary text color."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Applies disabled styling and disables activation when `onClick` is supplied."
|
|
},
|
|
{
|
|
"name": "emptyLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": "Untitled",
|
|
"description": "Placeholder shown when children are missing, empty, or false, unless `forceEmptyText` is enabled."
|
|
},
|
|
{
|
|
"name": "endElement",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content after the label. Avoid interactive content when the chip itself is a button."
|
|
},
|
|
{
|
|
"name": "endElementDivider",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Adds a divider before `endElement` when that slot has content."
|
|
},
|
|
{
|
|
"name": "forceEmptyText",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Suppresses the empty label when children are missing, empty, or false."
|
|
},
|
|
{
|
|
"name": "isLabelHidden",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Hides the label while keeping the start and end elements. Supply an accessible name for an interactive chip."
|
|
},
|
|
{
|
|
"name": "maxWidth",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Maximum chip width in pixels, used to constrain and truncate the label."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Set to `false` when a clickable chip uses `render` with an element other than a native button."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "shape",
|
|
"type": "\"square\" | \"round\"",
|
|
"required": false,
|
|
"defaultValue": "square",
|
|
"description": "Square or round corners."
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "\"sm\" | \"md\"",
|
|
"required": false,
|
|
"defaultValue": "sm",
|
|
"description": "Visual size of the chip."
|
|
},
|
|
{
|
|
"name": "startElement",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content before the label, such as an avatar or icon."
|
|
},
|
|
{
|
|
"name": "tooltipLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Tooltip content for a string label. Defaults to the label text."
|
|
},
|
|
{
|
|
"name": "tooltipPlace",
|
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Position of the string-label tooltip."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "ghost",
|
|
"description": "Background treatment of the chip."
|
|
},
|
|
{
|
|
"name": "weight",
|
|
"type": "\"regular\" | \"medium\"",
|
|
"required": false,
|
|
"defaultValue": "regular",
|
|
"description": "Font weight of the label."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Tag",
|
|
"entryPoint": "twenty-ui/primitives/data-display",
|
|
"slug": "data-display/tag",
|
|
"props": [
|
|
{
|
|
"name": "borderStyle",
|
|
"type": "\"solid\" | \"dashed\"",
|
|
"required": false,
|
|
"defaultValue": "solid",
|
|
"description": "Border style used by the outline variant."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"ruby\" | \"red\" | \"crimson\" | \"tomato\" | \"orange\" | \"amber\" | \"yellow\" | \"lime\" | \"grass\" | \"green\" | \"jade\" | \"mint\" | \"turquoise\" | \"cyan\" | \"sky\" | \"blue\" | \"iris\" | \"violet\" | \"purple\" | \"plum\" | \"pink\" | \"bronze\" | \"gold\" | \"brown\" | \"gray\" | \"transparent\"",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Theme color for the tag, or `transparent` for an unfilled label."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Applies disabled styling and prevents pointer and keyboard activation."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Set to `false` when a clickable tag uses `render` with an element other than a native button."
|
|
},
|
|
{
|
|
"name": "preventPadding",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Removes the tag padding."
|
|
},
|
|
{
|
|
"name": "preventShrink",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Keeps the tag from shrinking and disables string-label truncation and its tooltip."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "startIcon",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Decorative icon before the label. Hidden from assistive technology."
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "\"solid\" | \"outline\" | \"ghost\" | \"soft\"",
|
|
"required": false,
|
|
"defaultValue": "soft",
|
|
"description": "Visual treatment of the tag background and border."
|
|
},
|
|
{
|
|
"name": "weight",
|
|
"type": "\"regular\" | \"medium\"",
|
|
"required": false,
|
|
"defaultValue": "regular",
|
|
"description": "Font weight of the label."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Status",
|
|
"entryPoint": "twenty-ui/primitives/data-display",
|
|
"slug": "data-display/status",
|
|
"props": [
|
|
{
|
|
"name": "color",
|
|
"type": "\"ruby\" | \"red\" | \"crimson\" | \"tomato\" | \"orange\" | \"amber\" | \"yellow\" | \"lime\" | \"grass\" | \"green\" | \"jade\" | \"mint\" | \"turquoise\" | \"cyan\" | \"sky\" | \"blue\" | \"iris\" | \"violet\" | \"purple\" | \"plum\" | \"pink\" | \"bronze\" | \"gold\" | \"brown\" | \"gray\"",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Theme color used for the status background, text, and loader."
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Applies disabled styling and disables activation when `onClick` is supplied."
|
|
},
|
|
{
|
|
"name": "loading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "false",
|
|
"description": "Shows a loader after the label. Does not disable the control or announce a status change by itself."
|
|
},
|
|
{
|
|
"name": "nativeButton",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Set to `false` when using `render` with an element other than a native button."
|
|
},
|
|
{
|
|
"name": "onClick",
|
|
"type": "MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLElement>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Handles activation and renders a native button by default. Without it, the default element is a span."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "NonNullable<ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}> | undefined>",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Replaces the default element. Required when `nativeButton` is `false`."
|
|
},
|
|
{
|
|
"name": "weight",
|
|
"type": "\"regular\" | \"medium\"",
|
|
"required": false,
|
|
"defaultValue": "regular",
|
|
"description": "Font weight of the label."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Heading",
|
|
"entryPoint": "twenty-ui/primitives/typography",
|
|
"slug": "typography/heading",
|
|
"props": [
|
|
{
|
|
"name": "color",
|
|
"type": "\"primary\" | \"secondary\" | \"tertiary\"",
|
|
"required": false,
|
|
"defaultValue": "primary",
|
|
"description": "Theme font color. Defaults to `primary`."
|
|
},
|
|
{
|
|
"name": "level",
|
|
"type": "5 | 1 | 2 | 3 | 4 | 6",
|
|
"required": false,
|
|
"defaultValue": "2",
|
|
"description": "Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xs\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Visual font size, independent of the heading level. Defaults to `md`."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Section",
|
|
"entryPoint": "twenty-ui/components",
|
|
"slug": "components/section",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Root",
|
|
"props": [
|
|
{
|
|
"name": "align",
|
|
"type": "\"center\" | \"left\"",
|
|
"required": false,
|
|
"defaultValue": "left",
|
|
"description": "Text alignment within the section. Defaults to `left`."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"primary\" | \"secondary\" | \"tertiary\"",
|
|
"required": false,
|
|
"defaultValue": "primary",
|
|
"description": "Text color within the section. Defaults to `primary`."
|
|
},
|
|
{
|
|
"name": "fullWidth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"defaultValue": "true",
|
|
"description": "Whether the section fills the available width. Defaults to `true`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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": "Header",
|
|
"props": [
|
|
{
|
|
"name": "adornment",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Content alongside the heading, such as an action button or status."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"primary\" | \"secondary\" | \"tertiary\"",
|
|
"required": false,
|
|
"defaultValue": "primary",
|
|
"description": "Theme font color. Defaults to `primary`."
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Supporting text associated with the heading. Strings support links and overflow tooltips; React nodes render as supplied."
|
|
},
|
|
{
|
|
"name": "descriptionLineClamp",
|
|
"type": "number",
|
|
"required": false,
|
|
"defaultValue": "5",
|
|
"description": "Maximum visible lines for a string description. Defaults to `5`. Overflowing descriptions can be read in a tooltip on hover or focus."
|
|
},
|
|
{
|
|
"name": "level",
|
|
"type": "5 | 1 | 2 | 3 | 4 | 6",
|
|
"required": false,
|
|
"defaultValue": "2",
|
|
"description": "Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xs\"",
|
|
"required": false,
|
|
"defaultValue": "md",
|
|
"description": "Visual font size, independent of the heading level. Defaults to `md`."
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "ReactNode",
|
|
"required": true,
|
|
"defaultValue": null,
|
|
"description": "Content of the section heading."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Dialog",
|
|
"entryPoint": "twenty-ui/primitives/surfaces",
|
|
"slug": "surfaces/dialog",
|
|
"props": [],
|
|
"parts": [
|
|
{
|
|
"name": "Title",
|
|
"props": [
|
|
{
|
|
"name": "className",
|
|
"type": "string | ((state: DialogTitleState) => string | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "\"primary\" | \"secondary\" | \"tertiary\"",
|
|
"required": false,
|
|
"defaultValue": "primary",
|
|
"description": "Theme font color. Defaults to `primary`."
|
|
},
|
|
{
|
|
"name": "level",
|
|
"type": "5 | 1 | 2 | 3 | 4 | 6",
|
|
"required": false,
|
|
"defaultValue": "2",
|
|
"description": "Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`."
|
|
},
|
|
{
|
|
"name": "render",
|
|
"type": "ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>",
|
|
"required": false,
|
|
"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",
|
|
"type": "\"sm\" | \"md\" | \"lg\" | \"xs\"",
|
|
"required": false,
|
|
"defaultValue": "lg",
|
|
"description": "Visual font size, independent of the heading level. Defaults to `lg`."
|
|
},
|
|
{
|
|
"name": "style",
|
|
"type": "CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined)",
|
|
"required": false,
|
|
"defaultValue": null,
|
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|