From bdd64441ec7add2ac97d2a3bfae4b83b818d74d7 Mon Sep 17 00:00:00 2001 From: Brandon Clark <98107867+bclark-p44@users.noreply.github.com> Date: Wed, 28 Sep 2022 09:53:37 -0500 Subject: [PATCH] chore: updating prettier to use prettier-config-moon (#107) --- .changeset/config.json | 7 +- .changeset/olive-fishes-float.md | 2 + .codesandbox/ci.json | 12 +- .eslintrc.js | 234 +- .github/CONTRIBUTING.md | 24 +- .github/ISSUE_TEMPLATE/bug_report.yml | 11 +- .github/ISSUE_TEMPLATE/feature_request.yml | 8 +- .jest/setupFilesAfterEnv.js | 20 +- .lintstagedrc.js | 2 +- README.md | 6 +- apps/docs/README.md | 23 +- apps/docs/content/docs/components/avatar.mdx | 6 +- apps/docs/content/docs/components/box.mdx | 3 +- .../content/docs/components/button-group.mdx | 3 +- apps/docs/content/docs/components/button.mdx | 3 +- .../docs/content/docs/components/checkbox.mdx | 15 +- .../docs/content/docs/components/combobox.mdx | 16 +- .../content/docs/components/container.mdx | 3 +- .../content/docs/components/date-picker.mdx | 14 +- .../docs/components/date-range-picker.mdx | 14 +- .../docs/content/docs/components/dropdown.mdx | 2 +- .../content/docs/components/form-control.mdx | 7 +- .../content/docs/components/icon-button.mdx | 3 +- apps/docs/content/docs/components/icon.mdx | 3 +- .../docs/content/docs/components/list-box.mdx | 5 +- .../content/docs/components/pagination.mdx | 3 +- apps/docs/content/docs/components/popover.mdx | 3 +- apps/docs/content/docs/components/radio.mdx | 7 +- apps/docs/content/docs/components/select.mdx | 10 +- apps/docs/content/docs/components/switch.mdx | 9 +- apps/docs/content/docs/components/table.mdx | 2 +- .../content/docs/components/text-area.mdx | 7 +- .../content/docs/components/text-field.mdx | 7 +- apps/docs/content/docs/components/tooltip.mdx | 6 +- .../docs/getting-started/contributing.mdx | 10 +- .../docs/getting-started/designers.mdx | 21 +- .../docs/getting-started/developers.mdx | 20 +- apps/docs/content/docs/tokens/spacing.mdx | 3 +- apps/docs/contentlayer.config.ts | 56 +- apps/docs/src/components/ActionCard.tsx | 60 +- apps/docs/src/components/Anchor.tsx | 2 +- apps/docs/src/components/BlockQuote.tsx | 46 +- .../components/CodeBlock/CodeBlock.styles.ts | 12 +- .../src/components/CodeBlock/CodeBlock.tsx | 54 +- .../CodeBlock/components/Container.tsx | 36 +- .../CodeBlock/components/Editor.tsx | 28 +- .../CodeBlock/components/Highlight.tsx | 42 +- .../components/CodeBlock/components/Live.tsx | 40 +- .../CodeBlock/components/Preview.tsx | 30 +- .../CodeBlock/components/Toolbar.tsx | 28 +- apps/docs/src/components/ColorSwatch.tsx | 60 +- apps/docs/src/components/Colors.tsx | 54 +- apps/docs/src/components/CopyButton.tsx | 68 +- apps/docs/src/components/Features.tsx | 92 +- apps/docs/src/components/Head.tsx | 28 +- apps/docs/src/components/Heading.tsx | 12 +- apps/docs/src/components/Hero.tsx | 122 +- apps/docs/src/components/Image.tsx | 20 +- apps/docs/src/components/InlineCode.tsx | 32 +- apps/docs/src/components/MDXComponents.tsx | 74 +- apps/docs/src/components/Meta.tsx | 34 +- apps/docs/src/components/PropsTable.tsx | 54 +- apps/docs/src/components/SidebarItem.tsx | 112 +- apps/docs/src/components/TOCItem.tsx | 102 +- apps/docs/src/components/Thumbnails.tsx | 22 +- apps/docs/src/components/TypeScale.tsx | 400 +- apps/docs/src/components/Value.tsx | 224 +- apps/docs/src/data/props.ts | 14608 ++++++++-------- apps/docs/src/data/sidebar.ts | 122 +- apps/docs/src/layouts/Default.tsx | 18 +- apps/docs/src/layouts/Docs.tsx | 62 +- apps/docs/src/layouts/Header.tsx | 80 +- apps/docs/src/layouts/Sidebar.tsx | 56 +- apps/docs/src/layouts/TOC.tsx | 118 +- apps/docs/src/pages/_app.tsx | 10 +- apps/docs/src/pages/_document.tsx | 50 +- apps/docs/src/pages/docs/[[...slug]].tsx | 36 +- apps/docs/src/pages/docs/components/index.tsx | 26 +- .../src/pages/docs/getting-started/index.tsx | 32 +- apps/docs/src/pages/docs/patterns/index.tsx | 2 +- apps/docs/src/pages/docs/tokens/index.tsx | 26 +- apps/docs/src/pages/index.tsx | 14 +- apps/docs/src/types.ts | 24 +- apps/docs/src/utils/colors.ts | 16 +- apps/docs/src/utils/thumbnail.ts | 4 +- apps/storybook/.storybook/main.js | 8 +- apps/storybook/.storybook/manager-head.html | 8 +- apps/storybook/.storybook/preview-head.html | 4 +- apps/storybook/.storybook/preview.jsx | 14 +- apps/storybook/.storybook/theme.js | 66 +- commitlint.config.js | 2 +- .../create-react-app-typescript/README.md | 21 +- .../public/index.html | 44 +- .../create-react-app-typescript/src/App.tsx | 24 +- .../create-react-app-typescript/src/index.tsx | 6 +- examples/create-react-app/README.md | 39 +- examples/create-react-app/public/index.html | 44 +- examples/create-react-app/src/App.js | 24 +- examples/create-react-app/src/index.js | 6 +- jest.config.js | 70 +- package.json | 1 + .../design-tokens/src/tokens/elevation.ts | 6 +- .../design-tokens/src/tokens/typography.ts | 2 +- .../src/components/Avatar/Avatar.spec.tsx | 42 +- .../src/components/Avatar/Avatar.stories.tsx | 36 +- .../src/components/Avatar/Avatar.styles.ts | 98 +- .../react/src/components/Avatar/Avatar.tsx | 124 +- .../react/src/components/Box/Box.spec.tsx | 20 +- .../react/src/components/Box/Box.stories.tsx | 8 +- .../react/src/components/Box/Box.styles.ts | 6 +- packages/react/src/components/Box/Box.tsx | 10 +- .../src/components/Button/Button.spec.tsx | 88 +- .../src/components/Button/Button.stories.tsx | 150 +- .../src/components/Button/Button.styles.ts | 360 +- .../react/src/components/Button/Button.tsx | 212 +- .../ButtonGroup/ButtonGroup.context.ts | 6 +- .../ButtonGroup/ButtonGroup.styles.ts | 46 +- .../components/ButtonGroup/ButtonGroup.tsx | 94 +- .../src/components/Calendar/Calendar.spec.tsx | 162 +- .../components/Calendar/Calendar.stories.tsx | 110 +- .../components/Calendar/Calendar.styles.ts | 6 +- .../src/components/Calendar/Calendar.tsx | 54 +- .../CalendarCell/CalendarCell.styles.ts | 388 +- .../components/CalendarCell/CalendarCell.tsx | 144 +- .../CalendarHeader/CalendarHeader.styles.ts | 12 +- .../CalendarHeader/CalendarHeader.tsx | 98 +- .../CalendarRange/CalendarRange.spec.tsx | 438 +- .../CalendarRange/CalendarRange.styles.ts | 22 +- .../CalendarRange/CalendarRange.tsx | 172 +- .../CalendarRanges/CalendarRanges.styles.ts | 12 +- .../CalendarRanges/CalendarRanges.tsx | 64 +- .../CalendarRanges/defaultDefinedRanges.ts | 164 +- .../CalendarTable/CalendarTable.styles.ts | 38 +- .../CalendarTable/CalendarTable.tsx | 86 +- .../src/components/Card/Card.stories.tsx | 40 +- .../react/src/components/Card/Card.styles.ts | 10 +- packages/react/src/components/Card/Card.tsx | 10 +- .../components/CardBody/CardBody.styles.ts | 20 +- .../src/components/CardBody/CardBody.tsx | 18 +- .../CardFooter/CardFooter.styles.ts | 14 +- .../src/components/CardFooter/CardFooter.tsx | 18 +- .../CardHeader/CardHeader.styles.ts | 14 +- .../src/components/CardHeader/CardHeader.tsx | 18 +- .../src/components/Checkbox/Checkbox.spec.tsx | 180 +- .../components/Checkbox/Checkbox.stories.tsx | 34 +- .../components/Checkbox/Checkbox.styles.ts | 186 +- .../src/components/Checkbox/Checkbox.tsx | 102 +- .../src/components/Combobox/Combobox.spec.tsx | 302 +- .../components/Combobox/Combobox.stories.tsx | 102 +- .../components/Combobox/Combobox.styles.ts | 276 +- .../src/components/Combobox/Combobox.tsx | 380 +- .../components/Container/Container.spec.tsx | 20 +- .../Container/Container.stories.tsx | 10 +- .../components/Container/Container.styles.ts | 86 +- .../src/components/Container/Container.tsx | 56 +- .../CssBaseline/CssBaseline.styles.ts | 48 +- .../components/CssBaseline/CssBaseline.tsx | 8 +- .../components/DatePicker/DatePicker.spec.tsx | 142 +- .../DatePicker/DatePicker.stories.tsx | 28 +- .../DatePicker/DatePicker.styles.ts | 266 +- .../src/components/DatePicker/DatePicker.tsx | 364 +- .../DateRangePicker/DateRangePicker.spec.tsx | 496 +- .../DateRangePicker.stories.tsx | 164 +- .../DateRangePicker/DateRangePicker.tsx | 440 +- .../components/Dropdown/Dropdown.context.tsx | 8 +- .../src/components/Dropdown/Dropdown.spec.tsx | 396 +- .../components/Dropdown/Dropdown.stories.tsx | 166 +- .../src/components/Dropdown/Dropdown.tsx | 218 +- .../DropdownItem/DropdownItem.styles.ts | 144 +- .../components/DropdownItem/DropdownItem.tsx | 196 +- .../src/components/DropdownItem/index.ts | 2 +- .../DropdownMenu/DropdownMenu.styles.ts | 38 +- .../components/DropdownMenu/DropdownMenu.tsx | 84 +- .../DropdownSection/DropdownSection.styles.ts | 26 +- .../DropdownSection/DropdownSection.tsx | 104 +- .../react/src/components/Flex/Flex.spec.tsx | 20 +- .../react/src/components/Flex/Flex.styles.ts | 82 +- packages/react/src/components/Flex/Flex.tsx | 70 +- .../FormControl/FormControl.spec.tsx | 80 +- .../FormControl/FormControl.stories.tsx | 28 +- .../FormControl/FormControl.styles.ts | 78 +- .../components/FormControl/FormControl.tsx | 158 +- .../react/src/components/Grid/Grid.spec.tsx | 44 +- .../src/components/Grid/Grid.stories.tsx | 100 +- .../react/src/components/Grid/Grid.styles.ts | 110 +- packages/react/src/components/Grid/Grid.tsx | 108 +- .../components/GridItem/GridItem.styles.ts | 2 +- .../src/components/GridItem/GridItem.tsx | 124 +- .../HiddenMultiSelect/HiddenMultiSelect.tsx | 94 +- .../HiddenMultiSelect/useHiddenMultiSelect.ts | 62 +- .../src/components/Icon/Icon.stories.tsx | 12 +- .../react/src/components/Icon/Icon.styles.ts | 4 +- packages/react/src/components/Icon/Icon.tsx | 30 +- .../IconButton/IconButton.styles.ts | 22 +- .../src/components/IconButton/IconButton.tsx | 30 +- .../src/components/Link/Link.stories.tsx | 20 +- .../react/src/components/Link/Link.styles.ts | 20 +- packages/react/src/components/Link/Link.tsx | 14 +- .../components/ListBox/ListBox.stories.tsx | 96 +- .../react/src/components/ListBox/ListBox.tsx | 8 +- .../ListBoxBase/ListBoxBase.styles.ts | 32 +- .../components/ListBoxBase/ListBoxBase.tsx | 66 +- .../ListBoxContext/ListBoxContext.tsx | 2 +- .../ListBoxItem/ListBoxItem.styles.ts | 146 +- .../components/ListBoxItem/ListBoxItem.tsx | 158 +- .../ListBoxSection/ListBoxSection.styles.ts | 22 +- .../ListBoxSection/ListBoxSection.tsx | 80 +- .../src/components/ListBoxSection/index.ts | 6 +- .../MultiCombobox/MultiCombobox.spec.tsx | 980 +- .../MultiCombobox/MultiCombobox.stories.tsx | 24 +- .../MultiCombobox/MultiCombobox.styles.ts | 250 +- .../MultiCombobox/MultiCombobox.tsx | 404 +- .../MultiSelect/MultiSelect.spec.tsx | 852 +- .../MultiSelect/MultiSelect.stories.tsx | 108 +- .../MultiSelect/MultiSelect.styles.ts | 234 +- .../components/MultiSelect/MultiSelect.tsx | 394 +- .../src/components/Overlay/Overlay.spec.tsx | 36 +- .../react/src/components/Overlay/Overlay.tsx | 30 +- .../Pagination/Pagination.stories.tsx | 28 +- .../Pagination/Pagination.styles.ts | 36 +- .../src/components/Pagination/Pagination.tsx | 310 +- .../PaginationItem/PaginationItem.styles.ts | 122 +- .../PaginationItem/PaginationItem.tsx | 88 +- .../src/components/Pill/Pill.stories.tsx | 34 +- .../react/src/components/Pill/Pill.styles.ts | 154 +- packages/react/src/components/Pill/Pill.tsx | 142 +- .../components/Popover/Popover.context.tsx | 26 +- .../src/components/Popover/Popover.spec.tsx | 98 +- .../src/components/Popover/Popover.styles.ts | 18 +- .../react/src/components/Popover/Popover.tsx | 150 +- .../src/components/Portal/Portal.spec.tsx | 54 +- .../react/src/components/Portal/Portal.tsx | 22 +- .../src/components/Provider/Provider.tsx | 38 +- .../react/src/components/Radio/Radio.spec.tsx | 220 +- .../src/components/Radio/Radio.stories.tsx | 56 +- .../src/components/Radio/Radio.styles.ts | 172 +- packages/react/src/components/Radio/Radio.tsx | 86 +- .../RadioGroup/RadioGroup.context.ts | 2 +- .../RadioGroup/RadioGroup.styles.ts | 38 +- .../src/components/RadioGroup/RadioGroup.tsx | 66 +- .../src/components/Select/Select.spec.tsx | 136 +- .../src/components/Select/Select.stories.tsx | 132 +- .../src/components/Select/Select.styles.ts | 276 +- .../react/src/components/Select/Select.tsx | 384 +- .../Separator/Separator.stories.tsx | 16 +- .../components/Separator/Separator.styles.ts | 42 +- .../src/components/Separator/Separator.tsx | 36 +- .../react/src/components/Stack/Stack.spec.tsx | 20 +- .../src/components/Stack/Stack.stories.tsx | 26 +- .../src/components/Stack/Stack.styles.ts | 66 +- packages/react/src/components/Stack/Stack.tsx | 52 +- .../src/components/Switch/Switch.spec.tsx | 122 +- .../src/components/Switch/Switch.stories.tsx | 30 +- .../src/components/Switch/Switch.styles.ts | 152 +- .../react/src/components/Switch/Switch.tsx | 88 +- .../src/components/Table/Table.context.tsx | 6 +- .../src/components/Table/Table.stories.tsx | 282 +- .../src/components/Table/Table.styles.ts | 6 +- packages/react/src/components/Table/Table.tsx | 38 +- .../src/components/TableBody/TableBody.tsx | 6 +- .../components/TableCell/TableCell.styles.ts | 54 +- .../src/components/TableCell/TableCell.tsx | 88 +- .../TableColumn/TableColumn.styles.ts | 102 +- .../components/TableColumn/TableColumn.tsx | 158 +- .../components/TableFooter/TableFooter.tsx | 6 +- .../components/TableHeader/TableHeader.tsx | 6 +- .../components/TableRow/TableRow.styles.ts | 20 +- .../src/components/TableRow/TableRow.tsx | 74 +- .../react/src/components/Tag/Tag.stories.tsx | 12 +- .../react/src/components/Tag/Tag.styles.ts | 72 +- packages/react/src/components/Tag/Tag.tsx | 56 +- .../src/components/TextArea/TextArea.spec.tsx | 88 +- .../components/TextArea/TextArea.stories.tsx | 16 +- .../components/TextArea/TextArea.styles.ts | 6 +- .../src/components/TextArea/TextArea.tsx | 130 +- .../components/TextField/TextField.spec.tsx | 88 +- .../TextField/TextField.stories.tsx | 40 +- .../components/TextField/TextField.styles.ts | 58 +- .../src/components/TextField/TextField.tsx | 112 +- .../TextFieldBase/TextFieldBase.spec.tsx | 26 +- .../TextFieldBase/TextFieldBase.styles.ts | 204 +- .../TextFieldBase/TextFieldBase.tsx | 266 +- .../components/Tooltip/Tooltip.stories.tsx | 34 +- .../src/components/Tooltip/Tooltip.styles.ts | 14 +- .../react/src/components/Tooltip/Tooltip.tsx | 136 +- .../Typography/Typography.stories.tsx | 44 +- .../Typography/Typography.styles.ts | 46 +- .../src/components/Typography/Typography.tsx | 50 +- .../VisuallyHidden/VisuallyHidden.tsx | 20 +- packages/react/src/hooks/useMultiCombobox.ts | 26 +- packages/react/src/hooks/useMultiSelect.ts | 284 +- .../src/state/useMultiComboboxState.spec.tsx | 344 +- .../react/src/state/useMultiComboboxState.ts | 540 +- .../state/useMultiSelectListState.spec.tsx | 66 +- .../src/state/useMultiSelectListState.ts | 70 +- .../src/state/useMultiSelectState.spec.tsx | 82 +- .../react/src/state/useMultiSelectState.ts | 48 +- packages/react/src/styles/shared/focus.ts | 30 +- packages/react/src/styles/styles.ts | 30 +- packages/react/src/styles/utils/color.spec.ts | 8 +- packages/react/src/styles/utils/color.ts | 2 +- .../react/src/styles/utils/layout.spec.ts | 66 +- packages/react/src/styles/utils/layout.ts | 16 +- packages/react/src/styles/utils/space.spec.ts | 120 +- packages/react/src/styles/utils/space.ts | 46 +- .../react/src/styles/utils/typography.spec.ts | 16 +- packages/react/src/styles/utils/typography.ts | 164 +- packages/react/src/types.ts | 230 +- packages/react/src/utils/filter.ts | 38 +- packages/system/src/system.spec.tsx | 62 +- packages/system/src/system.tsx | 4 +- packages/system/src/types.ts | 22 +- packages/theme/src/themes/base.spec.ts | 6 +- packages/theme/src/themes/base.ts | 422 +- packages/theme/src/themes/light.spec.ts | 12 +- packages/theme/src/themes/light.ts | 62 +- packages/theme/src/utils/pxToRem.spec.ts | 6 +- prettier.config.js | 12 +- scripts/generate-prop-docs.ts | 170 +- yarn.lock | 8 + 320 files changed, 20490 insertions(+), 20359 deletions(-) create mode 100644 .changeset/olive-fishes-float.md diff --git a/.changeset/config.json b/.changeset/config.json index 096e015c..129fe887 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,11 @@ { "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json", - "changelog": ["@changesets/changelog-github", { "repo": "project44/manifest" }], + "changelog": [ + "@changesets/changelog-github", + { + "repo": "project44/manifest" + } + ], "commit": false, "fixed": [], "linked": [], diff --git a/.changeset/olive-fishes-float.md b/.changeset/olive-fishes-float.md new file mode 100644 index 00000000..a845151c --- /dev/null +++ b/.changeset/olive-fishes-float.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index ee7cf847..da6f5ebf 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,6 +1,14 @@ { "buildCommand": "build", "node": "16", - "packages": ["/packages/design-tokens", "/packages/react", "/packages/system", "/packages/theme"], - "sandboxes": ["/examples/create-react-app", "/examples/create-react-app-typescript"] + "packages": [ + "/packages/design-tokens", + "/packages/react", + "/packages/system", + "/packages/theme" + ], + "sandboxes": [ + "/examples/create-react-app", + "/examples/create-react-app-typescript" + ] } diff --git a/.eslintrc.js b/.eslintrc.js index f62e3540..c01a02e3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,119 +1,119 @@ module.exports = { - root: true, - parser: '@typescript-eslint/parser', - parserOptions: { - tsconfigRootDir: __dirname, - project: 'tsconfig.options.json', - }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:@typescript-eslint/recommended-requiring-type-checking', - 'plugin:prettier/recommended', - ], - plugins: ['import', '@typescript-eslint'], - env: { - es6: true, - browser: true, - node: true, - }, - globals: { - __DEV__: 'readonly', - __PROD__: 'readonly', - }, - rules: { - 'no-param-reassign': 'off', - 'no-use-before-define': 0, - 'import/first': 'error', - 'import/prefer-default-export': 'off', - 'import/newline-after-import': 'error', - 'import/no-amd': 'error', - 'import/no-extraneous-dependencies': 'off', - 'import/order': [ - 'error', - { - groups: [], - 'newlines-between': 'never', - }, - ], - '@typescript-eslint/ban-ts-comment': 'warn', - '@typescript-eslint/consistent-type-definitions': ['error', 'interface'], - '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/no-unsafe-assignment': 'off', - '@typescript-eslint/no-unsafe-call': 'off', - '@typescript-eslint/no-unsafe-member-access': 'off', - '@typescript-eslint/no-var-requires': 'off', - '@typescript-eslint/prefer-as-const': 'error', - '@typescript-eslint/prefer-nullish-coalescing': 'error', - '@typescript-eslint/prefer-optional-chain': 'error', - '@typescript-eslint/restrict-template-expressions': 'off', - '@typescript-eslint/unbound-method': 'off', - }, - overrides: [ - { - files: ['*.tsx'], - extends: [ - 'plugin:react-hooks/recommended', - 'plugin:react/recommended', - 'plugin:jsx-a11y/recommended', - ], - plugins: ['jsx-a11y', 'react', 'react-hooks', 'react-perf'], - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - }, - settings: { - react: { - version: 'detect', - }, - }, - rules: { - 'react/display-name': 'off', - 'react/forbid-prop-types': 'off', - 'react/jsx-props-no-spreading': 'off', - 'react/prop-types': 'off', - 'react/require-default-props': 'off', - 'react/sort-prop-types': 'off', - 'react-hooks/exhaustive-deps': 'error', - 'react-hooks/rules-of-hooks': 'error', - }, - }, - { - files: ['**/*.{spec,test}.*'], - env: { - jest: true, - 'jest/globals': true, - }, - extends: ['plugin:jest/recommended'], - plugins: ['jest'], - rules: { - '@typescript-eslint/no-unsafe-assignment': 'off', - '@typescript-eslint/no-unsafe-call': 'off', - '@typescript-eslint/no-unsafe-member-access': 'off', - '@typescript-eslint/no-unsafe-return': 'off', - 'jest/no-alias-methods': 'error', - 'jest/no-disabled-tests': 'warn', - 'jest/no-done-callback': 'error', - 'jest/no-export': 'error', - 'jest/no-focused-tests': 'error', - 'jest/no-identical-title': 'error', - 'jest/no-if': 'error', - 'jest/no-jasmine-globals': 'error', - 'jest/no-jest-import': 'error', - 'jest/no-standalone-expect': 'error', - 'jest/no-test-prefixes': 'error', - 'jest/no-test-return-statement': 'error', - 'jest/prefer-hooks-on-top': 'error', - 'jest/prefer-spy-on': 'error', - 'jest/prefer-to-be': 'warn', - 'jest/prefer-to-contain': 'warn', - 'jest/prefer-to-have-length': 'warn', - 'jest/prefer-todo': 'error', - 'jest/valid-expect': 'error', - 'jest/valid-title': 'error', - }, - }, - ], + root: true, + parser: '@typescript-eslint/parser', + parserOptions: { + tsconfigRootDir: __dirname, + project: 'tsconfig.options.json', + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended-requiring-type-checking', + 'plugin:prettier/recommended', + ], + plugins: ['import', '@typescript-eslint'], + env: { + es6: true, + browser: true, + node: true, + }, + globals: { + __DEV__: 'readonly', + __PROD__: 'readonly', + }, + rules: { + 'no-param-reassign': 'off', + 'no-use-before-define': 0, + 'import/first': 'error', + 'import/prefer-default-export': 'off', + 'import/newline-after-import': 'error', + 'import/no-amd': 'error', + 'import/no-extraneous-dependencies': 'off', + 'import/order': [ + 'error', + { + groups: [], + 'newlines-between': 'never', + }, + ], + '@typescript-eslint/ban-ts-comment': 'warn', + '@typescript-eslint/consistent-type-definitions': ['error', 'interface'], + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-unsafe-assignment': 'off', + '@typescript-eslint/no-unsafe-call': 'off', + '@typescript-eslint/no-unsafe-member-access': 'off', + '@typescript-eslint/no-var-requires': 'off', + '@typescript-eslint/prefer-as-const': 'error', + '@typescript-eslint/prefer-nullish-coalescing': 'error', + '@typescript-eslint/prefer-optional-chain': 'error', + '@typescript-eslint/restrict-template-expressions': 'off', + '@typescript-eslint/unbound-method': 'off', + }, + overrides: [ + { + files: ['*.tsx'], + extends: [ + 'plugin:react-hooks/recommended', + 'plugin:react/recommended', + 'plugin:jsx-a11y/recommended', + ], + plugins: ['jsx-a11y', 'react', 'react-hooks', 'react-perf'], + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + settings: { + react: { + version: 'detect', + }, + }, + rules: { + 'react/display-name': 'off', + 'react/forbid-prop-types': 'off', + 'react/jsx-props-no-spreading': 'off', + 'react/prop-types': 'off', + 'react/require-default-props': 'off', + 'react/sort-prop-types': 'off', + 'react-hooks/exhaustive-deps': 'error', + 'react-hooks/rules-of-hooks': 'error', + }, + }, + { + files: ['**/*.{spec,test}.*'], + env: { + jest: true, + 'jest/globals': true, + }, + extends: ['plugin:jest/recommended'], + plugins: ['jest'], + rules: { + '@typescript-eslint/no-unsafe-assignment': 'off', + '@typescript-eslint/no-unsafe-call': 'off', + '@typescript-eslint/no-unsafe-member-access': 'off', + '@typescript-eslint/no-unsafe-return': 'off', + 'jest/no-alias-methods': 'error', + 'jest/no-disabled-tests': 'warn', + 'jest/no-done-callback': 'error', + 'jest/no-export': 'error', + 'jest/no-focused-tests': 'error', + 'jest/no-identical-title': 'error', + 'jest/no-if': 'error', + 'jest/no-jasmine-globals': 'error', + 'jest/no-jest-import': 'error', + 'jest/no-standalone-expect': 'error', + 'jest/no-test-prefixes': 'error', + 'jest/no-test-return-statement': 'error', + 'jest/prefer-hooks-on-top': 'error', + 'jest/prefer-spy-on': 'error', + 'jest/prefer-to-be': 'warn', + 'jest/prefer-to-contain': 'warn', + 'jest/prefer-to-have-length': 'warn', + 'jest/prefer-todo': 'error', + 'jest/valid-expect': 'error', + 'jest/valid-title': 'error', + }, + }, + ], }; diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 9dd6b81e..7e56e403 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -15,11 +15,13 @@ Manifest Design System packages follow [semantic versioning](https://semver.org/ ## Pull Requests -If this is your first pull request into an open source project, please take a moment and watch this free video series: +If this is your first pull request into an open source project, please take a moment and watch this +free video series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) -Before working on an issue or feature please review any tickets, pr's, and discussions to be certain that no one is actively working on the same issue or feature. +Before working on an issue or feature please review any tickets, pr's, and discussions to be certain +that no one is actively working on the same issue or feature. ### Making a Pull Request @@ -44,7 +46,8 @@ easily searchable. ## Development -Before you begin development, please make sure that you have [Node](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/) setup on your machine. +Before you begin development, please make sure that you have [Node](https://nodejs.org/en/) and +[Yarn](https://yarnpkg.com/) setup on your machine. 1. Install dependencies @@ -66,14 +69,17 @@ yarn dev ## Testing -We use [jest](https://jestjs.io/) as our test runner along with [react testing library](https://testing-library.com/docs/react-testing-library/intro/) for our react code base. -Please be sure to add or update unit tests for any code changes. Run `yarn test` to run jest. +We use [jest](https://jestjs.io/) as our test runner along with +[react testing library](https://testing-library.com/docs/react-testing-library/intro/) for our react +code base. Please be sure to add or update unit tests for any code changes. Run `yarn test` to run +jest. It is also recommended to verify you changes by running the local development server. ## Code Formatting -For code formatting we use [Prettier](https://prettier.io/), run `yarn format` to automatically format your code. +For code formatting we use [Prettier](https://prettier.io/), run `yarn format` to automatically +format your code. ## Linting @@ -81,11 +87,13 @@ Code linting is controlled by [ESLint](https://eslint.org/) and can be run with ## Type Checking -Our codebase is written in [Typescript](https://www.typescriptlang.org/) and can be check by running `yarn type-check`. +Our codebase is written in [Typescript](https://www.typescriptlang.org/) and can be check by running +`yarn type-check`. ## Releasing -Releases are controlled automatically via [changesets](https://github.com/changesets/changesets) in our github workflows. +Releases are controlled automatically via [changesets](https://github.com/changesets/changesets) in +our github workflows. ## License diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 4e59331d..118cd4de 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -20,7 +20,8 @@ body: id: reproduction attributes: label: Link to reproduction - description: Provide us a reproduction of the issue using [codeSandbox](https://codesandbox.io/). + description: + Provide us a reproduction of the issue using [codeSandbox](https://codesandbox.io/). validations: required: true - type: textarea @@ -36,8 +37,10 @@ body: label: Code of Conduct description: Please confirm the following options: - - label: I agree to the [Code of + - label: + I agree to the [Code of Conduct](https://github.com/project44/manifest/blob/main/.github/CODE_OF_CONDUCT.md). required: true - - label: I have reviewed the [current issues](https://github.com/project44/manifest/issues) - for duplicate tickets. + - label: + I have reviewed the [current issues](https://github.com/project44/manifest/issues) for + duplicate tickets. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index 474fd761..f1d47d4c 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -25,8 +25,10 @@ body: label: Code of Conduct description: Please confirm the following options: - - label: I agree to the [Code of + - label: + I agree to the [Code of Conduct](https://github.com/project44/manifest/blob/main/.github/CODE_OF_CONDUCT.md). required: true - - label: I have reviewed the [current issues](https://github.com/project44/manifest/issues) - for duplicate tickets. + - label: + I have reviewed the [current issues](https://github.com/project44/manifest/issues) for + duplicate tickets. diff --git a/.jest/setupFilesAfterEnv.js b/.jest/setupFilesAfterEnv.js index 9d6a9e94..19a4110c 100644 --- a/.jest/setupFilesAfterEnv.js +++ b/.jest/setupFilesAfterEnv.js @@ -5,21 +5,21 @@ require('@testing-library/jest-dom'); expect.extend(toHaveNoViolations); global.DOMRect = { - fromRect: () => ({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }), + fromRect: () => ({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }), }; global.ResizeObserver = class ResizeObserver { - constructor(cb) { - this.cb = cb; - } - observe() { - this.cb([{ borderBoxSize: { blockSize: 0, inlineSize: 0 } }]); - } - unobserve() {} + constructor(cb) { + this.cb = cb; + } + observe() { + this.cb([{ borderBoxSize: { blockSize: 0, inlineSize: 0 } }]); + } + unobserve() {} }; beforeAll(() => { - const { getComputedStyle } = window; + const { getComputedStyle } = window; - window.getComputedStyle = elt => getComputedStyle(elt); + window.getComputedStyle = (elt) => getComputedStyle(elt); }); diff --git a/.lintstagedrc.js b/.lintstagedrc.js index 7ad3f083..aea683d2 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -1,3 +1,3 @@ module.exports = { - '**/*.{ts,tsx,js,jsx}': ['yarn run format --write'], + '**/*.{ts,tsx,js,jsx}': ['yarn run format --write'], }; diff --git a/README.md b/README.md index 5b59e6e6..8756f7f5 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,8 @@ yarn add @project44-manifest/react ``` -Check out our [documentation](https://zeroheight.com/27d9b4710/v/latest/p/93d303-developers) for installation instructions and setup. +Check out our [documentation](https://zeroheight.com/27d9b4710/v/latest/p/93d303-developers) for +installation instructions and setup. ### Packages @@ -60,7 +61,8 @@ For full documentation visit our [design system website](https://p44design.syste ## 🙌 Contributing -Contributions are always welcome!! Please review our [Contribution Guide](/.github/CONTRIBUTING.md) to get started. +Contributions are always welcome!! Please review our [Contribution Guide](/.github/CONTRIBUTING.md) +to get started. ## License diff --git a/apps/docs/README.md b/apps/docs/README.md index c87e0421..575f9368 100644 --- a/apps/docs/README.md +++ b/apps/docs/README.md @@ -1,4 +1,5 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +This is a [Next.js](https://nextjs.org/) project bootstrapped with +[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). ## Getting Started @@ -12,11 +13,15 @@ yarn dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the +file. -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on +[http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in +`pages/api/hello.ts`. -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as +[API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. ## Learn More @@ -25,10 +30,14 @@ To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your +feedback and contributions are welcome! ## Deploy on Vercel -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +The easiest way to deploy your Next.js app is to use the +[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) +from the creators of Next.js. -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more +details. diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx index 68959e17..801bdc07 100644 --- a/apps/docs/content/docs/components/avatar.mdx +++ b/apps/docs/content/docs/components/avatar.mdx @@ -11,9 +11,11 @@ description: A visual representation of a user or entity. ### Fallback -Avatars that either do not include a `src` prop or have an error loading an image will render the `fallback` prop instead. +Avatars that either do not include a `src` prop or have an error loading an image will render the +`fallback` prop instead. -> Make sure that the `fallback` prop consists of two letters representing the entity represented in the avatar. +> Make sure that the `fallback` prop consists of two letters representing the entity represented in +> the avatar. ```jsx diff --git a/apps/docs/content/docs/components/box.mdx b/apps/docs/content/docs/components/box.mdx index 57466ee5..4a7636a0 100644 --- a/apps/docs/content/docs/components/box.mdx +++ b/apps/docs/content/docs/components/box.mdx @@ -11,7 +11,8 @@ description: A polymorphic component used for access theme aware styling. ### As prop -All components a polymorphic `as` prop. This prop is useful for changing the rendering element of a component. You can also use the as prop to render another component. +All components a polymorphic `as` prop. This prop is useful for changing the rendering element of a +component. You can also use the as prop to render another component. ```jsx diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx index 9e629894..d908bdf1 100644 --- a/apps/docs/content/docs/components/button.mdx +++ b/apps/docs/content/docs/components/button.mdx @@ -19,7 +19,8 @@ Primary buttons are used to indicate the highest priority action a user can perf ### Secondary -Secondary buttons are second in priority to primary buttons and are used for important actions that aren't the primary action. +Secondary buttons are second in priority to primary buttons and are used for important actions that +aren't the primary action. ```jsx diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx index c151686a..25f01f7a 100644 --- a/apps/docs/content/docs/components/checkbox.mdx +++ b/apps/docs/content/docs/components/checkbox.mdx @@ -19,13 +19,14 @@ Pass in a `string` as a child to render a label for the checkbox. ### Controlled -A checkbox's state can be controlled by a parent React component by setting the `isSelected` prop and passing a handler to the `onChange` prop. +A checkbox's state can be controlled by a parent React component by setting the `isSelected` prop +and passing a handler to the `onChange` prop. ```jsx function ControlledExample() { const [selected, setSelected] = React.useState(false); - const handleChange = isSelected => { + const handleChange = (isSelected) => { setSelected(isSelected); }; @@ -41,15 +42,15 @@ Set the `isIndeterminate` prop to render the checkbox in an indeterminate state. function IndeterminateExample() { const [selected, setSelected] = React.useState([false, false]); - const handleParentChange = isSelected => { + const handleParentChange = (isSelected) => { setSelected([isSelected, isSelected]); }; - const handleFirstChange = isSelected => { + const handleFirstChange = (isSelected) => { setSelected([isSelected, selected[1]]); }; - const handleSecondChange = isSelected => { + const handleSecondChange = (isSelected) => { setSelected([selected[0], isSelected]); }; @@ -87,7 +88,9 @@ Set the `isDisabled` prop to prevent a user from selecting a checkbox. ### Labeling -If a visible label isn't specified, an aria-label must be provided to the checkbox for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the checkbox for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/combobox.mdx b/apps/docs/content/docs/components/combobox.mdx index 8cc821dc..aa9a4b42 100644 --- a/apps/docs/content/docs/components/combobox.mdx +++ b/apps/docs/content/docs/components/combobox.mdx @@ -20,7 +20,9 @@ description: An autocomplete input that allows a user to filter a list of select ## Examples -The comboBox follows the [Collection Components](https://react-spectrum.adobe.com/react-stately/collections.html) API, accepting both static and dynamic collections. +The comboBox follows the +[Collection Components](https://react-spectrum.adobe.com/react-stately/collections.html) API, +accepting both static and dynamic collections. ### Label @@ -175,7 +177,7 @@ function DynamicExample() { return ( - {item => {item.name}} + {(item) => {item.name}} ); @@ -227,11 +229,11 @@ function ControlledExample() { aria-label="status" defaultItems={list.items} inputValue={state.inputValue} - onInputChange={value => dispatch({ type: 'INPUT_CHANGE', payload: value })} - onSelectionChange={key => dispatch({ type: 'SELECTION_CHANGE', payload: key })} + onInputChange={(value) => dispatch({ type: 'INPUT_CHANGE', payload: value })} + onSelectionChange={(key) => dispatch({ type: 'SELECTION_CHANGE', payload: key })} selectedKey={state.selectedKey} > - {item => {item.value.name}} + {(item) => {item.value.name}} ); @@ -299,7 +301,9 @@ Set the `validationState` prop to `invalid` to render the combobox in an invalid ### Labeling -If a visible label isn't specified, an aria-label must be provided to the combobox for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the combobox for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/container.mdx b/apps/docs/content/docs/components/container.mdx index 659026ff..349d944c 100644 --- a/apps/docs/content/docs/components/container.mdx +++ b/apps/docs/content/docs/components/container.mdx @@ -31,7 +31,8 @@ Set the `maxWidth` prop to limited the maximum width the container can stretch t ### Fixed -Set the `fixed` prop to ensure the container's max-width matches the min-width of the current breakpoint. +Set the `fixed` prop to ensure the container's max-width matches the min-width of the current +breakpoint. ```jsx diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index 009a281d..9ed64f12 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -53,9 +53,13 @@ Include an icon before the input text. ### Controlled -A datepickers's state can be controlled by a parent React component by setting the `value` prop and passing a handler to the `onChange` prop. +A datepickers's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. -> Date values are provided using objects in the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. +> Date values are provided using objects in the +> [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date) package. This +> library handles correct international date manipulation across calendars, time zones, and other +> localization concerns. ```jsx function ControlledExample() { @@ -76,7 +80,7 @@ Set the `isDateUnavailable` handler prop to make certain dates unavailable for s ```jsx function UnavailableExample() { const { locale } = useLocale(); - const isDateUnavailable = date => isWeekend(date, locale); + const isDateUnavailable = (date) => isWeekend(date, locale); return ( @@ -114,7 +118,9 @@ Set the `validationState` prop to `invalid` to render the datepicker in an inval ### Labeling -If a visible label isn't specified, an aria-label must be provided to the datepicker for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the datepicker for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index 08eb7a26..6a78a6d9 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -63,9 +63,13 @@ Set the `showRanges` prop to display a pre-set list of relative date ranges. ### Controlled -A datepickers's state can be controlled by a parent React component by setting the `value` prop and passing a handler to the `onChange` prop. +A datepickers's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. -> Date values are provided using objects in the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. +> Date values are provided using objects in the +> [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date) package. This +> library handles correct international date manipulation across calendars, time zones, and other +> localization concerns. ```jsx function ControlledExample() { @@ -89,7 +93,7 @@ Set the `isDateUnavailable` handler prop to make certain dates unavailable for s ```jsx function UnavailableExample() { const { locale } = useLocale(); - const isDateUnavailable = date => isWeekend(date, locale); + const isDateUnavailable = (date) => isWeekend(date, locale); return ( @@ -127,7 +131,9 @@ Set the `validationState` prop to `invalid` to render the datepicker in an inval ### Labeling -If a visible label isn't specified, an aria-label must be provided to the datepicker for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the datepicker for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx index 36a08b5a..ac9c174b 100644 --- a/apps/docs/content/docs/components/dropdown.mdx +++ b/apps/docs/content/docs/components/dropdown.mdx @@ -81,7 +81,7 @@ function DynamicExample() { - {item => {item.name}} + {(item) => {item.name}} ); } diff --git a/apps/docs/content/docs/components/form-control.mdx b/apps/docs/content/docs/components/form-control.mdx index dd506afd..013812a3 100644 --- a/apps/docs/content/docs/components/form-control.mdx +++ b/apps/docs/content/docs/components/form-control.mdx @@ -13,7 +13,8 @@ description: Attach a label and helper text to form inputs. ### Optional -By default form control elements are required, to mark form element as optional set the `isRequired` prop to false. +By default form control elements are required, to mark form element as optional set the `isRequired` +prop to false. ```jsx @@ -35,7 +36,9 @@ Set the `validationState` prop to `invalid` to render the form control in an inv ### Labeling -If a visible label isn't specified, an aria-label must be provided to the input for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the input for accessibility. +If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id +of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/icon-button.mdx b/apps/docs/content/docs/components/icon-button.mdx index 01c92aa6..d6ca60a2 100644 --- a/apps/docs/content/docs/components/icon-button.mdx +++ b/apps/docs/content/docs/components/icon-button.mdx @@ -23,7 +23,8 @@ Primary buttons are used to indicate the highest priority action a user can perf ### Secondary -Secondary buttons are second in priority to primary buttons and are used for important actions that aren't the primary action. +Secondary buttons are second in priority to primary buttons and are used for important actions that +aren't the primary action. ```jsx diff --git a/apps/docs/content/docs/components/icon.mdx b/apps/docs/content/docs/components/icon.mdx index cc3d1734..05d5cb34 100644 --- a/apps/docs/content/docs/components/icon.mdx +++ b/apps/docs/content/docs/components/icon.mdx @@ -7,7 +7,8 @@ description: Render material design icons. ``` -> For a list of available icons checkout the [Material Design Icon](https://fonts.google.com/icons) library. +> For a list of available icons checkout the [Material Design Icon](https://fonts.google.com/icons) +> library. ## API diff --git a/apps/docs/content/docs/components/list-box.mdx b/apps/docs/content/docs/components/list-box.mdx index c2921cef..4b0902bd 100644 --- a/apps/docs/content/docs/components/list-box.mdx +++ b/apps/docs/content/docs/components/list-box.mdx @@ -63,7 +63,7 @@ function DynamicExample() { return ( - {item => {item.name}} + {(item) => {item.name}} ); } @@ -124,7 +124,8 @@ Set the `disabledKeys` prop to disable certain items in the dropdown list. ## Accessibility -The list box should be labeled using the aria-label prop. If the ListBox is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +The list box should be labeled using the aria-label prop. If the ListBox is labeled by a separate +element, an aria-labelledby prop must be provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx index 09ce0752..92f29d0a 100644 --- a/apps/docs/content/docs/components/pagination.mdx +++ b/apps/docs/content/docs/components/pagination.mdx @@ -19,7 +19,8 @@ Set the `showPageNumbers` props to `false` to display only the navigation arrows ### Ranges -You can specify how many pages to show on side of the current page with the `siblings` and `boundaries` props. +You can specify how many pages to show on side of the current page with the `siblings` and +`boundaries` props. ```jsx diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx index 47793bac..b00eda69 100644 --- a/apps/docs/content/docs/components/popover.mdx +++ b/apps/docs/content/docs/components/popover.mdx @@ -3,7 +3,8 @@ title: Popover description: Used to display some content on top of another. --- -> The popover component is an internal utility component and requires additional components and hooks to function properly. +> The popover component is an internal utility component and requires additional components and +> hooks to function properly. ```jsx function PopoverExample() { diff --git a/apps/docs/content/docs/components/radio.mdx b/apps/docs/content/docs/components/radio.mdx index fa9b9ef2..f3d31953 100644 --- a/apps/docs/content/docs/components/radio.mdx +++ b/apps/docs/content/docs/components/radio.mdx @@ -25,7 +25,8 @@ Set the `orientation` prop to adjust the layout of the radio options. ### Controlled -A radio group's state can be controlled by a parent React component by setting the `value` prop and passing a handler to the `onChange` prop. +A radio group's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. ```jsx function ControlledExample() { @@ -77,7 +78,9 @@ Set the `isReadOnly` prop to render the radio items in a readonly mode. ## Accessibility -If a visible label isn't specified for a radio group, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified for a radio group, an aria-label must be provided for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. Radio elements should always have a visible label. diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index 8181e5ab..0744d013 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -20,7 +20,9 @@ description: Choose a single option from a collapsible list of options. ## Examples -The select follows the [Collection Components](https://react-spectrum.adobe.com/react-stately/collections.html) API, accepting both static and dynamic collections. +The select follows the +[Collection Components](https://react-spectrum.adobe.com/react-stately/collections.html) API, +accepting both static and dynamic collections. ### Label @@ -175,7 +177,7 @@ function DynamicExample() { return ( ); @@ -268,7 +270,9 @@ Set the `validationState` prop to `invalid` to render the select in an invalid s ### Labeling -If a visible label isn't specified, an aria-label must be provided to the select for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the select for accessibility. +If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id +of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx index 3409bdbe..02c3cd33 100644 --- a/apps/docs/content/docs/components/switch.mdx +++ b/apps/docs/content/docs/components/switch.mdx @@ -19,13 +19,14 @@ Pass in a `string` as a child to render a label for the switch. ### Controlled -A switch's state can be controlled by a parent React component by setting the `isSelected` prop and passing a handler to the `onChange` prop. +A switch's state can be controlled by a parent React component by setting the `isSelected` prop and +passing a handler to the `onChange` prop. ```jsx function ControlledExample() { const [selected, setSelected] = React.useState(false); - const handleChange = isSelected => { + const handleChange = (isSelected) => { setSelected(isSelected); }; @@ -45,7 +46,9 @@ Set the `isDisabled` prop to prevent a user from selecting a switch. ### Labeling -If a visible label isn't specified, an aria-label must be provided to the switch for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the switch for accessibility. +If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id +of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx index c612a69c..75b67b0f 100644 --- a/apps/docs/content/docs/components/table.mdx +++ b/apps/docs/content/docs/components/table.mdx @@ -134,7 +134,7 @@ function SortExample() { const [sortDirection, setSortDirection] = React.useState('asc'); const [sortedColumn, setSortedColumn] = React.useState('name'); - const handleSort = column => { + const handleSort = (column) => { const isAsc = sortedColumn === column && sortDirection === 'asc'; setSortDirection(isAsc ? 'desc' : 'asc'); diff --git a/apps/docs/content/docs/components/text-area.mdx b/apps/docs/content/docs/components/text-area.mdx index 5a8dea3a..b5742e2d 100644 --- a/apps/docs/content/docs/components/text-area.mdx +++ b/apps/docs/content/docs/components/text-area.mdx @@ -27,7 +27,8 @@ Add additional context as well as display error messages with the `helperText` p ### Controlled -A text area's state can be controlled by a parent React component by setting the `value` prop and passing a handler to the `onChange` prop. +A text area's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. ```jsx function ControlledExample() { @@ -49,7 +50,9 @@ Set the `isDisabled` prop to prevent a user from inputting text. ## Accessibility -If a visible label isn't specified, an aria-label must be provided to the text area for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the text area for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/text-field.mdx b/apps/docs/content/docs/components/text-field.mdx index d862b844..3e02d187 100644 --- a/apps/docs/content/docs/components/text-field.mdx +++ b/apps/docs/content/docs/components/text-field.mdx @@ -27,7 +27,8 @@ Add additional context as well as display error messages with the `helperText` p ### Controlled -A text area's state can be controlled by a parent React component by setting the `value` prop and passing a handler to the `onChange` prop. +A text area's state can be controlled by a parent React component by setting the `value` prop and +passing a handler to the `onChange` prop. ```jsx function ControlledExample() { @@ -47,7 +48,9 @@ Set the `isDisabled` prop to prevent a user from inputting text. ## Accessibility -If a visible label isn't specified, an aria-label must be provided to the text area for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead. +If a visible label isn't specified, an aria-label must be provided to the text area for +accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be +provided using the id of the labeling element instead. ## API diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx index 9786d947..76fdeaf7 100644 --- a/apps/docs/content/docs/components/tooltip.mdx +++ b/apps/docs/content/docs/components/tooltip.mdx @@ -13,7 +13,8 @@ description: Display additional context when users hover or focus an element. ### Placement -Set the `placement` prop on tooltip to adjust the placement of tooltip in relation to the trigger element. +Set the `placement` prop on tooltip to adjust the placement of tooltip in relation to the trigger +element. ```jsx @@ -49,7 +50,8 @@ function ControlledExample() { ## Accessibility -Tooltip triggers must be focusable and hoverable in order to ensure that all users can activate them. +Tooltip triggers must be focusable and hoverable in order to ensure that all users can activate +them. ## API diff --git a/apps/docs/content/docs/getting-started/contributing.mdx b/apps/docs/content/docs/getting-started/contributing.mdx index 8038beef..4f4ce0be 100644 --- a/apps/docs/content/docs/getting-started/contributing.mdx +++ b/apps/docs/content/docs/getting-started/contributing.mdx @@ -3,9 +3,10 @@ title: Contributing description: How to contribute to Manifest Design System. --- -Currently the Design Systems Team oversees all tokens, icons, components, and pattern within the system. -We recognize that the system might not provide all the elements needed for teams to build quickly and efficiently. -Therefor Manifest supports contributions from teams outside of the core Design Systems Team. +Currently the Design Systems Team oversees all tokens, icons, components, and pattern within the +system. We recognize that the system might not provide all the elements needed for teams to build +quickly and efficiently. Therefor Manifest supports contributions from teams outside of the core +Design Systems Team. ## Ways to Contribute @@ -16,7 +17,8 @@ Therefor Manifest supports contributions from teams outside of the core Design S ## Process -During the contribution process the Design Systems Team will partner with you to ensure that all work aligns with our core principles. +During the contribution process the Design Systems Team will partner with you to ensure that all +work aligns with our core principles. ### Getting Started diff --git a/apps/docs/content/docs/getting-started/designers.mdx b/apps/docs/content/docs/getting-started/designers.mdx index 7573ec4b..0c250f5f 100644 --- a/apps/docs/content/docs/getting-started/designers.mdx +++ b/apps/docs/content/docs/getting-started/designers.mdx @@ -5,8 +5,9 @@ description: Get started with manifest design system to design your own experien ## Figma -As a designer for project44 you have access to our design system figma file, if not, please reach out to helpdesk to help -get you setup with a figma account. Once you have an account checkout our [figma library](https://www.figma.com/file/2vyIjgJEhVc1spMWwkgzQ5/Manifest-Design-System). +As a designer for project44 you have access to our design system figma file, if not, please reach +out to helpdesk to help get you setup with a figma account. Once you have an account checkout our +[figma library](https://www.figma.com/file/2vyIjgJEhVc1spMWwkgzQ5/Manifest-Design-System). ## Usage @@ -18,18 +19,24 @@ In Figma, open the team library from the assets tab by clicking on the book icon -With the library window open, you can search or browse for a team library. Search for “Manifest Design System 3.0.0” +With the library window open, you can search or browse for a team library. Search for “Manifest +Design System 3.0.0” -After you’ve found the library, toggle it on to enable it. The components will be instantly available in your assets panel on the left-hand side. +After you’ve found the library, toggle it on to enable it. The components will be instantly +available in your assets panel on the left-hand side. -As components are updated, you’ll see a message in the bottom right corner notifying you that updates are available. Clicking “Review” will allow you to see what changes were made to the components in use. +As components are updated, you’ll see a message in the bottom right corner notifying you that +updates are available. Clicking “Review” will allow you to see what changes were made to the +components in use. -You can update individual components, or "Update All" to accept all changes and update the components in your design file to the most current version. +You can update individual components, or "Update All" to accept all changes and update the +components in your design file to the most current version. ### Font -Manifest was designed leveraging the [Inter](https://fonts.google.com/specimen/Inter?query=inter) font. +Manifest was designed leveraging the [Inter](https://fonts.google.com/specimen/Inter?query=inter) +font. diff --git a/apps/docs/content/docs/getting-started/developers.mdx b/apps/docs/content/docs/getting-started/developers.mdx index ee83f272..f124ccaf 100644 --- a/apps/docs/content/docs/getting-started/developers.mdx +++ b/apps/docs/content/docs/getting-started/developers.mdx @@ -13,7 +13,8 @@ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion ## Usage -For Manifest Design System to work properly, make sure to setup the `Provider` at the root of your application. +For Manifest Design System to work properly, make sure to setup the `Provider` at the root of your +application. ```js import { Provider } from '@project44-manifest/react'; @@ -27,7 +28,9 @@ function MyApp() { } ``` -Manifest Design System was designed leveraging the [Inter](https://fonts.google.com/specimen/Inter?query=inter) font. Please be sure to include the font family link in the `` of your application's HTML. +Manifest Design System was designed leveraging the +[Inter](https://fonts.google.com/specimen/Inter?query=inter) font. Please be sure to include the +font family link in the `` of your application's HTML. ```html ``` -Currently Manifest Design System uses material design icons. Please be sure to include the font family link in the `` of your application's HTML. +Currently Manifest Design System uses material design icons. Please be sure to include the font +family link in the `` of your application's HTML. ```html @@ -44,7 +48,8 @@ Currently Manifest Design System uses material design icons. Please be sure to i ### Theme -The Manifest Design System ships with a default theme built specifically with our design language and tokens and is based on the [Stitches Theme Tokens](https://stitches.dev/docs/tokens). +The Manifest Design System ships with a default theme built specifically with our design language +and tokens and is based on the [Stitches Theme Tokens](https://stitches.dev/docs/tokens). ```json { @@ -70,9 +75,12 @@ For explicit values, please refer to our [tokens]() documentation. ### Styling -Manifest Design System styling is powered by [Stitches](https://stitches.dev) allowing users to override existing component styles and the ability to create new manifest theme-aware styles for new components. +Manifest Design System styling is powered by [Stitches](https://stitches.dev) allowing users to +override existing component styles and the ability to create new manifest theme-aware styles for new +components. -Each Manifest component exposes a css prop that will take in a theme aware style object allowing for easy inline component overrides. +Each Manifest component exposes a css prop that will take in a theme aware style object allowing for +easy inline component overrides. ```js import { Button } from '@project44-manifest/react'; diff --git a/apps/docs/content/docs/tokens/spacing.mdx b/apps/docs/content/docs/tokens/spacing.mdx index cb7c61a1..75da3e78 100644 --- a/apps/docs/content/docs/tokens/spacing.mdx +++ b/apps/docs/content/docs/tokens/spacing.mdx @@ -3,7 +3,8 @@ title: Spacing description: Spacing tokens are used for padding, margins, and position coordinates. --- -The Manifest Design System spacing scale is based off 4px increments, anything within that range is supported. Below is a collection of our most commonly used spacing tokens. +The Manifest Design System spacing scale is based off 4px increments, anything within that range is +supported. Below is a collection of our most commonly used spacing tokens. | Name | Space | Token | | | ------- | ----- | ----------- | ----------------------------------------------------------------------------- | diff --git a/apps/docs/contentlayer.config.ts b/apps/docs/contentlayer.config.ts index 976c435d..08993dc7 100644 --- a/apps/docs/contentlayer.config.ts +++ b/apps/docs/contentlayer.config.ts @@ -5,37 +5,37 @@ import remarkMdx from 'remark-mdx'; import toc from 'markdown-toc'; const Doc = defineDocumentType(() => ({ - name: 'Doc', - filePathPattern: `docs/**/*.mdx`, - contentType: 'mdx', - fields: { - title: { type: 'string' }, - description: { type: 'string' }, - }, - computedFields: { - slug: { - type: 'string', - resolve: doc => `/${doc._raw.flattenedPath}`, - }, - meta: { - type: 'json', - resolve: doc => ({ - title: doc.title, - description: doc.description, - slug: `/${doc._raw.flattenedPath}`, - toc: toc(doc.body.raw).json.filter(t => t.lvl !== 1), - }), - }, - }, + name: 'Doc', + filePathPattern: `docs/**/*.mdx`, + contentType: 'mdx', + fields: { + title: { type: 'string' }, + description: { type: 'string' }, + }, + computedFields: { + slug: { + type: 'string', + resolve: (doc) => `/${doc._raw.flattenedPath}`, + }, + meta: { + type: 'json', + resolve: (doc) => ({ + title: doc.title, + description: doc.description, + slug: `/${doc._raw.flattenedPath}`, + toc: toc(doc.body.raw).json.filter((t) => t.lvl !== 1), + }), + }, + }, })); const contentLayerConfig = makeSource({ - contentDirPath: 'content', - documentTypes: [Doc], - mdx: { - remarkPlugins: [remarkGfm, remarkMdx], - rehypePlugins: [rehypeSlug], - }, + contentDirPath: 'content', + documentTypes: [Doc], + mdx: { + remarkPlugins: [remarkGfm, remarkMdx], + rehypePlugins: [rehypeSlug], + }, }); export default contentLayerConfig; diff --git a/apps/docs/src/components/ActionCard.tsx b/apps/docs/src/components/ActionCard.tsx index 62fde8bb..f65f02ec 100644 --- a/apps/docs/src/components/ActionCard.tsx +++ b/apps/docs/src/components/ActionCard.tsx @@ -4,40 +4,40 @@ import NextImage from 'next/image'; import NextLink from 'next/link'; interface ActionCardProps { - description?: string; - href: string; - src: string; - title: string; - onClick?(): void; + description?: string; + href: string; + src: string; + title: string; + onClick?(): void; } function ActionCard(props: ActionCardProps) { - const { description, href, src, title } = props; + const { description, href, src, title } = props; - return ( - - - - - - - - {title} - - - {description && {description}} - - - - ); + return ( + + + + + + + + {title} + + + {description && {description}} + + + + ); } export default ActionCard; diff --git a/apps/docs/src/components/Anchor.tsx b/apps/docs/src/components/Anchor.tsx index 79da09a9..9171d2b1 100644 --- a/apps/docs/src/components/Anchor.tsx +++ b/apps/docs/src/components/Anchor.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Link, LinkProps } from '@project44-manifest/react'; -const Anchor: React.FC = props => ; +const Anchor: React.FC = (props) => ; export default Anchor; diff --git a/apps/docs/src/components/BlockQuote.tsx b/apps/docs/src/components/BlockQuote.tsx index 2b5c28f9..5177eb40 100644 --- a/apps/docs/src/components/BlockQuote.tsx +++ b/apps/docs/src/components/BlockQuote.tsx @@ -4,31 +4,31 @@ import { Box } from '@project44-manifest/react'; type BlockQuoteProps = React.ComponentPropsWithoutRef; function BlockQuote(props: BlockQuoteProps) { - const { css, ...other } = props; + const { css, ...other } = props; - return ( - p': { - margin: 0, - }, - }} - {...other} - /> - ); + '> p': { + margin: 0, + }, + }} + {...other} + /> + ); } export default BlockQuote; diff --git a/apps/docs/src/components/CodeBlock/CodeBlock.styles.ts b/apps/docs/src/components/CodeBlock/CodeBlock.styles.ts index 8210efc5..71865acf 100644 --- a/apps/docs/src/components/CodeBlock/CodeBlock.styles.ts +++ b/apps/docs/src/components/CodeBlock/CodeBlock.styles.ts @@ -1,11 +1,11 @@ import { globalCss } from '@project44-manifest/react'; export const useStyles = globalCss({ - '.npm__react-simple-code-editor__textarea:focus-visible': { - outline: 'none', - }, + '.npm__react-simple-code-editor__textarea:focus-visible': { + outline: 'none', + }, - '.npm__react-simple-code-editor__textarea': { - backgroundColor: '$background-secondary !important', - }, + '.npm__react-simple-code-editor__textarea': { + backgroundColor: '$background-secondary !important', + }, }); diff --git a/apps/docs/src/components/CodeBlock/CodeBlock.tsx b/apps/docs/src/components/CodeBlock/CodeBlock.tsx index 613e21cf..6aabe807 100644 --- a/apps/docs/src/components/CodeBlock/CodeBlock.tsx +++ b/apps/docs/src/components/CodeBlock/CodeBlock.tsx @@ -8,38 +8,38 @@ import theme from 'prism-react-renderer/themes/dracula'; import { useStyles } from './CodeBlock.styles'; interface CodeBlockProps { - children: any; - className?: string; - live?: boolean; - showToolbar?: boolean; + children: any; + className?: string; + live?: boolean; + showToolbar?: boolean; } const Live = dynamic(() => import('./components/Live')); function CodeBlock(props: CodeBlockProps) { - const { - children, - className: classNameProp, - live = true, - showToolbar = true, - } = props.children.props; - - const language = classNameProp?.replace(/language-/, '') as Language; - const code = children.trim(); - - useStyles(); - - if ((language === 'jsx' || language === 'tsx') && live) { - return ; - } - - return ( - - - - - - ); + const { + children, + className: classNameProp, + live = true, + showToolbar = true, + } = props.children.props; + + const language = classNameProp?.replace(/language-/, '') as Language; + const code = children.trim(); + + useStyles(); + + if ((language === 'jsx' || language === 'tsx') && live) { + return ; + } + + return ( + + + + + + ); } export default CodeBlock; diff --git a/apps/docs/src/components/CodeBlock/components/Container.tsx b/apps/docs/src/components/CodeBlock/components/Container.tsx index 0e2c2407..f9275c12 100644 --- a/apps/docs/src/components/CodeBlock/components/Container.tsx +++ b/apps/docs/src/components/CodeBlock/components/Container.tsx @@ -2,27 +2,27 @@ import * as React from 'react'; import { Box, BoxProps } from '@project44-manifest/react'; const Container: React.FC> = ({ - css, - ...other + css, + ...other }) => { - return ( - - ); + ...css, + }} + /> + ); }; export default Container; diff --git a/apps/docs/src/components/CodeBlock/components/Editor.tsx b/apps/docs/src/components/CodeBlock/components/Editor.tsx index 1fe92d7a..4b1adc57 100644 --- a/apps/docs/src/components/CodeBlock/components/Editor.tsx +++ b/apps/docs/src/components/CodeBlock/components/Editor.tsx @@ -2,20 +2,20 @@ import * as React from 'react'; import { Box, pxToRem } from '@project44-manifest/react'; import { LiveEditor } from 'react-live'; -const Editor: React.FC> = props => { - return ( - - - - ); +const Editor: React.FC> = (props) => { + return ( + + + + ); }; export default Editor; diff --git a/apps/docs/src/components/CodeBlock/components/Highlight.tsx b/apps/docs/src/components/CodeBlock/components/Highlight.tsx index 5809de7a..6f5865d0 100644 --- a/apps/docs/src/components/CodeBlock/components/Highlight.tsx +++ b/apps/docs/src/components/CodeBlock/components/Highlight.tsx @@ -3,31 +3,31 @@ import Prism, { defaultProps, Language, PrismTheme } from 'prism-react-renderer' import { Box } from '@project44-manifest/react'; interface HighlightProps { - code: string; - language: Language; - theme: PrismTheme; + code: string; + language: Language; + theme: PrismTheme; } function Highlight(props: HighlightProps) { - const { code, language, theme, ...other } = props; + const { code, language, theme, ...other } = props; - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - - - {tokens.map((line, i) => ( - - {line.map((token, key) => ( - - ))} - - ))} - - - )} - - ); + return ( + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + + + {tokens.map((line, i) => ( + + {line.map((token, key) => ( + + ))} + + ))} + + + )} + + ); } export default Highlight; diff --git a/apps/docs/src/components/CodeBlock/components/Live.tsx b/apps/docs/src/components/CodeBlock/components/Live.tsx index d147c6f6..b95d042c 100644 --- a/apps/docs/src/components/CodeBlock/components/Live.tsx +++ b/apps/docs/src/components/CodeBlock/components/Live.tsx @@ -10,33 +10,33 @@ import Preview from './Preview'; import Toolbar from './Toolbar'; interface LiveProps { - code: string; - showToolbar?: boolean; - theme?: PrismTheme; + code: string; + showToolbar?: boolean; + theme?: PrismTheme; } const scope = { ...Manifest, ...InternationalizeDate, ...I18n }; function Live(props: LiveProps) { - const { code, showToolbar, theme } = props; + const { code, showToolbar, theme } = props; - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = React.useState(false); - return ( - - - - {isExpanded && } - - {showToolbar && ( - setIsExpanded(!isExpanded)} - /> - )} - - ); + return ( + + + + {isExpanded && } + + {showToolbar && ( + setIsExpanded(!isExpanded)} + /> + )} + + ); } export default Live; diff --git a/apps/docs/src/components/CodeBlock/components/Preview.tsx b/apps/docs/src/components/CodeBlock/components/Preview.tsx index 7c62a9ce..042992b3 100644 --- a/apps/docs/src/components/CodeBlock/components/Preview.tsx +++ b/apps/docs/src/components/CodeBlock/components/Preview.tsx @@ -3,23 +3,23 @@ import { Flex, pxToRem, styled } from '@project44-manifest/react'; import { LiveError, LivePreview } from 'react-live'; const StyledPreview = styled(LivePreview, { - fontFamily: '$text', - width: '100%', + fontFamily: '$text', + width: '100%', }); -const Preview: React.FC> = props => ( - - - - +const Preview: React.FC> = (props) => ( + + + + ); export default Preview; diff --git a/apps/docs/src/components/CodeBlock/components/Toolbar.tsx b/apps/docs/src/components/CodeBlock/components/Toolbar.tsx index 232b8174..afa76527 100644 --- a/apps/docs/src/components/CodeBlock/components/Toolbar.tsx +++ b/apps/docs/src/components/CodeBlock/components/Toolbar.tsx @@ -3,24 +3,24 @@ import { Icon, IconButton, Stack, Tooltip } from '@project44-manifest/react'; import CopyButton from '../../CopyButton'; interface ToolbarProps { - code: string; - isExpanded?: boolean; - onExpandedChange?(event: React.MouseEvent): void; + code: string; + isExpanded?: boolean; + onExpandedChange?(event: React.MouseEvent): void; } function Toolbar(props: ToolbarProps) { - const { code, isExpanded, onExpandedChange } = props; + const { code, isExpanded, onExpandedChange } = props; - return ( - - - - - - - - - ); + return ( + + + + + + + + + ); } export default Toolbar; diff --git a/apps/docs/src/components/ColorSwatch.tsx b/apps/docs/src/components/ColorSwatch.tsx index 68c171b2..be63c2c0 100644 --- a/apps/docs/src/components/ColorSwatch.tsx +++ b/apps/docs/src/components/ColorSwatch.tsx @@ -2,40 +2,40 @@ import * as React from 'react'; import { Box, Flex, Stack, pxToRem, Typography } from '@project44-manifest/react'; interface ColorSwatchProps { - hex: string; - name: string; - token: string; + hex: string; + name: string; + token: string; } function ColorSwatch(props: ColorSwatchProps) { - const { hex, name, token } = props; + const { hex, name, token } = props; - return ( - - - - {name} - {hex.toUpperCase()} - {token} - - - ); + return ( + + + + {name} + {hex.toUpperCase()} + {token} + + + ); } export default ColorSwatch; diff --git a/apps/docs/src/components/Colors.tsx b/apps/docs/src/components/Colors.tsx index 6c16882e..0519d9f7 100644 --- a/apps/docs/src/components/Colors.tsx +++ b/apps/docs/src/components/Colors.tsx @@ -4,38 +4,38 @@ import { Grid, GridItem } from '@project44-manifest/react'; import ColorSwatch from './ColorSwatch'; interface ColorsProps { - category?: string; + category?: string; } const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }); function Colors(props: ColorsProps) { - const { category } = props; - - const colors = Object.keys(tokens) - .filter(token => { - if (token.includes(category)) { - return token; - } - - return null; - }) - .sort(collator.compare); - - return ( - - {colors.map(token => { - const name = token.replace(category, ''); - const hex = tokens[token]; - - return ( - - - - ); - })} - - ); + const { category } = props; + + const colors = Object.keys(tokens) + .filter((token) => { + if (token.includes(category)) { + return token; + } + + return null; + }) + .sort(collator.compare); + + return ( + + {colors.map((token) => { + const name = token.replace(category, ''); + const hex = tokens[token]; + + return ( + + + + ); + })} + + ); } export default Colors; diff --git a/apps/docs/src/components/CopyButton.tsx b/apps/docs/src/components/CopyButton.tsx index bbfcbdd9..8786cbd7 100644 --- a/apps/docs/src/components/CopyButton.tsx +++ b/apps/docs/src/components/CopyButton.tsx @@ -3,43 +3,43 @@ import { IconButton, Icon, Tooltip } from '@project44-manifest/react'; import copyToClipboard from 'copy-to-clipboard'; interface CopyButtonProps { - code: string; + code: string; } function CopyButton(props: CopyButtonProps) { - const { code } = props; - - const [isCopied, setIsCopied] = React.useState(false); - - const handleCopy = React.useCallback(() => { - if (typeof code === 'string') { - copyToClipboard(code); - - setIsCopied(true); - } else { - setIsCopied(false); - } - }, [code]); - - React.useEffect(() => { - let timer: NodeJS.Timeout; - - if (isCopied) { - timer = setTimeout(() => { - setIsCopied(false); - }, 2000); - } - - return () => clearTimeout(timer); - }, [isCopied]); - - return ( - - - - - - ); + const { code } = props; + + const [isCopied, setIsCopied] = React.useState(false); + + const handleCopy = React.useCallback(() => { + if (typeof code === 'string') { + copyToClipboard(code); + + setIsCopied(true); + } else { + setIsCopied(false); + } + }, [code]); + + React.useEffect(() => { + let timer: NodeJS.Timeout; + + if (isCopied) { + timer = setTimeout(() => { + setIsCopied(false); + }, 2000); + } + + return () => clearTimeout(timer); + }, [isCopied]); + + return ( + + + + + + ); } export default CopyButton; diff --git a/apps/docs/src/components/Features.tsx b/apps/docs/src/components/Features.tsx index 12231cfa..9651e1f1 100644 --- a/apps/docs/src/components/Features.tsx +++ b/apps/docs/src/components/Features.tsx @@ -3,52 +3,52 @@ import { Box, Container, Flex, Grid, GridItem, pxToRem } from '@project44-manife import ActionCard from './ActionCard'; function Features() { - return ( - - - - - - - - - - - - - - - - - - ); + return ( + + + + + + + + + + + + + + + + + + ); } export default Features; diff --git a/apps/docs/src/components/Head.tsx b/apps/docs/src/components/Head.tsx index 6bf91073..76d00cd1 100644 --- a/apps/docs/src/components/Head.tsx +++ b/apps/docs/src/components/Head.tsx @@ -2,27 +2,27 @@ import * as React from 'react'; import NextHead from 'next/head'; interface HeadProps { - description?: string; - title?: string; + description?: string; + title?: string; } function Head(props: HeadProps) { - const { description, title: titleProp } = props; + const { description, title: titleProp } = props; - const titlePrefix = 'Manifest Design System'; + const titlePrefix = 'Manifest Design System'; - let title = titlePrefix; + let title = titlePrefix; - if (titleProp) { - title = `${titleProp} - ${titlePrefix}`; - } + if (titleProp) { + title = `${titleProp} - ${titlePrefix}`; + } - return ( - - {title} - {description && } - - ); + return ( + + {title} + {description && } + + ); } export default Head; diff --git a/apps/docs/src/components/Heading.tsx b/apps/docs/src/components/Heading.tsx index af9b7447..3e14d7f0 100644 --- a/apps/docs/src/components/Heading.tsx +++ b/apps/docs/src/components/Heading.tsx @@ -3,13 +3,13 @@ import { pxToRem, Typography, TypographyProps } from '@project44-manifest/react' import { As } from '@project44-manifest/system'; function Heading(props: TypographyProps) { - const { children, ...other } = props; + const { children, ...other } = props; - return ( - - {children} - - ); + return ( + + {children} + + ); } export default Heading; diff --git a/apps/docs/src/components/Hero.tsx b/apps/docs/src/components/Hero.tsx index 65dba9f6..8da7990e 100644 --- a/apps/docs/src/components/Hero.tsx +++ b/apps/docs/src/components/Hero.tsx @@ -4,70 +4,70 @@ import NextImage from 'next/image'; import { useRouter } from 'next/router'; function Hero() { - const router = useRouter(); + const router = useRouter(); - const handleClick = React.useCallback(() => { - void router.push('/docs/getting-started'); - }, [router]); + const handleClick = React.useCallback(() => { + void router.push('/docs/getting-started'); + }, [router]); - return ( - - - - - + + + + .gradient': { - backgroundImage: '$brand-gradient', - backgroundClip: 'text', - '-webkit-text-fill-color': 'transparent', - }, - }} - > - Manifesting experiences through design. - - - A shared design language for designing and building products at project44. - - - - - - - - - - - - - - ); + '> .gradient': { + backgroundImage: '$brand-gradient', + backgroundClip: 'text', + '-webkit-text-fill-color': 'transparent', + }, + }} + > + Manifesting experiences through design. + + + A shared design language for designing and building products at project44. + + + + + + + + + + + + + + ); } export default Hero; diff --git a/apps/docs/src/components/Image.tsx b/apps/docs/src/components/Image.tsx index 23fdadc8..9862e2db 100644 --- a/apps/docs/src/components/Image.tsx +++ b/apps/docs/src/components/Image.tsx @@ -2,16 +2,16 @@ import * as React from 'react'; import { Box } from '@project44-manifest/react'; import NextImage, { ImageProps } from 'next/image'; -const Image: React.FC = props => ( - - - +const Image: React.FC = (props) => ( + + + ); export default Image; diff --git a/apps/docs/src/components/InlineCode.tsx b/apps/docs/src/components/InlineCode.tsx index bc6c593e..f0f019f7 100644 --- a/apps/docs/src/components/InlineCode.tsx +++ b/apps/docs/src/components/InlineCode.tsx @@ -4,23 +4,23 @@ import { Box } from '@project44-manifest/react'; type InlineCodeProps = React.ComponentPropsWithoutRef; function InlineCode(props: InlineCodeProps) { - const { css, ...other } = props; + const { css, ...other } = props; - return ( - - ); + return ( + + ); } export default InlineCode; diff --git a/apps/docs/src/components/MDXComponents.tsx b/apps/docs/src/components/MDXComponents.tsx index 292bb3c0..e29b3943 100644 --- a/apps/docs/src/components/MDXComponents.tsx +++ b/apps/docs/src/components/MDXComponents.tsx @@ -12,44 +12,44 @@ import PropsTable from './PropsTable'; import TypeScale from './TypeScale'; const MDXComponents = { - ...Manifest, - Colors, - ColorSwatch, - PropsTable, - TypeScale, - a: Anchor, - blockquote: BlockQuote, - code: InlineCode, - Image, - h1: (props: React.DetailsHTMLAttributes) => ( - - ), - h2: (props: React.DetailsHTMLAttributes) => ( - - ), - h3: (props: React.DetailsHTMLAttributes) => ( - - ), - h4: (props: React.DetailsHTMLAttributes) => ( - - ), - hr: (props: React.DetailsHTMLAttributes) => , - p: (props: React.DetailsHTMLAttributes) => ( - - ), - pre: (props: any) => { - if (typeof props.children === 'string') return ; + ...Manifest, + Colors, + ColorSwatch, + PropsTable, + TypeScale, + a: Anchor, + blockquote: BlockQuote, + code: InlineCode, + Image, + h1: (props: React.DetailsHTMLAttributes) => ( + + ), + h2: (props: React.DetailsHTMLAttributes) => ( + + ), + h3: (props: React.DetailsHTMLAttributes) => ( + + ), + h4: (props: React.DetailsHTMLAttributes) => ( + + ), + hr: (props: React.DetailsHTMLAttributes) => , + p: (props: React.DetailsHTMLAttributes) => ( + + ), + pre: (props: any) => { + if (typeof props.children === 'string') return ; - return ; - }, - table: Manifest.Table, - tbody: Manifest.TableBody, - thead: Manifest.TableHeader, - td: (props: React.DetailsHTMLAttributes) => ( - - ), - tr: Manifest.TableRow, - th: Manifest.TableColumn, + return ; + }, + table: Manifest.Table, + tbody: Manifest.TableBody, + thead: Manifest.TableHeader, + td: (props: React.DetailsHTMLAttributes) => ( + + ), + tr: Manifest.TableRow, + th: Manifest.TableColumn, }; export default MDXComponents; diff --git a/apps/docs/src/components/Meta.tsx b/apps/docs/src/components/Meta.tsx index 2590d363..5f0185cd 100644 --- a/apps/docs/src/components/Meta.tsx +++ b/apps/docs/src/components/Meta.tsx @@ -2,27 +2,27 @@ import * as React from 'react'; import { Box, Typography } from '@project44-manifest/react'; interface MetaProps { - description?: string; - title?: string; + description?: string; + title?: string; } function Meta(props: MetaProps) { - const { description, title } = props; + const { description, title } = props; - return ( - - {title && ( - - {title} - - )} - {description && {description}} - - ); + return ( + + {title && ( + + {title} + + )} + {description && {description}} + + ); } export default Meta; diff --git a/apps/docs/src/components/PropsTable.tsx b/apps/docs/src/components/PropsTable.tsx index 7c29ce4d..036ee720 100644 --- a/apps/docs/src/components/PropsTable.tsx +++ b/apps/docs/src/components/PropsTable.tsx @@ -4,39 +4,39 @@ import { Flex, Separator, Stack, Typography } from '@project44-manifest/react'; import InlineCode from './InlineCode'; interface PropsTableProp { - of: string; + of: string; } function PropsTable(props: PropsTableProp) { - const { of } = props; + const { of } = props; - const propDocs = React.useMemo(() => { - const { props: _props } = componentDocs.find(component => component.displayName === of); + const propDocs = React.useMemo(() => { + const { props: _props } = componentDocs.find((component) => component.displayName === of); - return _props as PropDoc[]; - }, [of]); + return _props as PropDoc[]; + }, [of]); - return ( - - {propDocs.map(doc => ( - - - - - - {doc.name} - {doc.required ? '' : '?'} - - - {doc.type} - - - - {doc.description} - - ))} - - ); + return ( + + {propDocs.map((doc) => ( + + + + + + {doc.name} + {doc.required ? '' : '?'} + + + {doc.type} + + + + {doc.description} + + ))} + + ); } export default PropsTable; diff --git a/apps/docs/src/components/SidebarItem.tsx b/apps/docs/src/components/SidebarItem.tsx index ebf15bda..eb8b7c44 100644 --- a/apps/docs/src/components/SidebarItem.tsx +++ b/apps/docs/src/components/SidebarItem.tsx @@ -4,74 +4,74 @@ import { Box, Link, pxToRem, Stack, styled, Typography } from '@project44-manife import NextLink from 'next/link'; interface SidebarItemProps extends SidebarItemType { - currentPath: string; + currentPath: string; } const StyledLink = styled(Link, { - borderRadius: '$small', - color: '$text-primary', - display: 'flex', - fontFamily: '$text', - fontSize: '$medium', - fontWeight: '$normal', - letterSpacing: '$medium', - lineHeight: '$medium', - pl: pxToRem(20), - pr: '$small', - py: pxToRem(9), - textDecoration: 'none', + borderRadius: '$small', + color: '$text-primary', + display: 'flex', + fontFamily: '$text', + fontSize: '$medium', + fontWeight: '$normal', + letterSpacing: '$medium', + lineHeight: '$medium', + pl: pxToRem(20), + pr: '$small', + py: pxToRem(9), + textDecoration: 'none', - '&:hover': { - color: '$text-primary', - }, + '&:hover': { + color: '$text-primary', + }, - variants: { - isActive: { - true: { - backgroundColor: '$background-secondary', - }, - false: { - backgroundColor: 'transparent', - }, - }, - }, + variants: { + isActive: { + true: { + backgroundColor: '$background-secondary', + }, + false: { + backgroundColor: 'transparent', + }, + }, + }, - defaultVariants: { - isActive: false, - }, + defaultVariants: { + isActive: false, + }, }); function SidebarItem(props: SidebarItemProps) { - const { currentPath, items, slug, title } = props; + const { currentPath, items, slug, title } = props; - const isCategory = !!items; + const isCategory = !!items; - if (isCategory) { - return ( - - - {title} - - - {items?.map(item => ( - - - {item.title} - - - ))} - - - ); - } + if (isCategory) { + return ( + + + {title} + + + {items?.map((item) => ( + + + {item.title} + + + ))} + + + ); + } - return ( - - - {title} - - - ); + return ( + + + {title} + + + ); } export default SidebarItem; diff --git a/apps/docs/src/components/TOCItem.tsx b/apps/docs/src/components/TOCItem.tsx index c7fcc552..26d902b4 100644 --- a/apps/docs/src/components/TOCItem.tsx +++ b/apps/docs/src/components/TOCItem.tsx @@ -3,66 +3,66 @@ import { Box, Link, pxToRem, styled } from '@project44-manifest/react'; import NextLink from 'next/link'; interface TOCItemProps { - content: string; - currentHeading: string; - slug: string; - level: number; + content: string; + currentHeading: string; + slug: string; + level: number; } const StyledLink = styled(Link, { - color: '$text-primary', - display: 'flex', - px: '$large', - textDecoration: 'none', + color: '$text-primary', + display: 'flex', + px: '$large', + textDecoration: 'none', - '&::before': { - backgroundColor: '$palette-indigo-500', - borderRadius: '$full', - content: '', - display: 'block', - height: pxToRem(24), - left: `-${pxToRem(1)}`, - position: 'absolute', - width: pxToRem(3), - }, + '&::before': { + backgroundColor: '$palette-indigo-500', + borderRadius: '$full', + content: '', + display: 'block', + height: pxToRem(24), + left: `-${pxToRem(1)}`, + position: 'absolute', + width: pxToRem(3), + }, - variants: { - isActive: { - true: { - '&::before': { - opacity: 1, - }, - }, - false: { - '&::before': { - opacity: 0, - }, - }, - }, - isNested: { - true: { - paddingLeft: '$x-large', - typography: '$subtext', - }, - false: { - typography: '$subtext-bold', - }, - }, - }, + variants: { + isActive: { + true: { + '&::before': { + opacity: 1, + }, + }, + false: { + '&::before': { + opacity: 0, + }, + }, + }, + isNested: { + true: { + paddingLeft: '$x-large', + typography: '$subtext', + }, + false: { + typography: '$subtext-bold', + }, + }, + }, }); function TOCItem(props: TOCItemProps) { - const { content, currentHeading, level, slug } = props; + const { content, currentHeading, level, slug } = props; - return ( - - - 2}> - {content} - - - - ); + return ( + + + 2}> + {content} + + + + ); } export default TOCItem; diff --git a/apps/docs/src/components/Thumbnails.tsx b/apps/docs/src/components/Thumbnails.tsx index c5845776..53bf501e 100644 --- a/apps/docs/src/components/Thumbnails.tsx +++ b/apps/docs/src/components/Thumbnails.tsx @@ -5,21 +5,21 @@ import ActionCard from './ActionCard'; import { getThumbnailUrl } from 'src/utils'; interface ThumbnailsProps { - items: DocMeta[]; + items: DocMeta[]; } function Thumbnails(props: ThumbnailsProps) { - const { items } = props; + const { items } = props; - return ( - - {items.map(item => ( - - - - ))} - - ); + return ( + + {items.map((item) => ( + + + + ))} + + ); } export default Thumbnails; diff --git a/apps/docs/src/components/TypeScale.tsx b/apps/docs/src/components/TypeScale.tsx index 9b0371b1..2bd1623e 100644 --- a/apps/docs/src/components/TypeScale.tsx +++ b/apps/docs/src/components/TypeScale.tsx @@ -4,206 +4,206 @@ import { Box, Flex, Separator, Stack, Typography } from '@project44-manifest/rea // TODO: Auto generate these from the tokens. export const TypeScale = () => ( - - - - - Display - - font-weight: bold - font-size: 32px / 2rem - line-height: 42px / 2.625rem - letter-spacing: -3% - - - - Manifesting Project 44 experiences through design. - - - - - - - - - - Heading - - font-weight: bold - font-size: 24px / 1.5rem - line-height: 32px / 2rem - letter-spacing: -2% - - - - Manifesting Project 44 experiences through design. - - - - - - - - - - Title - - font-weight: bold - font-size: 20px / 1.25rem - line-height: 30px / 1.875rem - letter-spacing: -1% - - - Manifesting Project 44 experiences through design. - - - - - - - - - Title - - font-weight: bold - font-size: 20px / 1.25rem - line-height: 30px / 1.875rem - letter-spacing: -1% - - - Manifesting Project 44 experiences through design. - - - - - - - - - Subtitle - - font-weight: bold - font-size: 16px / 1rem - line-height: 24px / 1.5rem - letter-spacing: -1% - - - Manifesting Project 44 experiences through design. - - - - - - - - - Body - - font-weight: regular - font-size: 16px / 1rem - line-height: 24px / 1.5rem - letter-spacing: -1% - - - Manifesting Project 44 experiences through design. - - - - - - - - - Body Bold - - font-weight: semibold - font-size: 16px / 1rem - line-height: 24px / 1.5rem - letter-spacing: -1% - - - - Manifesting Project 44 experiences through design. - - - - - - - - - - Subtext - - font-weight: regular - font-size: 14px / 0.875rem - line-height: 20px / 1.25rem - letter-spacing: -1% - - - - Manifesting Project 44 experiences through design. - - - - - - - - - - Subtext Bold - - font-weight: semibold - font-size: 14px / 0.875rem - line-height: 20px / 1.25rem - letter-spacing: -1% - - - - Manifesting Project 44 experiences through design. - - - - - - - - - - Caption - - font-weight: regular - font-size: 12px / 0.75rem - line-height: 18px / 1.125rem - letter-spacing: -1% - - - - Manifesting Project 44 experiences through design. - - - - - - - - - - Caption Bold - - font-weight: semibold - font-size: 12px / 0.75rem - line-height: 18px / 1.125rem - letter-spacing: -1% - - - - Manifesting Project 44 experiences through design. - - - - + + + + + Display + + font-weight: bold + font-size: 32px / 2rem + line-height: 42px / 2.625rem + letter-spacing: -3% + + + + Manifesting Project 44 experiences through design. + + + + + + + + + + Heading + + font-weight: bold + font-size: 24px / 1.5rem + line-height: 32px / 2rem + letter-spacing: -2% + + + + Manifesting Project 44 experiences through design. + + + + + + + + + + Title + + font-weight: bold + font-size: 20px / 1.25rem + line-height: 30px / 1.875rem + letter-spacing: -1% + + + Manifesting Project 44 experiences through design. + + + + + + + + + Title + + font-weight: bold + font-size: 20px / 1.25rem + line-height: 30px / 1.875rem + letter-spacing: -1% + + + Manifesting Project 44 experiences through design. + + + + + + + + + Subtitle + + font-weight: bold + font-size: 16px / 1rem + line-height: 24px / 1.5rem + letter-spacing: -1% + + + Manifesting Project 44 experiences through design. + + + + + + + + + Body + + font-weight: regular + font-size: 16px / 1rem + line-height: 24px / 1.5rem + letter-spacing: -1% + + + Manifesting Project 44 experiences through design. + + + + + + + + + Body Bold + + font-weight: semibold + font-size: 16px / 1rem + line-height: 24px / 1.5rem + letter-spacing: -1% + + + + Manifesting Project 44 experiences through design. + + + + + + + + + + Subtext + + font-weight: regular + font-size: 14px / 0.875rem + line-height: 20px / 1.25rem + letter-spacing: -1% + + + + Manifesting Project 44 experiences through design. + + + + + + + + + + Subtext Bold + + font-weight: semibold + font-size: 14px / 0.875rem + line-height: 20px / 1.25rem + letter-spacing: -1% + + + + Manifesting Project 44 experiences through design. + + + + + + + + + + Caption + + font-weight: regular + font-size: 12px / 0.75rem + line-height: 18px / 1.125rem + letter-spacing: -1% + + + + Manifesting Project 44 experiences through design. + + + + + + + + + + Caption Bold + + font-weight: semibold + font-size: 12px / 0.75rem + line-height: 18px / 1.125rem + letter-spacing: -1% + + + + Manifesting Project 44 experiences through design. + + + + ); export default TypeScale; diff --git a/apps/docs/src/components/Value.tsx b/apps/docs/src/components/Value.tsx index 9224609e..d1287a8a 100644 --- a/apps/docs/src/components/Value.tsx +++ b/apps/docs/src/components/Value.tsx @@ -1,126 +1,126 @@ import * as React from 'react'; import { - Box, - Card, - CardBody, - CardHeader, - Container, - pxToRem, - Stack, - Typography, + Box, + Card, + CardBody, + CardHeader, + Container, + pxToRem, + Stack, + Typography, } from '@project44-manifest/react'; import NextImage from 'next/image'; function Value() { - return ( - - - - - + + + + .gradient': { - backgroundImage: '$brand-gradient', - backgroundClip: 'text', - '-webkit-text-fill-color': 'transparent', - }, - }} - > - We make supply chains work. - - - Manifest Design System sets out to demonstrate just that through a collection of - reusable components, patterns, principles, and guidelines that enable design at scale. - It’s a shared design language for all involved in designing and building products. - - - - - Optimize for clarity - - - We choose to have an opinion about where to direct attention – optimize for - clarity. Display elements and content only when needed and use hierarchy to drive - focus. - - - + '> .gradient': { + backgroundImage: '$brand-gradient', + backgroundClip: 'text', + '-webkit-text-fill-color': 'transparent', + }, + }} + > + We make supply chains work. + + + Manifest Design System sets out to demonstrate just that through a collection of + reusable components, patterns, principles, and guidelines that enable design at scale. + It’s a shared design language for all involved in designing and building products. + + + + + Optimize for clarity + + + We choose to have an opinion about where to direct attention – optimize for + clarity. Display elements and content only when needed and use hierarchy to drive + focus. + + + - - Prefer adaptability over one size fits all - - - Our users need different experiences depending on the task at hand. Design with - adaptability in mind, enabling role-based customization. - - - + + Prefer adaptability over one size fits all + + + Our users need different experiences depending on the task at hand. Design with + adaptability in mind, enabling role-based customization. + + + - - Lean on consistency in order to be efficient - - - We opt for consistency in the details so we can focus on the higher-level UX - challenges. This frees us to innovate toward the best solution for our users in a - more efficient way. - - - + + Lean on consistency in order to be efficient + + + We opt for consistency in the details so we can focus on the higher-level UX + challenges. This frees us to innovate toward the best solution for our users in a + more efficient way. + + + - - Think inclusively - - - All users deserve an accessible and ethical experience within our products. The - system is built with accessibility in mind, not as the last step. - - - + + Think inclusively + + + All users deserve an accessible and ethical experience within our products. The + system is built with accessibility in mind, not as the last step. + + + - - - - - - - - ); + + + + + + + + ); } export default Value; diff --git a/apps/docs/src/data/props.ts b/apps/docs/src/data/props.ts index 958bf5a3..adc8e55c 100644 --- a/apps/docs/src/data/props.ts +++ b/apps/docs/src/data/props.ts @@ -1,7312 +1,7312 @@ export interface PropDoc { - description: string; - defaultValue: any; - name: string; - required: boolean; - type: string; + description: string; + defaultValue: any; + name: string; + required: boolean; + type: string; } export interface ComponentDoc { - displayName: string; - props: PropDoc[]; + displayName: string; + props: PropDoc[]; } export const props: ComponentDoc[] = [ - { - displayName: 'Box', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'Avatar', - props: [ - { - defaultValue: '', - description: 'The alt text passed to the image.', - name: 'alt', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Name used as a fallback if src is not provided or image cannot be found.', - name: 'fallback', - required: false, - type: 'ReactNode', - }, - { - defaultValue: "'medium'", - description: 'The size of the avatar.', - name: 'size', - required: false, - type: '"small" | "medium" ', - }, - { - defaultValue: '', - description: 'The `src` attribute for the `img` element.', - name: 'src', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'Button', - props: [ - { - defaultValue: '', - description: - 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', - name: 'aria-controls', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', - name: 'aria-expanded', - required: false, - type: 'boolean | "true" | "false" ', - }, - { - defaultValue: '', - description: - 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', - name: 'aria-haspopup', - required: false, - type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Indicates the current "pressed" state of toggle buttons.', - name: 'aria-pressed', - required: false, - type: 'boolean | "true" | "false" | "mixed" ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The content to display in the button.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: "'button'", - description: - "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.", - name: 'elementType', - required: false, - type: '"button" | JSXElementConstructor ', - }, - { - defaultValue: '', - description: 'Icon added after the button text.', - name: 'endIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: - 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', - name: 'excludeFromTabOrder', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'A URL to link to if elementType="a".', - name: 'href', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the button is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler called on a click event.', - name: 'onClick', - required: false, - type: '((event: MouseEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the press is released over the target.', - name: 'onPress', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the press state changes.', - name: 'onPressChange', - required: false, - type: '((isPressed: boolean) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.', - name: 'onPressEnd', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a press interaction starts.', - name: 'onPressStart', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.', - name: 'onPressUp', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: - 'The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).', - name: 'rel', - required: false, - type: 'string ', - }, - { - defaultValue: "'medium'", - description: 'The size of the button.', - name: 'size', - required: false, - type: 'ButtonSize ', - }, - { - defaultValue: '', - description: 'Icon added before the button text.', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'The target window for the link.', - name: 'target', - required: false, - type: 'string ', - }, - { - defaultValue: "'button'", - description: 'The behavior of the button when used in an HTML form.', - name: 'type', - required: false, - type: '"button" | "submit" | "reset" ', - }, - { - defaultValue: "'primary'", - description: 'The display variant of the button.', - name: 'variant', - required: false, - type: 'ButtonVariant ', - }, - ], - }, - { - displayName: 'ButtonGroup', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the buttons in the button are attached.', - name: 'isAttached', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: 'Whether the buttons in the button group are all disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'medium'", - description: 'The size of the buttons in the group.', - name: 'size', - required: false, - type: 'ButtonSize ', - }, - { - defaultValue: "'primary'", - description: 'The group variant', - name: 'variant', - required: false, - type: 'ButtonVariant ', - }, - ], - }, - { - displayName: 'Calendar', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: 'false', - description: 'Whether to automatically focus the calendar when it mounts.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The date that is focused when the calendar first mounts (uncountrolled).', - name: 'defaultFocusedValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'An error message to display when the selected value is invalid.', - name: 'errorMessage', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Controls the currently focused date within the calendar.', - name: 'focusedValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: - 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', - name: 'isDateUnavailable', - required: false, - type: '((date: DateValue) => boolean) ', - }, - { - defaultValue: 'false', - description: 'Whether the calendar is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: 'Whether the calendar value is immutable.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The maximum allowed date that a user may select.', - name: 'maxValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'The minimum allowed date that a user may select.', - name: 'minValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: DateValue) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the focused date changes.', - name: 'onFocusChange', - required: false, - type: '((date: CalendarDate) => void) ', - }, - { - defaultValue: '', - description: - 'Whether the current selection is valid or invalid according to application logic.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'DateValue ', - }, - ], - }, - { - displayName: 'CalendarHeader', - props: [ - { - defaultValue: '', - description: 'Props passed to the next button', - name: 'nextButtonProps', - required: true, - type: 'AriaButtonProps<"button">', - }, - { - defaultValue: '', - description: 'Props passed to the previous button.', - name: 'prevButtonProps', - required: true, - type: 'AriaButtonProps<"button">', - }, - { - defaultValue: '', - description: 'The calendar state.', - name: 'state', - required: true, - type: 'CalendarState | RangeCalendarState', - }, - ], - }, - { - displayName: 'CalendarCell', - props: [ - { - defaultValue: '', - description: 'The current month to helpe determine out of range dates.', - name: 'currentMonth', - required: true, - type: 'CalendarDate', - }, - { - defaultValue: '', - description: 'The date that this cell represents.', - name: 'date', - required: true, - type: 'CalendarDate', - }, - { - defaultValue: '', - description: 'The calendar state.', - name: 'state', - required: true, - type: 'CalendarState | RangeCalendarState', - }, - ], - }, - { - displayName: 'CalendarRange', - props: [ - { - defaultValue: '', - description: - 'When combined with `isDateUnavailable`, determines whether non-contiguous ranges,\ni.e. ranges containing unavailable dates, may be selected.', - name: 'allowsNonContiguousRanges', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: 'false', - description: 'Whether to automatically focus the calendar when it mounts.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The date that is focused when the calendar first mounts (uncountrolled).', - name: 'defaultFocusedValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'RangeValue ', - }, - { - defaultValue: '', - description: 'An error message to display when the selected value is invalid.', - name: 'errorMessage', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Controls the currently focused date within the calendar.', - name: 'focusedValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: - 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', - name: 'isDateUnavailable', - required: false, - type: '((date: DateValue) => boolean) ', - }, - { - defaultValue: 'false', - description: 'Whether the calendar is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: 'Whether the calendar value is immutable.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The maximum allowed date that a user may select.', - name: 'maxValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'The minimum allowed date that a user may select.', - name: 'minValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: RangeValue) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the focused date changes.', - name: 'onFocusChange', - required: false, - type: '((date: CalendarDate) => void) ', - }, - { - defaultValue: '', - description: 'Brings the list of ranges defined to the component', - name: 'ranges', - required: false, - type: 'DefinedRange[] ', - }, - { - defaultValue: 'true', - description: - 'Allows to show or hide the calendar of the component\n@example ', - name: 'showCalendar', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: - 'Allows to pass or avoid the ranges to the component\n@example ', - name: 'showRanges', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether the current selection is valid or invalid according to application logic.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'RangeValue ', - }, - ], - }, - { - displayName: 'CalendarRanges', - props: [ - { - defaultValue: '', - description: 'function to hable the change on Ranges', - name: 'onRangeChange', - required: false, - type: '((key: Selection, ranges: DefinedRange[]) => void) ', - }, - { - defaultValue: '', - description: 'The ranges provided', - name: 'ranges', - required: false, - type: 'DefinedRange[] ', - }, - ], - }, - { - displayName: 'CalendarTable', - props: [ - { - defaultValue: '', - description: 'The calendar state.', - name: 'state', - required: true, - type: 'CalendarState | RangeCalendarState', - }, - ], - }, - { - displayName: 'Card', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'CardFooter', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'CardHeader', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'CardBody', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'Checkbox', - props: [ - { - defaultValue: '', - description: - 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', - name: 'aria-controls', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element that provides an error message for the object.', - name: 'aria-errormessage', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The label for the element.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the element should be selected (uncontrolled).', - name: 'defaultSelected', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', - name: 'excludeFromTabOrder', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Indeterminism is presentational only.\nThe indeterminate visual representation remains regardless of user interaction.', - name: 'isIndeterminate', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the element should be selected (controlled).', - name: 'isSelected', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).', - name: 'name', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's selection state changes.", - name: 'onChange', - required: false, - type: '((isSelected: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: - 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).', - name: 'value', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'Combobox', - props: [ - { - defaultValue: '', - description: 'Whether the ComboBox allows a non-item matching input value to be set.', - name: 'allowsCustomValue', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The contents of the collection.', - name: 'children', - required: true, - type: 'CollectionChildren', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The default value of the ComboBox input (uncontrolled).', - name: 'defaultInputValue', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The list of ComboBox items (uncontrolled).', - name: 'defaultItems', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'The initial selected key in the collection (uncontrolled).', - name: 'defaultSelectedKey', - required: false, - type: 'Key ', - }, - { - defaultValue: '', - description: - 'A description for the field. Provides a hint such as specific requirements for what to choose.', - name: 'description', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: - 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', - name: 'disabledKeys', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'An error message for the field.', - name: 'errorMessage', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The value of the ComboBox input (controlled).', - name: 'inputValue', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The list of ComboBox items (controlled).', - name: 'items', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: - 'The maxHeight specified for the overlay element.\nBy default, it will take all space up to the current viewport height.', - name: 'maxHeight', - required: false, - type: 'number ', - }, - { - defaultValue: "'input'", - description: 'The interaction required to display the ComboBox menu.', - name: 'menuTrigger', - required: false, - type: 'MenuTriggerAction ', - }, - { - defaultValue: '', - description: - 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).', - name: 'name', - required: false, - type: 'string ', - }, - { - defaultValue: '4', - description: - 'The additional offset applied along the main axis between the element and its\nanchor element.', - name: 'offset', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the ComboBox input value changes.', - name: 'onInputChange', - required: false, - type: '((value: string) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: - 'Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.', - name: 'onOpenChange', - required: false, - type: '((isOpen: boolean, menuTrigger?: MenuTriggerAction ) => void) | undefined', - }, - { - defaultValue: '', - description: 'Handler that is called when the selection changes.', - name: 'onSelectionChange', - required: false, - type: '((key: Key) => any) ', - }, - { - defaultValue: '', - description: 'Temporary text that occupies the text input when it is empty.', - name: 'placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: "'bottom'", - description: 'The placement of the element with respect to its anchor element.', - name: 'placement', - required: false, - type: 'Placement ', - }, - { - defaultValue: '', - description: 'The currently selected key in the collection (controlled).', - name: 'selectedKey', - required: false, - type: 'Key | null ', - }, - { - defaultValue: 'true', - description: - 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', - name: 'shouldFlip', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether keyboard navigation is circular.', - name: 'shouldFocusWrap', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'medium'", - description: 'The size of the combobox', - name: 'size', - required: false, - type: '"small" | "medium" ', - }, - { - defaultValue: '', - description: 'Icon displayed at the start of the combobox.', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - ], - }, - { - displayName: 'ComboboxItem', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: '"div" ', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Icon added before the item text.', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - ], - }, - { - displayName: 'ComboboxSection', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: '"div" ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The section label.', - name: 'title', - required: false, - type: 'ReactNode', - }, - ], - }, - { - displayName: 'Container', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: 'true', - description: - 'Whether the container should adjust its max-width based on the current screen size.', - name: 'fixed', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'large'", - description: 'The max-width of the container.', - name: 'maxWidth', - required: false, - type: '"small" | "x-large" | "x-small" | "large" | "medium" ', - }, - ], - }, - { - displayName: 'DatePicker', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (uncontrolled).', - name: 'defaultOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: - 'A description for the field. Provides a hint such as specific requirements for what to choose.', - name: 'description', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'An error message for the field.', - name: 'errorMessage', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: - 'Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.', - name: 'granularity', - required: false, - type: 'Granularity ', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: 'false', - description: 'Whether to hide the time zone abbreviation.', - name: 'hideTimeZone', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.", - name: 'hourCycle', - required: false, - type: '12 | 24 ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', - name: 'isDateUnavailable', - required: false, - type: '((date: DateValue) => boolean) ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (controlled).', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: 'The maximum allowed date that a user may select.', - name: 'maxValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'The minimum allowed date that a user may select.', - name: 'minValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '4', - description: - 'The additional offset applied along the main axis between the element and its\nanchor element.', - name: 'offset', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: DateValue) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the overlay's open state changes.", - name: 'onOpenChange', - required: false, - type: '((isOpen: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Temporary text that occupies the text input when it is empty.', - name: 'placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.", - name: 'placeholderValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: "'bottom'", - description: 'The placement of the element with respect to its anchor element.', - name: 'placement', - required: false, - type: 'Placement ', - }, - { - defaultValue: 'true', - description: - 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', - name: 'shouldFlip', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'medium'", - description: 'The size of the combobox', - name: 'size', - required: false, - type: '"small" | "medium" ', - }, - { - defaultValue: '', - description: - 'Icon displayed at the start of the text field.\n@example } />', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'DateValue ', - }, - ], - }, - { - displayName: 'DateRangePicker', - props: [ - { - defaultValue: '', - description: - 'When combined with `isDateUnavailable`, determines whether non-contiguous ranges,\ni.e. ranges containing unavailable dates, may be selected.', - name: 'allowsNonContiguousRanges', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (uncontrolled).', - name: 'defaultOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'RangeValue ', - }, - { - defaultValue: '', - description: - 'A description for the field. Provides a hint such as specific requirements for what to choose.', - name: 'description', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'An error message for the field.', - name: 'errorMessage', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: - 'Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.', - name: 'granularity', - required: false, - type: 'Granularity ', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: 'false', - description: 'Whether to hide the time zone abbreviation.', - name: 'hideTimeZone', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.", - name: 'hourCycle', - required: false, - type: '12 | 24 ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', - name: 'isDateUnavailable', - required: false, - type: '((date: DateValue) => boolean) ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (controlled).', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: 'The maximum allowed date that a user may select.', - name: 'maxValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '', - description: 'The minimum allowed date that a user may select.', - name: 'minValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: '4', - description: - 'The additional offset applied along the main axis between the element and its\nanchor element.', - name: 'offset', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: RangeValue) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the overlay's open state changes.", - name: 'onOpenChange', - required: false, - type: '((isOpen: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Temporary text that occupies the text input when it is empty.', - name: 'placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.", - name: 'placeholderValue', - required: false, - type: 'DateValue ', - }, - { - defaultValue: "'bottom'", - description: 'The placement of the element with respect to its anchor element.', - name: 'placement', - required: false, - type: 'Placement ', - }, - { - defaultValue: '', - description: 'Brings the list of ranges defined to the component', - name: 'ranges', - required: false, - type: 'DefinedRange[] ', - }, - { - defaultValue: 'true', - description: - 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', - name: 'shouldFlip', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'true', - description: - 'Allows to show or hide the calendar of the component\n@example ', - name: 'showCalendar', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: - 'Allows to pass or avoid the ranges to the component and shoen them instead of the predefined ones\n@example ', - name: 'showRanges', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'medium'", - description: 'The size of the combobox', - name: 'size', - required: false, - type: '"small" | "medium" ', - }, - { - defaultValue: '', - description: - 'Icon displayed at the start of the text field.\n@example } />', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'RangeValue ', - }, - ], - }, - { - displayName: 'Dropdown', - props: [ - { - defaultValue: '', - description: 'The contents of the MenuTrigger - a trigger and a Menu.', - name: 'children', - required: true, - type: 'ReactNode[]', - }, - { - defaultValue: 'true', - description: 'Whether the dropdown closes when a selection is made.', - name: 'closeOnSelect', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (uncontrolled).', - name: 'defaultOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: 'Whether menu trigger is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (controlled).', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '4', - description: - 'The additional offset applied along the main axis between the element and its\nanchor element.', - name: 'offset', - required: false, - type: 'number ', - }, - { - defaultValue: "'bottom'", - description: 'The placement of the element with respect to its anchor element.', - name: 'placement', - required: false, - type: 'Placement ', - }, - { - defaultValue: 'true', - description: - 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', - name: 'shouldFlip', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'press'", - description: 'How the menu is triggered.', - name: 'trigger', - required: false, - type: 'MenuTriggerType ', - }, - { - defaultValue: "'menu'", - description: 'The type of menu that the menu trigger opens.', - name: 'type', - required: false, - type: '"menu" | "listbox" ', - }, - ], - }, - { - displayName: 'DropdownItem', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Icon added after the button text.', - name: 'endIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'Whether the item is virtualized.', - name: 'isVirtualized', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Item object in the collection.', - name: 'item', - required: true, - type: 'Node', - }, - { - defaultValue: '', - description: 'Callback executed on item select.', - name: 'onAction', - required: false, - type: '((key: Key) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Icon added before the button text.', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'Collection state.', - name: 'state', - required: true, - type: 'TreeState', - }, - ], - }, - { - displayName: 'DropdownMenu', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Where the focus should be set.', - name: 'autoFocus', - required: false, - type: 'boolean | FocusStrategy ', - }, - { - defaultValue: '', - description: 'The contents of the collection.', - name: 'children', - required: true, - type: 'CollectionChildren', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The initial selected keys in the collection (uncontrolled).', - name: 'defaultSelectedKeys', - required: false, - type: '"all" | Iterable ', - }, - { - defaultValue: '', - description: - 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', - name: 'disabledKeys', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Whether the collection allows empty selection.', - name: 'disallowEmptySelection', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Item objects in the collection.', - name: 'items', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Handler that is called when an item is selected.', - name: 'onAction', - required: false, - type: '((key: Key) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the menu should close after selecting an item.', - name: 'onClose', - required: false, - type: '(() => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the selection changes.', - name: 'onSelectionChange', - required: false, - type: '((keys: Selection) => any) ', - }, - { - defaultValue: '', - description: 'The currently selected keys in the collection (controlled).', - name: 'selectedKeys', - required: false, - type: '"all" | Iterable ', - }, - { - defaultValue: '', - description: 'The type of selection that is allowed in the collection.', - name: 'selectionMode', - required: false, - type: 'SelectionMode ', - }, - { - defaultValue: '', - description: 'Whether keyboard navigation is circular.', - name: 'shouldFocusWrap', - required: false, - type: 'boolean ', - }, - ], - }, - { - displayName: 'DropdownSection', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'The items within the section.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Item object in the collection.', - name: 'item', - required: true, - type: 'Node', - }, - { - defaultValue: '', - description: 'Callback executed on item select.', - name: 'onAction', - required: false, - type: '((key: Key) => void) ', - }, - { - defaultValue: '', - description: 'Tree state of the collection.', - name: 'state', - required: true, - type: 'TreeState', - }, - { - defaultValue: '', - description: 'The section label.', - name: 'title', - required: false, - type: 'ReactNode', - }, - ], - }, - { - displayName: 'Flex', - props: [ - { - defaultValue: '', - description: "The alignment of the container's children.", - name: 'align', - required: false, - type: '"end" | "baseline" | "start" | "center" ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The gap between rows and columns.', - name: 'gap', - required: false, - type: '"small" | "x-large" | "x-small" | "large" | "medium" ', - }, - { - defaultValue: '', - description: "The justification of the container's children.", - name: 'justify', - required: false, - type: '"end" | "start" | "center" | "around" | "between" ', - }, - { - defaultValue: '', - description: "The orientation of the container's children.", - name: 'orientation', - required: false, - type: '"horizontal" | "vertical" ', - }, - { - defaultValue: '', - description: "Whether the container's should wrap when overflown.", - name: 'wrap', - required: false, - type: 'boolean ', - }, - ], - }, - { - displayName: 'Grid', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'The gap between columns', - name: 'columnGap', - required: false, - type: '"small" | "x-large" | "x-small" | "large" | "medium" ', - }, - { - defaultValue: "'auto'", - description: 'Shorthand for the gridTemplateColumns css property.', - name: 'columns', - required: false, - type: 'number | "inherit" | "none" | (string & {}) | "auto" | "initial" | "revert" | "unset" | "max-content" | "min-content" | "subgrid" | "-moz-initial" | "revert-layer" ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Shorthand for the gridAutoFlow css property.', - name: 'flow', - required: false, - type: 'GridAutoFlow ', - }, - { - defaultValue: '', - description: 'The gap between rows and columns.', - name: 'gap', - required: false, - type: '"small" | "x-large" | "x-small" | "large" | "medium" ', - }, - { - defaultValue: '', - description: 'The gap between rows', - name: 'rowGap', - required: false, - type: '"small" | "x-large" | "x-small" | "large" | "medium" ', - }, - { - defaultValue: "'auto'", - description: 'Shorthand for the gridTemplateRows css property.', - name: 'rows', - required: false, - type: 'number | "inherit" | "none" | (string & {}) | "auto" | "initial" | "revert" | "unset" | "max-content" | "min-content" | "subgrid" | "-moz-initial" | "revert-layer" ', - }, - ], - }, - { - displayName: 'FormControl', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Helper text appended to the input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text element.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: 'true', - description: 'Whether user input is required on the input before form submission.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The label for the form control input element.', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label element.', - name: 'labelProps', - required: false, - type: 'LabelHTMLAttributes ', - }, - { - defaultValue: "'vertical'", - description: 'The layout orientation of the form control.', - name: 'orientation', - required: false, - type: '"horizontal" | "vertical" ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - ], - }, - { - displayName: 'GridItem', - props: [ - { - defaultValue: '', - description: 'Shorthand for the gridArea css property.', - name: 'area', - required: false, - type: 'GridArea ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Shorthand for the gridColumn css property.', - name: 'column', - required: false, - type: 'GridColumn ', - }, - { - defaultValue: '', - description: 'Shorthand for the gridColumnEnd css property.', - name: 'columnEnd', - required: false, - type: 'GridColumnEnd ', - }, - { - defaultValue: '', - description: 'Shorthand for the gridColumnStart css property.', - name: 'columnStart', - required: false, - type: 'GridColumnStart ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Shorthand for the order css property.', - name: 'order', - required: false, - type: 'Order ', - }, - { - defaultValue: '', - description: 'Shorthand for the gridRow css property.', - name: 'row', - required: false, - type: 'GridRow ', - }, - { - defaultValue: '', - description: 'Shorthand for the gridRowEnd css property.', - name: 'rowEnd', - required: false, - type: 'GridRowEnd ', - }, - { - defaultValue: '', - description: 'Shorthand for the gridRowStart css property.', - name: 'rowStart', - required: false, - type: 'GridRowStart ', - }, - ], - }, - { - displayName: 'Icon', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The material-icons icon name', - name: 'icon', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'IconButton', - props: [ - { - defaultValue: '', - description: - 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', - name: 'aria-controls', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', - name: 'aria-expanded', - required: false, - type: 'boolean | "true" | "false" ', - }, - { - defaultValue: '', - description: - 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', - name: 'aria-haspopup', - required: false, - type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Indicates the current "pressed" state of toggle buttons.', - name: 'aria-pressed', - required: false, - type: 'boolean | "true" | "false" | "mixed" ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The content to display in the button.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: "'button'", - description: - "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.", - name: 'elementType', - required: false, - type: '"button" | JSXElementConstructor ', - }, - { - defaultValue: '', - description: - 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', - name: 'excludeFromTabOrder', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'A URL to link to if elementType="a".', - name: 'href', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the button is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler called on a click event.', - name: 'onClick', - required: false, - type: '((event: MouseEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the press is released over the target.', - name: 'onPress', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the press state changes.', - name: 'onPressChange', - required: false, - type: '((isPressed: boolean) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.', - name: 'onPressEnd', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a press interaction starts.', - name: 'onPressStart', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.', - name: 'onPressUp', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: - 'The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).', - name: 'rel', - required: false, - type: 'string ', - }, - { - defaultValue: "'medium'", - description: 'The size of the button.', - name: 'size', - required: false, - type: 'ButtonSize ', - }, - { - defaultValue: '', - description: 'The target window for the link.', - name: 'target', - required: false, - type: 'string ', - }, - { - defaultValue: "'button'", - description: 'The behavior of the button when used in an HTML form.', - name: 'type', - required: false, - type: '"button" | "submit" | "reset" ', - }, - { - defaultValue: "'primary'", - description: 'The display variant of the button.', - name: 'variant', - required: false, - type: 'ButtonVariant ', - }, - ], - }, - { - displayName: 'ListBox', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether to auto focus the listbox or an option.', - name: 'autoFocus', - required: false, - type: 'boolean | FocusStrategy ', - }, - { - defaultValue: '', - description: 'The contents of the collection.', - name: 'children', - required: true, - type: 'CollectionChildren', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The initial selected keys in the collection (uncontrolled).', - name: 'defaultSelectedKeys', - required: false, - type: '"all" | Iterable ', - }, - { - defaultValue: '', - description: - 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', - name: 'disabledKeys', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Whether the collection allows empty selection.', - name: 'disallowEmptySelection', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Item objects in the collection.', - name: 'items', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the selection changes.', - name: 'onSelectionChange', - required: false, - type: '((keys: Selection) => any) ', - }, - { - defaultValue: '', - description: 'The currently selected keys in the collection (controlled).', - name: 'selectedKeys', - required: false, - type: '"all" | Iterable ', - }, - { - defaultValue: '', - description: 'The type of selection that is allowed in the collection.', - name: 'selectionMode', - required: false, - type: 'SelectionMode ', - }, - { - defaultValue: '', - description: 'Whether focus should wrap around when the end/start is reached.', - name: 'shouldFocusWrap', - required: false, - type: 'boolean ', - }, - ], - }, - { - displayName: 'Link', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'ListBoxBase', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether to auto focus the listbox or an option.', - name: 'autoFocus', - required: false, - type: 'boolean | FocusStrategy ', - }, - { - defaultValue: '', - description: 'The contents of the collection.', - name: 'children', - required: true, - type: 'CollectionChildren', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The initial selected keys in the collection (uncontrolled).', - name: 'defaultSelectedKeys', - required: false, - type: '"all" | Iterable ', - }, - { - defaultValue: '', - description: - 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', - name: 'disabledKeys', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Whether the collection allows empty selection.', - name: 'disallowEmptySelection', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Item objects in the collection.', - name: 'items', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the selection changes.', - name: 'onSelectionChange', - required: false, - type: '((keys: Selection) => any) ', - }, - { - defaultValue: '', - description: 'The currently selected keys in the collection (controlled).', - name: 'selectedKeys', - required: false, - type: '"all" | Iterable ', - }, - { - defaultValue: '', - description: 'The type of selection that is allowed in the collection.', - name: 'selectionMode', - required: false, - type: 'SelectionMode ', - }, - { - defaultValue: '', - description: 'Whether focus should wrap around when the end/start is reached.', - name: 'shouldFocusWrap', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The collection list state.', - name: 'state', - required: true, - type: 'ListState', - }, - ], - }, - { - displayName: 'ListBoxItem', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the item is virtualized.', - name: 'isVirtualized', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Item object in the collection.', - name: 'item', - required: true, - type: 'Node', - }, - { - defaultValue: '', - description: 'Callback executed on item select.', - name: 'onAction', - required: false, - type: '((key: Key) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Icon added before the item text.', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - ], - }, - { - displayName: 'ListBoxSection', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Item object in the collection.', - name: 'item', - required: true, - type: 'Node', - }, - { - defaultValue: '', - description: 'The section label.', - name: 'title', - required: false, - type: 'ReactNode', - }, - ], - }, - { - displayName: 'Overlay', - props: [ - { - defaultValue: '', - description: 'The content to be rendered by the overlay', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'The ref of the element to append the children to.', - name: 'containerRef', - required: false, - type: 'RefObject ', - }, - { - defaultValue: '', - description: 'Whether the overlay is currently open.', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - ], - }, - { - displayName: 'PaginationItem', - props: [ - { - defaultValue: '', - description: - 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', - name: 'aria-controls', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', - name: 'aria-expanded', - required: false, - type: 'boolean | "true" | "false" ', - }, - { - defaultValue: '', - description: - 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', - name: 'aria-haspopup', - required: false, - type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Indicates the current "pressed" state of toggle buttons.', - name: 'aria-pressed', - required: false, - type: 'boolean | "true" | "false" | "mixed" ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The content to display in the button.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: "'button'", - description: - "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.", - name: 'elementType', - required: false, - type: '"button" | JSXElementConstructor ', - }, - { - defaultValue: '', - description: - 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', - name: 'excludeFromTabOrder', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'A URL to link to if elementType="a".', - name: 'href', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the pagination item is active.', - name: 'isActive', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the button is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the press is released over the target.', - name: 'onPress', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the press state changes.', - name: 'onPressChange', - required: false, - type: '((isPressed: boolean) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.', - name: 'onPressEnd', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a press interaction starts.', - name: 'onPressStart', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.', - name: 'onPressUp', - required: false, - type: '((e: PressEvent) => void) ', - }, - { - defaultValue: '', - description: - 'The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).', - name: 'rel', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The target window for the link.', - name: 'target', - required: false, - type: 'string ', - }, - { - defaultValue: "'button'", - description: 'The behavior of the button when used in an HTML form.', - name: 'type', - required: false, - type: '"button" | "submit" | "reset" ', - }, - ], - }, - { - displayName: 'Pill', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: "'indigo'", - description: 'The color scheme of the pill', - name: 'colorScheme', - required: false, - type: '"indigo" | "red" ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The icon to render in the pill.', - name: 'icon', - required: false, - type: 'ReactNode', - }, - { - defaultValue: "'false'", - description: 'Whether the pill is collapsible.', - name: 'isCollapsible', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The text label of the pill.', - name: 'label', - required: false, - type: 'ReactNode', - }, - ], - }, - { - displayName: 'Pagination', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '1', - description: 'The outer visible boundaries of the pagination list.', - name: 'boundaries', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '1', - description: 'The default page number (uncontrolled).', - name: 'defaultPage', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Callback executed on page change.', - name: 'onChange', - required: false, - type: '((page: number) => void) ', - }, - { - defaultValue: '', - description: 'The current page (controlled).', - name: 'page', - required: false, - type: 'number ', - }, - { - defaultValue: '10', - description: 'The number of rows rendered per page.', - name: 'rowsPerPage', - required: false, - type: 'number ', - }, - { - defaultValue: 'true', - description: 'Whether to show page numbers buttons.', - name: 'showPageNumbers', - required: false, - type: 'boolean ', - }, - { - defaultValue: '1', - description: 'The number of pages to display before and after the current selected page.', - name: 'siblings', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'The total number of rows in the table.', - name: 'totalRowCount', - required: false, - type: 'number ', - }, - ], - }, - { - displayName: 'Popover', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: 'true', - description: 'Whether to close the popover when the user interacts outside it.', - name: 'isDismissable', - required: false, - type: 'boolean ', - }, - { - defaultValue: 'false', - description: 'Whether pressing the escape key to close the popover should be disabled.', - name: 'isKeyboardDismissDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the popover is open.', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the popover should close.', - name: 'onClose', - required: false, - type: '(() => void) ', - }, - { - defaultValue: 'false', - description: 'Whether the popover should close when focus is lost or moves outside it.', - name: 'shouldCloseOnBlur', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'When user interacts with the argument element outside of the overlay ref,\nreturn true if onClose should be called. This gives you a chance to filter\nout interaction with elements that should not dismiss the overlay.\nBy default, onClose will always be called on interaction outside the overlay ref.', - name: 'shouldCloseOnInteractOutside', - required: false, - type: '((element: Element) => boolean) ', - }, - ], - }, - { - displayName: 'Portal', - props: [ - { - defaultValue: '', - description: 'The ref of the element to append the children to.', - name: 'containerRef', - required: false, - type: 'RefObject ', - }, - ], - }, - { - displayName: 'Provider', - props: [ - { defaultValue: '', description: '', name: 'about', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'accessKey', required: false, type: 'string ' }, - { - defaultValue: '', - description: - 'Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.', - name: 'aria-activedescendant', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.', - name: 'aria-atomic', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", - name: 'aria-autocomplete', - required: false, - type: '"list" | "none" | "both" | "inline" ', - }, - { - defaultValue: '', - description: - 'Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.', - name: 'aria-busy', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.', - name: 'aria-checked', - required: false, - type: 'boolean | "true" | "false" | "mixed" ', - }, - { - defaultValue: '', - description: - 'Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.', - name: 'aria-colcount', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.", - name: 'aria-colindex', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.', - name: 'aria-colspan', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.', - name: 'aria-controls', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates the element that represents the current item within a container or set of related elements.', - name: 'aria-current', - required: false, - type: 'boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that describes the object.\n@see aria-labelledby', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.', - name: 'aria-disabled', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1', - name: 'aria-dropeffect', - required: false, - type: '"link" | "none" | "copy" | "move" | "execute" | "popup" ', - }, - { - defaultValue: '', - description: - 'Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.', - name: 'aria-errormessage', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', - name: 'aria-expanded', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.", - name: 'aria-flowto', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Indicates an element\'s "grabbed" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1', - name: 'aria-grabbed', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', - name: 'aria-haspopup', - required: false, - type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', - }, - { - defaultValue: '', - description: - 'Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.', - name: 'aria-hidden', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.', - name: 'aria-invalid', - required: false, - type: 'boolean | "true" | "false" | "grammar" | "spelling" ', - }, - { - defaultValue: '', - description: - 'Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.', - name: 'aria-keyshortcuts', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Defines a string value that labels the current element.\n@see aria-labelledby.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that labels the current element.\n@see aria-describedby.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines the hierarchical level of an element within a structure.', - name: 'aria-level', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.', - name: 'aria-live', - required: false, - type: '"off" | "assertive" | "polite" ', - }, - { - defaultValue: '', - description: 'Indicates whether an element is modal when displayed.', - name: 'aria-modal', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates whether a text box accepts multiple lines of input or only a single line.', - name: 'aria-multiline', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates that the user may select more than one item from the current selectable descendants.', - name: 'aria-multiselectable', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.", - name: 'aria-orientation', - required: false, - type: '"horizontal" | "vertical" ', - }, - { - defaultValue: '', - description: - 'Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.', - name: 'aria-owns', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.', - name: 'aria-placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.", - name: 'aria-posinset', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.', - name: 'aria-pressed', - required: false, - type: 'boolean | "true" | "false" | "mixed" ', - }, - { - defaultValue: '', - description: - 'Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.', - name: 'aria-readonly', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.', - name: 'aria-relevant', - required: false, - type: '"text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" ', - }, - { - defaultValue: '', - description: - 'Indicates that user input is required on the element before a form may be submitted.', - name: 'aria-required', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Defines a human-readable, author-localized description for the role of an element.', - name: 'aria-roledescription', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.', - name: 'aria-rowcount', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.", - name: 'aria-rowindex', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.', - name: 'aria-rowspan', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.', - name: 'aria-selected', - required: false, - type: 'Booleanish ', - }, - { - defaultValue: '', - description: - 'Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.', - name: 'aria-setsize', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Indicates if items in a table or grid are sorted in ascending or descending order.', - name: 'aria-sort', - required: false, - type: '"none" | "ascending" | "descending" | "other" ', - }, - { - defaultValue: '', - description: 'Defines the maximum allowed value for a range widget.', - name: 'aria-valuemax', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Defines the minimum allowed value for a range widget.', - name: 'aria-valuemin', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Defines the current value for a range widget.\n@see aria-valuetext.', - name: 'aria-valuenow', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: - 'Defines the human readable text alternative of aria-valuenow for a range widget.', - name: 'aria-valuetext', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: '', - name: 'autoCapitalize', - required: false, - type: 'string ', - }, - { defaultValue: '', description: '', name: 'autoCorrect', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'autoSave', required: false, type: 'string ' }, - { - defaultValue: '', - description: 'Content to be wrapped by the provider.', - name: 'children', - required: true, - type: 'ReactNode', - }, - { defaultValue: '', description: '', name: 'className', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'color', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'contentEditable', - required: false, - type: 'Booleanish | "inherit" ', - }, - { defaultValue: '', description: '', name: 'contextMenu', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'dangerouslySetInnerHTML', - required: false, - type: '{ __html: string; } ', - }, - { defaultValue: '', description: '', name: 'datatype', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'defaultChecked', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: '', - name: 'defaultValue', - required: false, - type: 'string | number | readonly string[] ', - }, - { defaultValue: '', description: '', name: 'dir', required: false, type: 'string ' }, - { - defaultValue: 'false;', - description: 'Whether to disable the baseline css.', - name: 'disableCSSBaseline', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: '', - name: 'draggable', - required: false, - type: 'Booleanish ', - }, - { defaultValue: '', description: '', name: 'hidden', required: false, type: 'boolean ' }, - { defaultValue: '', description: '', name: 'id', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'inlist', required: false, type: 'any' }, - { - defaultValue: '', - description: - 'Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute', - name: 'inputMode', - required: false, - type: '"text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" ', - }, - { - defaultValue: '', - description: - 'Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is', - name: 'is', - required: false, - type: 'string ', - }, - { defaultValue: '', description: '', name: 'itemID', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'itemProp', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'itemRef', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'itemScope', required: false, type: 'boolean ' }, - { defaultValue: '', description: '', name: 'itemType', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'lang', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'onAbort', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAbortCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAnimationEnd', - required: false, - type: 'AnimationEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAnimationEndCapture', - required: false, - type: 'AnimationEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAnimationIteration', - required: false, - type: 'AnimationEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAnimationIterationCapture', - required: false, - type: 'AnimationEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAnimationStart', - required: false, - type: 'AnimationEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAnimationStartCapture', - required: false, - type: 'AnimationEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAuxClick', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onAuxClickCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onBeforeInput', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onBeforeInputCapture', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onBlur', - required: false, - type: 'FocusEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onBlurCapture', - required: false, - type: 'FocusEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCanPlay', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCanPlayCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCanPlayThrough', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCanPlayThroughCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onChange', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onChangeCapture', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onClick', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onClickCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCompositionEnd', - required: false, - type: 'CompositionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCompositionEndCapture', - required: false, - type: 'CompositionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCompositionStart', - required: false, - type: 'CompositionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCompositionStartCapture', - required: false, - type: 'CompositionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCompositionUpdate', - required: false, - type: 'CompositionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCompositionUpdateCapture', - required: false, - type: 'CompositionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onContextMenu', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onContextMenuCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCopy', - required: false, - type: 'ClipboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCopyCapture', - required: false, - type: 'ClipboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCut', - required: false, - type: 'ClipboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onCutCapture', - required: false, - type: 'ClipboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDoubleClick', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDoubleClickCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDrag', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragEnd', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragEndCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragEnter', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragEnterCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragExit', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragExitCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragLeave', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragLeaveCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragOver', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragOverCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragStart', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDragStartCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDrop', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDropCapture', - required: false, - type: 'DragEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDurationChange', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onDurationChangeCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onEmptied', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onEmptiedCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onEncrypted', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onEncryptedCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onEnded', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onEndedCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onError', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onErrorCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onFocus', - required: false, - type: 'FocusEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onFocusCapture', - required: false, - type: 'FocusEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onGotPointerCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onGotPointerCaptureCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onInput', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onInputCapture', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onInvalid', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onInvalidCapture', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onKeyDown', - required: false, - type: 'KeyboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onKeyDownCapture', - required: false, - type: 'KeyboardEventHandler ', - }, - { - defaultValue: '', - description: '@deprecated', - name: 'onKeyPress', - required: false, - type: 'KeyboardEventHandler ', - }, - { - defaultValue: '', - description: '@deprecated', - name: 'onKeyPressCapture', - required: false, - type: 'KeyboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onKeyUp', - required: false, - type: 'KeyboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onKeyUpCapture', - required: false, - type: 'KeyboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoad', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadStart', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadStartCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadedData', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadedDataCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadedMetadata', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLoadedMetadataCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLostPointerCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onLostPointerCaptureCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseDown', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseDownCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseEnter', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseLeave', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseMove', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseMoveCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseOut', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseOutCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseOver', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseOverCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseUp', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseUpCapture', - required: false, - type: 'MouseEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPaste', - required: false, - type: 'ClipboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPasteCapture', - required: false, - type: 'ClipboardEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPause', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPauseCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPlay', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPlayCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPlaying', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPlayingCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerCancel', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerCancelCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerDown', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerDownCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerEnter', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerEnterCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerLeave', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerLeaveCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerMove', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerMoveCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerOut', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerOutCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerOver', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerOverCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerUp', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onPointerUpCapture', - required: false, - type: 'PointerEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onProgress', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onProgressCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onRateChange', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onRateChangeCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onReset', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onResetCapture', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onScroll', - required: false, - type: 'UIEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onScrollCapture', - required: false, - type: 'UIEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSeeked', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSeekedCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSeeking', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSeekingCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSelect', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSelectCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onStalled', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onStalledCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSubmit', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSubmitCapture', - required: false, - type: 'FormEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSuspend', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onSuspendCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTimeUpdate', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTimeUpdateCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchCancel', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchCancelCapture', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchEnd', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchEndCapture', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchMove', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchMoveCapture', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchStart', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTouchStartCapture', - required: false, - type: 'TouchEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTransitionEnd', - required: false, - type: 'TransitionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onTransitionEndCapture', - required: false, - type: 'TransitionEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onVolumeChange', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onVolumeChangeCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onWaiting', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onWaitingCapture', - required: false, - type: 'ReactEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onWheel', - required: false, - type: 'WheelEventHandler ', - }, - { - defaultValue: '', - description: '', - name: 'onWheelCapture', - required: false, - type: 'WheelEventHandler ', - }, - { defaultValue: '', description: '', name: 'placeholder', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'prefix', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'property', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'radioGroup', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'resource', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'results', required: false, type: 'number ' }, - { defaultValue: '', description: '', name: 'role', required: false, type: 'AriaRole ' }, - { defaultValue: '', description: '', name: 'security', required: false, type: 'string ' }, - { defaultValue: '', description: '', name: 'slot', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'spellCheck', - required: false, - type: 'Booleanish ', - }, - { defaultValue: '', description: '', name: 'style', required: false, type: 'CSSProperties ' }, - { - defaultValue: '', - description: '', - name: 'suppressContentEditableWarning', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: '', - name: 'suppressHydrationWarning', - required: false, - type: 'boolean ', - }, - { defaultValue: '', description: '', name: 'tabIndex', required: false, type: 'number ' }, - { defaultValue: '', description: '', name: 'title', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'translate', - required: false, - type: '"yes" | "no" ', - }, - { defaultValue: '', description: '', name: 'typeof', required: false, type: 'string ' }, - { - defaultValue: '', - description: '', - name: 'unselectable', - required: false, - type: '"on" | "off" ', - }, - { defaultValue: '', description: '', name: 'vocab', required: false, type: 'string ' }, - ], - }, - { - displayName: 'Radio', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The label for the Radio. Accepts any renderable node.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Whether the radio button is disabled or not.\nShows that a selection exists, but is not available in that circumstance.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: - 'The value of the radio button, used when submitting an HTML form.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).', - name: 'value', - required: true, - type: 'string', - }, - ], - }, - { - displayName: 'RadioGroup', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element that provides an error message for the object.', - name: 'aria-errormessage', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The content to display as the label.', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: - 'The name of the RadioGroup, used when submitting an HTML form.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).', - name: 'name', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: string) => void) ', - }, - { - defaultValue: "'vertical'", - description: 'The layout orientation of the radio group.', - name: 'orientation', - required: false, - type: '"horizontal" | "vertical" ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'Select', - props: [ - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: - 'Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).', - name: 'autoComplete', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The contents of the collection.', - name: 'children', - required: true, - type: 'CollectionChildren', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Sets the default open state of the menu.', - name: 'defaultOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'The initial selected key in the collection (uncontrolled).', - name: 'defaultSelectedKey', - required: false, - type: 'Key ', - }, - { - defaultValue: '', - description: - 'A description for the field. Provides a hint such as specific requirements for what to choose.', - name: 'description', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: - 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', - name: 'disabledKeys', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'An error message for the field.', - name: 'errorMessage', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: - 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', - name: 'excludeFromTabOrder', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the items are currently loading.', - name: 'isLoading', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Sets the open state of the menu.', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Item objects in the collection.', - name: 'items', - required: false, - type: 'Iterable ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: - 'The maxHeight specified for the overlay element.\nBy default, it will take all space up to the current viewport height.', - name: 'maxHeight', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'The name of the input, used when submitting an HTML form.', - name: 'name', - required: false, - type: 'string ', - }, - { - defaultValue: '4', - description: - 'The additional offset applied along the main axis between the element and its\nanchor element.', - name: 'offset', - required: false, - type: 'number ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: - 'Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.', - name: 'onLoadMore', - required: false, - type: '(() => any) ', - }, - { - defaultValue: '', - description: 'Method that is called when the open state of the menu changes.', - name: 'onOpenChange', - required: false, - type: '((isOpen: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the selection changes.', - name: 'onSelectionChange', - required: false, - type: '((key: Key) => any) ', - }, - { - defaultValue: '', - description: 'Temporary text that occupies the text input when it is empty.', - name: 'placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: "'bottom'", - description: 'The placement of the element with respect to its anchor element.', - name: 'placement', - required: false, - type: 'Placement ', - }, - { - defaultValue: '', - description: 'The currently selected key in the collection (controlled).', - name: 'selectedKey', - required: false, - type: 'Key | null ', - }, - { - defaultValue: 'true', - description: - 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', - name: 'shouldFlip', - required: false, - type: 'boolean ', - }, - { - defaultValue: "'medium'", - description: 'The size of the combobox', - name: 'size', - required: false, - type: '"small" | "medium" ', - }, - { - defaultValue: '', - description: - 'Icon displayed at the start of the text field.\n@example } />', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - ], - }, - { - displayName: 'SelectItem', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: '"div" ', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Icon added before the item text.', - name: 'startIcon', - required: false, - type: 'ReactElement> ', - }, - ], - }, - { - displayName: 'SelectSection', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: '"div" ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The section label.', - name: 'title', - required: false, - type: 'ReactNode', - }, - ], - }, - { - displayName: 'Separator', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: "'horizontal", - description: 'The orientation of the separator.', - name: 'orientation', - required: false, - type: '"horizontal" | "vertical" ', - }, - ], - }, - { - displayName: 'Stack', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The gap between elements in the stack.', - name: 'gap', - required: false, - type: '"small" | "x-large" | "x-small" | "large" | "medium" ', - }, - { - defaultValue: "'vertical'", - description: 'The layout orientation of the stack.', - name: 'orientation', - required: false, - type: '"horizontal" | "vertical" ', - }, - ], - }, - { - displayName: 'Switch', - props: [ - { - defaultValue: '', - description: - 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', - name: 'aria-controls', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that describes the object.', - name: 'aria-describedby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: - 'Identifies the element (or elements) that provide a detailed, extended description for the object.', - name: 'aria-details', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Defines a string value that labels the current element.', - name: 'aria-label', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Identifies the element (or elements) that labels the current element.', - name: 'aria-labelledby', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: "The content to render as the Switch's label.", - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the Switch should be selected (uncontrolled).', - name: 'defaultSelected', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', - name: 'excludeFromTabOrder', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", - name: 'id', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the Switch should be selected (controlled).', - name: 'isSelected', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: - 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).', - name: 'name', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the Switch's selection state changes.", - name: 'onChange', - required: false, - type: '((isSelected: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: - 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).', - name: 'value', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'Table', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseEnter', - required: false, - type: '((event: MouseEvent) => void) ', - }, - { - defaultValue: '', - description: '', - name: 'onMouseLeave', - required: false, - type: '((event: MouseEvent) => void) ', - }, - { defaultValue: '', description: '', name: 'showHover', required: false, type: 'boolean ' }, - ], - }, - { - displayName: 'TableBody', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'TableCell', - props: [ - { - defaultValue: "'left'", - description: 'Text alignment of the table cell.', - name: 'align', - required: false, - type: 'Align ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Handler called on mouse enter.', - name: 'onMouseEnter', - required: false, - type: '((event: MouseEvent) => void) ', - }, - ], - }, - { - displayName: 'TableColumn', - props: [ - { - defaultValue: "'left'", - description: 'Text alignment of the table column.', - name: 'align', - required: false, - type: 'Align ', - }, - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'The content of the column.', - name: 'children', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the current column is actively sorted.', - name: 'isActive', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the column supports sorting.', - name: 'isSortable', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Callback executed on column click, used for column sort only.', - name: 'onClick', - required: false, - type: '((event: MouseEvent) => void) ', - }, - { - defaultValue: "'asc'", - description: 'The sort direction of the column.', - name: 'sortDirection', - required: false, - type: '"desc" | "asc" ', - }, - ], - }, - { - displayName: 'TableFooter', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'TableHeader', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - ], - }, - { - displayName: 'TableRow', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Handler called on mouse enter.', - name: 'onMouseEnter', - required: false, - type: '((event: MouseEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler called on mouse leave.', - name: 'onMouseLeave', - required: false, - type: '((event: MouseEvent) => void) ', - }, - ], - }, - { - displayName: 'Tag', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the tag is removeable.', - name: 'isRemovable', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler called on tag removable.', - name: 'onRemove', - required: false, - type: '(() => void) ', - }, - ], - }, - { - displayName: 'TextArea', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: 'Props passed to the input element.', - name: 'inputProps', - required: false, - type: 'InputHTMLAttributes | TextareaHTMLAttributes ', - }, - { - defaultValue: '', - description: 'The ref passed to the input element.', - name: 'inputRef', - required: false, - type: 'RefObject ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether user input is required on the input before form submission.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'LabelHTMLAttributes ', - }, - { - defaultValue: '', - description: 'Whether the textfield should support multiline input (textarea).', - name: 'multiline', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: string) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Temporary text that occupies the text input when it is empty.', - name: 'placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'TextField', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'The default value (uncontrolled).', - name: 'defaultValue', - required: false, - type: 'string ', - }, - { - defaultValue: '', - description: 'Icon displayed at the end of the text field.', - name: 'endIcon', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: 'Props passed to the input element.', - name: 'inputProps', - required: false, - type: 'InputHTMLAttributes | TextareaHTMLAttributes ', - }, - { - defaultValue: '', - description: 'The ref passed to the input element.', - name: 'inputRef', - required: false, - type: 'RefObject ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether user input is required on the input before form submission.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'LabelHTMLAttributes ', - }, - { - defaultValue: '', - description: 'Whether the textfield should support multiline input (textarea).', - name: 'multiline', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the value changes.', - name: 'onChange', - required: false, - type: '((value: string) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Temporary text that occupies the text input when it is empty.', - name: 'placeholder', - required: false, - type: 'string ', - }, - { - defaultValue: "'medium'", - description: 'The size of the combobox', - name: 'size', - required: false, - type: '"small" | "medium" ', - }, - { - defaultValue: '', - description: 'Icon displayed at the start of the text field.', - name: 'startIcon', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - { - defaultValue: '', - description: 'The current value (controlled).', - name: 'value', - required: false, - type: 'string ', - }, - ], - }, - { - displayName: 'TextFieldBase', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Whether the element should receive focus on render.', - name: 'autoFocus', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Icon displayed at the end of the text field.', - name: 'endIcon', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Helper text to append to the form control input element.', - name: 'helperText', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the helper text.', - name: 'helperTextProps', - required: false, - type: 'HTMLAttributes ', - }, - { - defaultValue: '', - description: 'Props passed to the input element.', - name: 'inputProps', - required: false, - type: 'InputHTMLAttributes | TextareaHTMLAttributes ', - }, - { - defaultValue: '', - description: 'The ref passed to the input element.', - name: 'inputRef', - required: false, - type: 'RefObject ', - }, - { - defaultValue: '', - description: 'Whether the input is disabled.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the input can be selected but not changed by the user.', - name: 'isReadOnly', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether user input is required on the input before form submission.', - name: 'isRequired', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Label of the input element', - name: 'label', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Props passed to the label.', - name: 'labelProps', - required: false, - type: 'LabelHTMLAttributes ', - }, - { - defaultValue: '', - description: 'Whether the textfield should support multiline input (textarea).', - name: 'multiline', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element loses focus.', - name: 'onBlur', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when the element receives focus.', - name: 'onFocus', - required: false, - type: '((e: FocusEvent) => void) ', - }, - { - defaultValue: '', - description: "Handler that is called when the element's focus status changes.", - name: 'onFocusChange', - required: false, - type: '((isFocused: boolean) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is pressed.', - name: 'onKeyDown', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Handler that is called when a key is released.', - name: 'onKeyUp', - required: false, - type: '((e: KeyboardEvent) => void) ', - }, - { - defaultValue: '', - description: 'Icon displayed at the start of the text field.', - name: 'startIcon', - required: false, - type: 'ReactNode', - }, - { - defaultValue: '', - description: 'Whether the input should display its "valid" or "invalid" visual styling.', - name: 'validationState', - required: false, - type: 'ValidationState ', - }, - ], - }, - { - displayName: 'Tooltip', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (uncontrolled).', - name: 'defaultOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the tooltip should be disabled, independent from the trigger.', - name: 'isDisabled', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: 'Whether the overlay is open by default (controlled).', - name: 'isOpen', - required: false, - type: 'boolean ', - }, - { - defaultValue: '', - description: "Handler that is called when the overlay's open state changes.", - name: 'onOpenChange', - required: false, - type: '((isOpen: boolean) => void) ', - }, - { - defaultValue: "'top'", - description: 'The placement of the element with respect to its anchor element.', - name: 'placement', - required: false, - type: '"end" | "start" | "left" | "right" | "top" | "bottom" ', - }, - { - defaultValue: '', - description: 'The content rendered within the tooltip.', - name: 'title', - required: false, - type: 'ReactNode', - }, - ], - }, - { - displayName: 'Typography', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: "'primary'", - description: 'The display variant of the text.', - name: 'variant', - required: false, - type: '"body" | "caption" | "title" | "heading" | "display" | "subtitle" | "subtext" | "bodyBold" | "captionBold" | "subtextBold" ', - }, - ], - }, - { - displayName: 'VisuallyHidden', - props: [ - { - defaultValue: '', - description: 'The DOM tag or react component to use for the element.', - name: 'as', - required: false, - type: 'As', - }, - { - defaultValue: '', - description: 'Theme aware style object.', - name: 'css', - required: false, - type: 'CSS ', - }, - { - defaultValue: '', - description: 'Whether the element should become visible on focus, for example skip links.', - name: 'isFocusable', - required: false, - type: 'boolean ', - }, - ], - }, + { + displayName: 'Box', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'Avatar', + props: [ + { + defaultValue: '', + description: 'The alt text passed to the image.', + name: 'alt', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Name used as a fallback if src is not provided or image cannot be found.', + name: 'fallback', + required: false, + type: 'ReactNode', + }, + { + defaultValue: "'medium'", + description: 'The size of the avatar.', + name: 'size', + required: false, + type: '"small" | "medium" ', + }, + { + defaultValue: '', + description: 'The `src` attribute for the `img` element.', + name: 'src', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'Button', + props: [ + { + defaultValue: '', + description: + 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', + name: 'aria-controls', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', + name: 'aria-expanded', + required: false, + type: 'boolean | "true" | "false" ', + }, + { + defaultValue: '', + description: + 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', + name: 'aria-haspopup', + required: false, + type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Indicates the current "pressed" state of toggle buttons.', + name: 'aria-pressed', + required: false, + type: 'boolean | "true" | "false" | "mixed" ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The content to display in the button.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: "'button'", + description: + "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.", + name: 'elementType', + required: false, + type: '"button" | JSXElementConstructor ', + }, + { + defaultValue: '', + description: 'Icon added after the button text.', + name: 'endIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: + 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', + name: 'excludeFromTabOrder', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'A URL to link to if elementType="a".', + name: 'href', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the button is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler called on a click event.', + name: 'onClick', + required: false, + type: '((event: MouseEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the press is released over the target.', + name: 'onPress', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the press state changes.', + name: 'onPressChange', + required: false, + type: '((isPressed: boolean) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.', + name: 'onPressEnd', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a press interaction starts.', + name: 'onPressStart', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.', + name: 'onPressUp', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: + 'The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).', + name: 'rel', + required: false, + type: 'string ', + }, + { + defaultValue: "'medium'", + description: 'The size of the button.', + name: 'size', + required: false, + type: 'ButtonSize ', + }, + { + defaultValue: '', + description: 'Icon added before the button text.', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'The target window for the link.', + name: 'target', + required: false, + type: 'string ', + }, + { + defaultValue: "'button'", + description: 'The behavior of the button when used in an HTML form.', + name: 'type', + required: false, + type: '"button" | "submit" | "reset" ', + }, + { + defaultValue: "'primary'", + description: 'The display variant of the button.', + name: 'variant', + required: false, + type: 'ButtonVariant ', + }, + ], + }, + { + displayName: 'ButtonGroup', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the buttons in the button are attached.', + name: 'isAttached', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: 'Whether the buttons in the button group are all disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'medium'", + description: 'The size of the buttons in the group.', + name: 'size', + required: false, + type: 'ButtonSize ', + }, + { + defaultValue: "'primary'", + description: 'The group variant', + name: 'variant', + required: false, + type: 'ButtonVariant ', + }, + ], + }, + { + displayName: 'Calendar', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: 'false', + description: 'Whether to automatically focus the calendar when it mounts.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The date that is focused when the calendar first mounts (uncountrolled).', + name: 'defaultFocusedValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'An error message to display when the selected value is invalid.', + name: 'errorMessage', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Controls the currently focused date within the calendar.', + name: 'focusedValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: + 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', + name: 'isDateUnavailable', + required: false, + type: '((date: DateValue) => boolean) ', + }, + { + defaultValue: 'false', + description: 'Whether the calendar is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: 'Whether the calendar value is immutable.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The maximum allowed date that a user may select.', + name: 'maxValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'The minimum allowed date that a user may select.', + name: 'minValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: DateValue) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the focused date changes.', + name: 'onFocusChange', + required: false, + type: '((date: CalendarDate) => void) ', + }, + { + defaultValue: '', + description: + 'Whether the current selection is valid or invalid according to application logic.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'DateValue ', + }, + ], + }, + { + displayName: 'CalendarHeader', + props: [ + { + defaultValue: '', + description: 'Props passed to the next button', + name: 'nextButtonProps', + required: true, + type: 'AriaButtonProps<"button">', + }, + { + defaultValue: '', + description: 'Props passed to the previous button.', + name: 'prevButtonProps', + required: true, + type: 'AriaButtonProps<"button">', + }, + { + defaultValue: '', + description: 'The calendar state.', + name: 'state', + required: true, + type: 'CalendarState | RangeCalendarState', + }, + ], + }, + { + displayName: 'CalendarCell', + props: [ + { + defaultValue: '', + description: 'The current month to helpe determine out of range dates.', + name: 'currentMonth', + required: true, + type: 'CalendarDate', + }, + { + defaultValue: '', + description: 'The date that this cell represents.', + name: 'date', + required: true, + type: 'CalendarDate', + }, + { + defaultValue: '', + description: 'The calendar state.', + name: 'state', + required: true, + type: 'CalendarState | RangeCalendarState', + }, + ], + }, + { + displayName: 'CalendarRange', + props: [ + { + defaultValue: '', + description: + 'When combined with `isDateUnavailable`, determines whether non-contiguous ranges,\ni.e. ranges containing unavailable dates, may be selected.', + name: 'allowsNonContiguousRanges', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: 'false', + description: 'Whether to automatically focus the calendar when it mounts.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The date that is focused when the calendar first mounts (uncountrolled).', + name: 'defaultFocusedValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'RangeValue ', + }, + { + defaultValue: '', + description: 'An error message to display when the selected value is invalid.', + name: 'errorMessage', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Controls the currently focused date within the calendar.', + name: 'focusedValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: + 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', + name: 'isDateUnavailable', + required: false, + type: '((date: DateValue) => boolean) ', + }, + { + defaultValue: 'false', + description: 'Whether the calendar is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: 'Whether the calendar value is immutable.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The maximum allowed date that a user may select.', + name: 'maxValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'The minimum allowed date that a user may select.', + name: 'minValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: RangeValue) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the focused date changes.', + name: 'onFocusChange', + required: false, + type: '((date: CalendarDate) => void) ', + }, + { + defaultValue: '', + description: 'Brings the list of ranges defined to the component', + name: 'ranges', + required: false, + type: 'DefinedRange[] ', + }, + { + defaultValue: 'true', + description: + 'Allows to show or hide the calendar of the component\n@example ', + name: 'showCalendar', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: + 'Allows to pass or avoid the ranges to the component\n@example ', + name: 'showRanges', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether the current selection is valid or invalid according to application logic.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'RangeValue ', + }, + ], + }, + { + displayName: 'CalendarRanges', + props: [ + { + defaultValue: '', + description: 'function to hable the change on Ranges', + name: 'onRangeChange', + required: false, + type: '((key: Selection, ranges: DefinedRange[]) => void) ', + }, + { + defaultValue: '', + description: 'The ranges provided', + name: 'ranges', + required: false, + type: 'DefinedRange[] ', + }, + ], + }, + { + displayName: 'CalendarTable', + props: [ + { + defaultValue: '', + description: 'The calendar state.', + name: 'state', + required: true, + type: 'CalendarState | RangeCalendarState', + }, + ], + }, + { + displayName: 'Card', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'CardFooter', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'CardHeader', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'CardBody', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'Checkbox', + props: [ + { + defaultValue: '', + description: + 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', + name: 'aria-controls', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element that provides an error message for the object.', + name: 'aria-errormessage', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The label for the element.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the element should be selected (uncontrolled).', + name: 'defaultSelected', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', + name: 'excludeFromTabOrder', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Indeterminism is presentational only.\nThe indeterminate visual representation remains regardless of user interaction.', + name: 'isIndeterminate', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the element should be selected (controlled).', + name: 'isSelected', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).', + name: 'name', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's selection state changes.", + name: 'onChange', + required: false, + type: '((isSelected: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: + 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).', + name: 'value', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'Combobox', + props: [ + { + defaultValue: '', + description: 'Whether the ComboBox allows a non-item matching input value to be set.', + name: 'allowsCustomValue', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The contents of the collection.', + name: 'children', + required: true, + type: 'CollectionChildren', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The default value of the ComboBox input (uncontrolled).', + name: 'defaultInputValue', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The list of ComboBox items (uncontrolled).', + name: 'defaultItems', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'The initial selected key in the collection (uncontrolled).', + name: 'defaultSelectedKey', + required: false, + type: 'Key ', + }, + { + defaultValue: '', + description: + 'A description for the field. Provides a hint such as specific requirements for what to choose.', + name: 'description', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: + 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', + name: 'disabledKeys', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'An error message for the field.', + name: 'errorMessage', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The value of the ComboBox input (controlled).', + name: 'inputValue', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The list of ComboBox items (controlled).', + name: 'items', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: + 'The maxHeight specified for the overlay element.\nBy default, it will take all space up to the current viewport height.', + name: 'maxHeight', + required: false, + type: 'number ', + }, + { + defaultValue: "'input'", + description: 'The interaction required to display the ComboBox menu.', + name: 'menuTrigger', + required: false, + type: 'MenuTriggerAction ', + }, + { + defaultValue: '', + description: + 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).', + name: 'name', + required: false, + type: 'string ', + }, + { + defaultValue: '4', + description: + 'The additional offset applied along the main axis between the element and its\nanchor element.', + name: 'offset', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the ComboBox input value changes.', + name: 'onInputChange', + required: false, + type: '((value: string) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: + 'Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.', + name: 'onOpenChange', + required: false, + type: '((isOpen: boolean, menuTrigger?: MenuTriggerAction ) => void) | undefined', + }, + { + defaultValue: '', + description: 'Handler that is called when the selection changes.', + name: 'onSelectionChange', + required: false, + type: '((key: Key) => any) ', + }, + { + defaultValue: '', + description: 'Temporary text that occupies the text input when it is empty.', + name: 'placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: "'bottom'", + description: 'The placement of the element with respect to its anchor element.', + name: 'placement', + required: false, + type: 'Placement ', + }, + { + defaultValue: '', + description: 'The currently selected key in the collection (controlled).', + name: 'selectedKey', + required: false, + type: 'Key | null ', + }, + { + defaultValue: 'true', + description: + 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', + name: 'shouldFlip', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether keyboard navigation is circular.', + name: 'shouldFocusWrap', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'medium'", + description: 'The size of the combobox', + name: 'size', + required: false, + type: '"small" | "medium" ', + }, + { + defaultValue: '', + description: 'Icon displayed at the start of the combobox.', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + ], + }, + { + displayName: 'ComboboxItem', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: '"div" ', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Icon added before the item text.', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + ], + }, + { + displayName: 'ComboboxSection', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: '"div" ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The section label.', + name: 'title', + required: false, + type: 'ReactNode', + }, + ], + }, + { + displayName: 'Container', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: 'true', + description: + 'Whether the container should adjust its max-width based on the current screen size.', + name: 'fixed', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'large'", + description: 'The max-width of the container.', + name: 'maxWidth', + required: false, + type: '"small" | "x-large" | "x-small" | "large" | "medium" ', + }, + ], + }, + { + displayName: 'DatePicker', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (uncontrolled).', + name: 'defaultOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: + 'A description for the field. Provides a hint such as specific requirements for what to choose.', + name: 'description', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'An error message for the field.', + name: 'errorMessage', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: + 'Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.', + name: 'granularity', + required: false, + type: 'Granularity ', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: 'false', + description: 'Whether to hide the time zone abbreviation.', + name: 'hideTimeZone', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.", + name: 'hourCycle', + required: false, + type: '12 | 24 ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', + name: 'isDateUnavailable', + required: false, + type: '((date: DateValue) => boolean) ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (controlled).', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: 'The maximum allowed date that a user may select.', + name: 'maxValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'The minimum allowed date that a user may select.', + name: 'minValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '4', + description: + 'The additional offset applied along the main axis between the element and its\nanchor element.', + name: 'offset', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: DateValue) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the overlay's open state changes.", + name: 'onOpenChange', + required: false, + type: '((isOpen: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Temporary text that occupies the text input when it is empty.', + name: 'placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.", + name: 'placeholderValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: "'bottom'", + description: 'The placement of the element with respect to its anchor element.', + name: 'placement', + required: false, + type: 'Placement ', + }, + { + defaultValue: 'true', + description: + 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', + name: 'shouldFlip', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'medium'", + description: 'The size of the combobox', + name: 'size', + required: false, + type: '"small" | "medium" ', + }, + { + defaultValue: '', + description: + 'Icon displayed at the start of the text field.\n@example } />', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'DateValue ', + }, + ], + }, + { + displayName: 'DateRangePicker', + props: [ + { + defaultValue: '', + description: + 'When combined with `isDateUnavailable`, determines whether non-contiguous ranges,\ni.e. ranges containing unavailable dates, may be selected.', + name: 'allowsNonContiguousRanges', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (uncontrolled).', + name: 'defaultOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'RangeValue ', + }, + { + defaultValue: '', + description: + 'A description for the field. Provides a hint such as specific requirements for what to choose.', + name: 'description', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'An error message for the field.', + name: 'errorMessage', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: + 'Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.', + name: 'granularity', + required: false, + type: 'Granularity ', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: 'false', + description: 'Whether to hide the time zone abbreviation.', + name: 'hideTimeZone', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.", + name: 'hourCycle', + required: false, + type: '12 | 24 ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.', + name: 'isDateUnavailable', + required: false, + type: '((date: DateValue) => boolean) ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (controlled).', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: 'The maximum allowed date that a user may select.', + name: 'maxValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '', + description: 'The minimum allowed date that a user may select.', + name: 'minValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: '4', + description: + 'The additional offset applied along the main axis between the element and its\nanchor element.', + name: 'offset', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: RangeValue) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the overlay's open state changes.", + name: 'onOpenChange', + required: false, + type: '((isOpen: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Temporary text that occupies the text input when it is empty.', + name: 'placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.", + name: 'placeholderValue', + required: false, + type: 'DateValue ', + }, + { + defaultValue: "'bottom'", + description: 'The placement of the element with respect to its anchor element.', + name: 'placement', + required: false, + type: 'Placement ', + }, + { + defaultValue: '', + description: 'Brings the list of ranges defined to the component', + name: 'ranges', + required: false, + type: 'DefinedRange[] ', + }, + { + defaultValue: 'true', + description: + 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', + name: 'shouldFlip', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'true', + description: + 'Allows to show or hide the calendar of the component\n@example ', + name: 'showCalendar', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: + 'Allows to pass or avoid the ranges to the component and shoen them instead of the predefined ones\n@example ', + name: 'showRanges', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'medium'", + description: 'The size of the combobox', + name: 'size', + required: false, + type: '"small" | "medium" ', + }, + { + defaultValue: '', + description: + 'Icon displayed at the start of the text field.\n@example } />', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'RangeValue ', + }, + ], + }, + { + displayName: 'Dropdown', + props: [ + { + defaultValue: '', + description: 'The contents of the MenuTrigger - a trigger and a Menu.', + name: 'children', + required: true, + type: 'ReactNode[]', + }, + { + defaultValue: 'true', + description: 'Whether the dropdown closes when a selection is made.', + name: 'closeOnSelect', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (uncontrolled).', + name: 'defaultOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: 'Whether menu trigger is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (controlled).', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '4', + description: + 'The additional offset applied along the main axis between the element and its\nanchor element.', + name: 'offset', + required: false, + type: 'number ', + }, + { + defaultValue: "'bottom'", + description: 'The placement of the element with respect to its anchor element.', + name: 'placement', + required: false, + type: 'Placement ', + }, + { + defaultValue: 'true', + description: + 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', + name: 'shouldFlip', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'press'", + description: 'How the menu is triggered.', + name: 'trigger', + required: false, + type: 'MenuTriggerType ', + }, + { + defaultValue: "'menu'", + description: 'The type of menu that the menu trigger opens.', + name: 'type', + required: false, + type: '"menu" | "listbox" ', + }, + ], + }, + { + displayName: 'DropdownItem', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Icon added after the button text.', + name: 'endIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'Whether the item is virtualized.', + name: 'isVirtualized', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Item object in the collection.', + name: 'item', + required: true, + type: 'Node', + }, + { + defaultValue: '', + description: 'Callback executed on item select.', + name: 'onAction', + required: false, + type: '((key: Key) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Icon added before the button text.', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'Collection state.', + name: 'state', + required: true, + type: 'TreeState', + }, + ], + }, + { + displayName: 'DropdownMenu', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Where the focus should be set.', + name: 'autoFocus', + required: false, + type: 'boolean | FocusStrategy ', + }, + { + defaultValue: '', + description: 'The contents of the collection.', + name: 'children', + required: true, + type: 'CollectionChildren', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The initial selected keys in the collection (uncontrolled).', + name: 'defaultSelectedKeys', + required: false, + type: '"all" | Iterable ', + }, + { + defaultValue: '', + description: + 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', + name: 'disabledKeys', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Whether the collection allows empty selection.', + name: 'disallowEmptySelection', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Item objects in the collection.', + name: 'items', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Handler that is called when an item is selected.', + name: 'onAction', + required: false, + type: '((key: Key) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the menu should close after selecting an item.', + name: 'onClose', + required: false, + type: '(() => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the selection changes.', + name: 'onSelectionChange', + required: false, + type: '((keys: Selection) => any) ', + }, + { + defaultValue: '', + description: 'The currently selected keys in the collection (controlled).', + name: 'selectedKeys', + required: false, + type: '"all" | Iterable ', + }, + { + defaultValue: '', + description: 'The type of selection that is allowed in the collection.', + name: 'selectionMode', + required: false, + type: 'SelectionMode ', + }, + { + defaultValue: '', + description: 'Whether keyboard navigation is circular.', + name: 'shouldFocusWrap', + required: false, + type: 'boolean ', + }, + ], + }, + { + displayName: 'DropdownSection', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'The items within the section.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Item object in the collection.', + name: 'item', + required: true, + type: 'Node', + }, + { + defaultValue: '', + description: 'Callback executed on item select.', + name: 'onAction', + required: false, + type: '((key: Key) => void) ', + }, + { + defaultValue: '', + description: 'Tree state of the collection.', + name: 'state', + required: true, + type: 'TreeState', + }, + { + defaultValue: '', + description: 'The section label.', + name: 'title', + required: false, + type: 'ReactNode', + }, + ], + }, + { + displayName: 'Flex', + props: [ + { + defaultValue: '', + description: "The alignment of the container's children.", + name: 'align', + required: false, + type: '"end" | "baseline" | "start" | "center" ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The gap between rows and columns.', + name: 'gap', + required: false, + type: '"small" | "x-large" | "x-small" | "large" | "medium" ', + }, + { + defaultValue: '', + description: "The justification of the container's children.", + name: 'justify', + required: false, + type: '"end" | "start" | "center" | "around" | "between" ', + }, + { + defaultValue: '', + description: "The orientation of the container's children.", + name: 'orientation', + required: false, + type: '"horizontal" | "vertical" ', + }, + { + defaultValue: '', + description: "Whether the container's should wrap when overflown.", + name: 'wrap', + required: false, + type: 'boolean ', + }, + ], + }, + { + displayName: 'Grid', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'The gap between columns', + name: 'columnGap', + required: false, + type: '"small" | "x-large" | "x-small" | "large" | "medium" ', + }, + { + defaultValue: "'auto'", + description: 'Shorthand for the gridTemplateColumns css property.', + name: 'columns', + required: false, + type: 'number | "inherit" | "none" | (string & {}) | "auto" | "initial" | "revert" | "unset" | "max-content" | "min-content" | "subgrid" | "-moz-initial" | "revert-layer" ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Shorthand for the gridAutoFlow css property.', + name: 'flow', + required: false, + type: 'GridAutoFlow ', + }, + { + defaultValue: '', + description: 'The gap between rows and columns.', + name: 'gap', + required: false, + type: '"small" | "x-large" | "x-small" | "large" | "medium" ', + }, + { + defaultValue: '', + description: 'The gap between rows', + name: 'rowGap', + required: false, + type: '"small" | "x-large" | "x-small" | "large" | "medium" ', + }, + { + defaultValue: "'auto'", + description: 'Shorthand for the gridTemplateRows css property.', + name: 'rows', + required: false, + type: 'number | "inherit" | "none" | (string & {}) | "auto" | "initial" | "revert" | "unset" | "max-content" | "min-content" | "subgrid" | "-moz-initial" | "revert-layer" ', + }, + ], + }, + { + displayName: 'FormControl', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Helper text appended to the input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text element.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: 'true', + description: 'Whether user input is required on the input before form submission.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The label for the form control input element.', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label element.', + name: 'labelProps', + required: false, + type: 'LabelHTMLAttributes ', + }, + { + defaultValue: "'vertical'", + description: 'The layout orientation of the form control.', + name: 'orientation', + required: false, + type: '"horizontal" | "vertical" ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + ], + }, + { + displayName: 'GridItem', + props: [ + { + defaultValue: '', + description: 'Shorthand for the gridArea css property.', + name: 'area', + required: false, + type: 'GridArea ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Shorthand for the gridColumn css property.', + name: 'column', + required: false, + type: 'GridColumn ', + }, + { + defaultValue: '', + description: 'Shorthand for the gridColumnEnd css property.', + name: 'columnEnd', + required: false, + type: 'GridColumnEnd ', + }, + { + defaultValue: '', + description: 'Shorthand for the gridColumnStart css property.', + name: 'columnStart', + required: false, + type: 'GridColumnStart ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Shorthand for the order css property.', + name: 'order', + required: false, + type: 'Order ', + }, + { + defaultValue: '', + description: 'Shorthand for the gridRow css property.', + name: 'row', + required: false, + type: 'GridRow ', + }, + { + defaultValue: '', + description: 'Shorthand for the gridRowEnd css property.', + name: 'rowEnd', + required: false, + type: 'GridRowEnd ', + }, + { + defaultValue: '', + description: 'Shorthand for the gridRowStart css property.', + name: 'rowStart', + required: false, + type: 'GridRowStart ', + }, + ], + }, + { + displayName: 'Icon', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The material-icons icon name', + name: 'icon', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'IconButton', + props: [ + { + defaultValue: '', + description: + 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', + name: 'aria-controls', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', + name: 'aria-expanded', + required: false, + type: 'boolean | "true" | "false" ', + }, + { + defaultValue: '', + description: + 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', + name: 'aria-haspopup', + required: false, + type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Indicates the current "pressed" state of toggle buttons.', + name: 'aria-pressed', + required: false, + type: 'boolean | "true" | "false" | "mixed" ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The content to display in the button.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: "'button'", + description: + "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.", + name: 'elementType', + required: false, + type: '"button" | JSXElementConstructor ', + }, + { + defaultValue: '', + description: + 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', + name: 'excludeFromTabOrder', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'A URL to link to if elementType="a".', + name: 'href', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the button is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler called on a click event.', + name: 'onClick', + required: false, + type: '((event: MouseEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the press is released over the target.', + name: 'onPress', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the press state changes.', + name: 'onPressChange', + required: false, + type: '((isPressed: boolean) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.', + name: 'onPressEnd', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a press interaction starts.', + name: 'onPressStart', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.', + name: 'onPressUp', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: + 'The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).', + name: 'rel', + required: false, + type: 'string ', + }, + { + defaultValue: "'medium'", + description: 'The size of the button.', + name: 'size', + required: false, + type: 'ButtonSize ', + }, + { + defaultValue: '', + description: 'The target window for the link.', + name: 'target', + required: false, + type: 'string ', + }, + { + defaultValue: "'button'", + description: 'The behavior of the button when used in an HTML form.', + name: 'type', + required: false, + type: '"button" | "submit" | "reset" ', + }, + { + defaultValue: "'primary'", + description: 'The display variant of the button.', + name: 'variant', + required: false, + type: 'ButtonVariant ', + }, + ], + }, + { + displayName: 'ListBox', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether to auto focus the listbox or an option.', + name: 'autoFocus', + required: false, + type: 'boolean | FocusStrategy ', + }, + { + defaultValue: '', + description: 'The contents of the collection.', + name: 'children', + required: true, + type: 'CollectionChildren', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The initial selected keys in the collection (uncontrolled).', + name: 'defaultSelectedKeys', + required: false, + type: '"all" | Iterable ', + }, + { + defaultValue: '', + description: + 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', + name: 'disabledKeys', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Whether the collection allows empty selection.', + name: 'disallowEmptySelection', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Item objects in the collection.', + name: 'items', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the selection changes.', + name: 'onSelectionChange', + required: false, + type: '((keys: Selection) => any) ', + }, + { + defaultValue: '', + description: 'The currently selected keys in the collection (controlled).', + name: 'selectedKeys', + required: false, + type: '"all" | Iterable ', + }, + { + defaultValue: '', + description: 'The type of selection that is allowed in the collection.', + name: 'selectionMode', + required: false, + type: 'SelectionMode ', + }, + { + defaultValue: '', + description: 'Whether focus should wrap around when the end/start is reached.', + name: 'shouldFocusWrap', + required: false, + type: 'boolean ', + }, + ], + }, + { + displayName: 'Link', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'ListBoxBase', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether to auto focus the listbox or an option.', + name: 'autoFocus', + required: false, + type: 'boolean | FocusStrategy ', + }, + { + defaultValue: '', + description: 'The contents of the collection.', + name: 'children', + required: true, + type: 'CollectionChildren', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The initial selected keys in the collection (uncontrolled).', + name: 'defaultSelectedKeys', + required: false, + type: '"all" | Iterable ', + }, + { + defaultValue: '', + description: + 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', + name: 'disabledKeys', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Whether the collection allows empty selection.', + name: 'disallowEmptySelection', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Item objects in the collection.', + name: 'items', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the selection changes.', + name: 'onSelectionChange', + required: false, + type: '((keys: Selection) => any) ', + }, + { + defaultValue: '', + description: 'The currently selected keys in the collection (controlled).', + name: 'selectedKeys', + required: false, + type: '"all" | Iterable ', + }, + { + defaultValue: '', + description: 'The type of selection that is allowed in the collection.', + name: 'selectionMode', + required: false, + type: 'SelectionMode ', + }, + { + defaultValue: '', + description: 'Whether focus should wrap around when the end/start is reached.', + name: 'shouldFocusWrap', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The collection list state.', + name: 'state', + required: true, + type: 'ListState', + }, + ], + }, + { + displayName: 'ListBoxItem', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the item is virtualized.', + name: 'isVirtualized', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Item object in the collection.', + name: 'item', + required: true, + type: 'Node', + }, + { + defaultValue: '', + description: 'Callback executed on item select.', + name: 'onAction', + required: false, + type: '((key: Key) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Icon added before the item text.', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + ], + }, + { + displayName: 'ListBoxSection', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Item object in the collection.', + name: 'item', + required: true, + type: 'Node', + }, + { + defaultValue: '', + description: 'The section label.', + name: 'title', + required: false, + type: 'ReactNode', + }, + ], + }, + { + displayName: 'Overlay', + props: [ + { + defaultValue: '', + description: 'The content to be rendered by the overlay', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'The ref of the element to append the children to.', + name: 'containerRef', + required: false, + type: 'RefObject ', + }, + { + defaultValue: '', + description: 'Whether the overlay is currently open.', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + ], + }, + { + displayName: 'PaginationItem', + props: [ + { + defaultValue: '', + description: + 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', + name: 'aria-controls', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', + name: 'aria-expanded', + required: false, + type: 'boolean | "true" | "false" ', + }, + { + defaultValue: '', + description: + 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', + name: 'aria-haspopup', + required: false, + type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Indicates the current "pressed" state of toggle buttons.', + name: 'aria-pressed', + required: false, + type: 'boolean | "true" | "false" | "mixed" ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The content to display in the button.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: "'button'", + description: + "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.", + name: 'elementType', + required: false, + type: '"button" | JSXElementConstructor ', + }, + { + defaultValue: '', + description: + 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', + name: 'excludeFromTabOrder', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'A URL to link to if elementType="a".', + name: 'href', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the pagination item is active.', + name: 'isActive', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the button is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the press is released over the target.', + name: 'onPress', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the press state changes.', + name: 'onPressChange', + required: false, + type: '((isPressed: boolean) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.', + name: 'onPressEnd', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a press interaction starts.', + name: 'onPressStart', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.', + name: 'onPressUp', + required: false, + type: '((e: PressEvent) => void) ', + }, + { + defaultValue: '', + description: + 'The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).', + name: 'rel', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The target window for the link.', + name: 'target', + required: false, + type: 'string ', + }, + { + defaultValue: "'button'", + description: 'The behavior of the button when used in an HTML form.', + name: 'type', + required: false, + type: '"button" | "submit" | "reset" ', + }, + ], + }, + { + displayName: 'Pill', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: "'indigo'", + description: 'The color scheme of the pill', + name: 'colorScheme', + required: false, + type: '"indigo" | "red" ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The icon to render in the pill.', + name: 'icon', + required: false, + type: 'ReactNode', + }, + { + defaultValue: "'false'", + description: 'Whether the pill is collapsible.', + name: 'isCollapsible', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The text label of the pill.', + name: 'label', + required: false, + type: 'ReactNode', + }, + ], + }, + { + displayName: 'Pagination', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '1', + description: 'The outer visible boundaries of the pagination list.', + name: 'boundaries', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '1', + description: 'The default page number (uncontrolled).', + name: 'defaultPage', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Callback executed on page change.', + name: 'onChange', + required: false, + type: '((page: number) => void) ', + }, + { + defaultValue: '', + description: 'The current page (controlled).', + name: 'page', + required: false, + type: 'number ', + }, + { + defaultValue: '10', + description: 'The number of rows rendered per page.', + name: 'rowsPerPage', + required: false, + type: 'number ', + }, + { + defaultValue: 'true', + description: 'Whether to show page numbers buttons.', + name: 'showPageNumbers', + required: false, + type: 'boolean ', + }, + { + defaultValue: '1', + description: 'The number of pages to display before and after the current selected page.', + name: 'siblings', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'The total number of rows in the table.', + name: 'totalRowCount', + required: false, + type: 'number ', + }, + ], + }, + { + displayName: 'Popover', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: 'true', + description: 'Whether to close the popover when the user interacts outside it.', + name: 'isDismissable', + required: false, + type: 'boolean ', + }, + { + defaultValue: 'false', + description: 'Whether pressing the escape key to close the popover should be disabled.', + name: 'isKeyboardDismissDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the popover is open.', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the popover should close.', + name: 'onClose', + required: false, + type: '(() => void) ', + }, + { + defaultValue: 'false', + description: 'Whether the popover should close when focus is lost or moves outside it.', + name: 'shouldCloseOnBlur', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'When user interacts with the argument element outside of the overlay ref,\nreturn true if onClose should be called. This gives you a chance to filter\nout interaction with elements that should not dismiss the overlay.\nBy default, onClose will always be called on interaction outside the overlay ref.', + name: 'shouldCloseOnInteractOutside', + required: false, + type: '((element: Element) => boolean) ', + }, + ], + }, + { + displayName: 'Portal', + props: [ + { + defaultValue: '', + description: 'The ref of the element to append the children to.', + name: 'containerRef', + required: false, + type: 'RefObject ', + }, + ], + }, + { + displayName: 'Provider', + props: [ + { defaultValue: '', description: '', name: 'about', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'accessKey', required: false, type: 'string ' }, + { + defaultValue: '', + description: + 'Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.', + name: 'aria-activedescendant', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.', + name: 'aria-atomic', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.", + name: 'aria-autocomplete', + required: false, + type: '"list" | "none" | "both" | "inline" ', + }, + { + defaultValue: '', + description: + 'Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.', + name: 'aria-busy', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.', + name: 'aria-checked', + required: false, + type: 'boolean | "true" | "false" | "mixed" ', + }, + { + defaultValue: '', + description: + 'Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.', + name: 'aria-colcount', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.", + name: 'aria-colindex', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.', + name: 'aria-colspan', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.', + name: 'aria-controls', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates the element that represents the current item within a container or set of related elements.', + name: 'aria-current', + required: false, + type: 'boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that describes the object.\n@see aria-labelledby', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.', + name: 'aria-disabled', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1', + name: 'aria-dropeffect', + required: false, + type: '"link" | "none" | "copy" | "move" | "execute" | "popup" ', + }, + { + defaultValue: '', + description: + 'Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.', + name: 'aria-errormessage', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.', + name: 'aria-expanded', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.", + name: 'aria-flowto', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Indicates an element\'s "grabbed" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1', + name: 'aria-grabbed', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.', + name: 'aria-haspopup', + required: false, + type: 'boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" ', + }, + { + defaultValue: '', + description: + 'Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.', + name: 'aria-hidden', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.', + name: 'aria-invalid', + required: false, + type: 'boolean | "true" | "false" | "grammar" | "spelling" ', + }, + { + defaultValue: '', + description: + 'Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.', + name: 'aria-keyshortcuts', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Defines a string value that labels the current element.\n@see aria-labelledby.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that labels the current element.\n@see aria-describedby.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines the hierarchical level of an element within a structure.', + name: 'aria-level', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.', + name: 'aria-live', + required: false, + type: '"off" | "assertive" | "polite" ', + }, + { + defaultValue: '', + description: 'Indicates whether an element is modal when displayed.', + name: 'aria-modal', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates whether a text box accepts multiple lines of input or only a single line.', + name: 'aria-multiline', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates that the user may select more than one item from the current selectable descendants.', + name: 'aria-multiselectable', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.", + name: 'aria-orientation', + required: false, + type: '"horizontal" | "vertical" ', + }, + { + defaultValue: '', + description: + 'Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.', + name: 'aria-owns', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.', + name: 'aria-placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.", + name: 'aria-posinset', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.', + name: 'aria-pressed', + required: false, + type: 'boolean | "true" | "false" | "mixed" ', + }, + { + defaultValue: '', + description: + 'Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.', + name: 'aria-readonly', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.', + name: 'aria-relevant', + required: false, + type: '"text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" ', + }, + { + defaultValue: '', + description: + 'Indicates that user input is required on the element before a form may be submitted.', + name: 'aria-required', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Defines a human-readable, author-localized description for the role of an element.', + name: 'aria-roledescription', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.', + name: 'aria-rowcount', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.", + name: 'aria-rowindex', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.', + name: 'aria-rowspan', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.', + name: 'aria-selected', + required: false, + type: 'Booleanish ', + }, + { + defaultValue: '', + description: + 'Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.', + name: 'aria-setsize', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Indicates if items in a table or grid are sorted in ascending or descending order.', + name: 'aria-sort', + required: false, + type: '"none" | "ascending" | "descending" | "other" ', + }, + { + defaultValue: '', + description: 'Defines the maximum allowed value for a range widget.', + name: 'aria-valuemax', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Defines the minimum allowed value for a range widget.', + name: 'aria-valuemin', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Defines the current value for a range widget.\n@see aria-valuetext.', + name: 'aria-valuenow', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: + 'Defines the human readable text alternative of aria-valuenow for a range widget.', + name: 'aria-valuetext', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: '', + name: 'autoCapitalize', + required: false, + type: 'string ', + }, + { defaultValue: '', description: '', name: 'autoCorrect', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'autoSave', required: false, type: 'string ' }, + { + defaultValue: '', + description: 'Content to be wrapped by the provider.', + name: 'children', + required: true, + type: 'ReactNode', + }, + { defaultValue: '', description: '', name: 'className', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'color', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'contentEditable', + required: false, + type: 'Booleanish | "inherit" ', + }, + { defaultValue: '', description: '', name: 'contextMenu', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'dangerouslySetInnerHTML', + required: false, + type: '{ __html: string; } ', + }, + { defaultValue: '', description: '', name: 'datatype', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'defaultChecked', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: '', + name: 'defaultValue', + required: false, + type: 'string | number | readonly string[] ', + }, + { defaultValue: '', description: '', name: 'dir', required: false, type: 'string ' }, + { + defaultValue: 'false;', + description: 'Whether to disable the baseline css.', + name: 'disableCSSBaseline', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: '', + name: 'draggable', + required: false, + type: 'Booleanish ', + }, + { defaultValue: '', description: '', name: 'hidden', required: false, type: 'boolean ' }, + { defaultValue: '', description: '', name: 'id', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'inlist', required: false, type: 'any' }, + { + defaultValue: '', + description: + 'Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute', + name: 'inputMode', + required: false, + type: '"text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" ', + }, + { + defaultValue: '', + description: + 'Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is', + name: 'is', + required: false, + type: 'string ', + }, + { defaultValue: '', description: '', name: 'itemID', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'itemProp', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'itemRef', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'itemScope', required: false, type: 'boolean ' }, + { defaultValue: '', description: '', name: 'itemType', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'lang', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'onAbort', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAbortCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAnimationEnd', + required: false, + type: 'AnimationEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAnimationEndCapture', + required: false, + type: 'AnimationEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAnimationIteration', + required: false, + type: 'AnimationEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAnimationIterationCapture', + required: false, + type: 'AnimationEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAnimationStart', + required: false, + type: 'AnimationEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAnimationStartCapture', + required: false, + type: 'AnimationEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAuxClick', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onAuxClickCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onBeforeInput', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onBeforeInputCapture', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onBlur', + required: false, + type: 'FocusEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onBlurCapture', + required: false, + type: 'FocusEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCanPlay', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCanPlayCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCanPlayThrough', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCanPlayThroughCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onChange', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onChangeCapture', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onClick', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onClickCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCompositionEnd', + required: false, + type: 'CompositionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCompositionEndCapture', + required: false, + type: 'CompositionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCompositionStart', + required: false, + type: 'CompositionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCompositionStartCapture', + required: false, + type: 'CompositionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCompositionUpdate', + required: false, + type: 'CompositionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCompositionUpdateCapture', + required: false, + type: 'CompositionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onContextMenu', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onContextMenuCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCopy', + required: false, + type: 'ClipboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCopyCapture', + required: false, + type: 'ClipboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCut', + required: false, + type: 'ClipboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onCutCapture', + required: false, + type: 'ClipboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDoubleClick', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDoubleClickCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDrag', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragEnd', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragEndCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragEnter', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragEnterCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragExit', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragExitCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragLeave', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragLeaveCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragOver', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragOverCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragStart', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDragStartCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDrop', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDropCapture', + required: false, + type: 'DragEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDurationChange', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onDurationChangeCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onEmptied', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onEmptiedCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onEncrypted', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onEncryptedCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onEnded', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onEndedCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onError', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onErrorCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onFocus', + required: false, + type: 'FocusEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onFocusCapture', + required: false, + type: 'FocusEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onGotPointerCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onGotPointerCaptureCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onInput', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onInputCapture', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onInvalid', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onInvalidCapture', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onKeyDown', + required: false, + type: 'KeyboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onKeyDownCapture', + required: false, + type: 'KeyboardEventHandler ', + }, + { + defaultValue: '', + description: '@deprecated', + name: 'onKeyPress', + required: false, + type: 'KeyboardEventHandler ', + }, + { + defaultValue: '', + description: '@deprecated', + name: 'onKeyPressCapture', + required: false, + type: 'KeyboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onKeyUp', + required: false, + type: 'KeyboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onKeyUpCapture', + required: false, + type: 'KeyboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoad', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadStart', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadStartCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadedData', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadedDataCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadedMetadata', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLoadedMetadataCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLostPointerCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onLostPointerCaptureCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseDown', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseDownCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseEnter', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseLeave', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseMove', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseMoveCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseOut', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseOutCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseOver', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseOverCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseUp', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseUpCapture', + required: false, + type: 'MouseEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPaste', + required: false, + type: 'ClipboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPasteCapture', + required: false, + type: 'ClipboardEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPause', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPauseCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPlay', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPlayCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPlaying', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPlayingCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerCancel', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerCancelCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerDown', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerDownCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerEnter', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerEnterCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerLeave', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerLeaveCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerMove', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerMoveCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerOut', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerOutCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerOver', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerOverCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerUp', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onPointerUpCapture', + required: false, + type: 'PointerEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onProgress', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onProgressCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onRateChange', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onRateChangeCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onReset', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onResetCapture', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onScroll', + required: false, + type: 'UIEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onScrollCapture', + required: false, + type: 'UIEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSeeked', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSeekedCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSeeking', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSeekingCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSelect', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSelectCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onStalled', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onStalledCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSubmit', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSubmitCapture', + required: false, + type: 'FormEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSuspend', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onSuspendCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTimeUpdate', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTimeUpdateCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchCancel', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchCancelCapture', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchEnd', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchEndCapture', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchMove', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchMoveCapture', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchStart', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTouchStartCapture', + required: false, + type: 'TouchEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTransitionEnd', + required: false, + type: 'TransitionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onTransitionEndCapture', + required: false, + type: 'TransitionEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onVolumeChange', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onVolumeChangeCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onWaiting', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onWaitingCapture', + required: false, + type: 'ReactEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onWheel', + required: false, + type: 'WheelEventHandler ', + }, + { + defaultValue: '', + description: '', + name: 'onWheelCapture', + required: false, + type: 'WheelEventHandler ', + }, + { defaultValue: '', description: '', name: 'placeholder', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'prefix', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'property', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'radioGroup', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'resource', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'results', required: false, type: 'number ' }, + { defaultValue: '', description: '', name: 'role', required: false, type: 'AriaRole ' }, + { defaultValue: '', description: '', name: 'security', required: false, type: 'string ' }, + { defaultValue: '', description: '', name: 'slot', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'spellCheck', + required: false, + type: 'Booleanish ', + }, + { defaultValue: '', description: '', name: 'style', required: false, type: 'CSSProperties ' }, + { + defaultValue: '', + description: '', + name: 'suppressContentEditableWarning', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: '', + name: 'suppressHydrationWarning', + required: false, + type: 'boolean ', + }, + { defaultValue: '', description: '', name: 'tabIndex', required: false, type: 'number ' }, + { defaultValue: '', description: '', name: 'title', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'translate', + required: false, + type: '"yes" | "no" ', + }, + { defaultValue: '', description: '', name: 'typeof', required: false, type: 'string ' }, + { + defaultValue: '', + description: '', + name: 'unselectable', + required: false, + type: '"on" | "off" ', + }, + { defaultValue: '', description: '', name: 'vocab', required: false, type: 'string ' }, + ], + }, + { + displayName: 'Radio', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The label for the Radio. Accepts any renderable node.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Whether the radio button is disabled or not.\nShows that a selection exists, but is not available in that circumstance.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: + 'The value of the radio button, used when submitting an HTML form.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).', + name: 'value', + required: true, + type: 'string', + }, + ], + }, + { + displayName: 'RadioGroup', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element that provides an error message for the object.', + name: 'aria-errormessage', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The content to display as the label.', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: + 'The name of the RadioGroup, used when submitting an HTML form.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).', + name: 'name', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: string) => void) ', + }, + { + defaultValue: "'vertical'", + description: 'The layout orientation of the radio group.', + name: 'orientation', + required: false, + type: '"horizontal" | "vertical" ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'Select', + props: [ + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: + 'Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).', + name: 'autoComplete', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The contents of the collection.', + name: 'children', + required: true, + type: 'CollectionChildren', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Sets the default open state of the menu.', + name: 'defaultOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'The initial selected key in the collection (uncontrolled).', + name: 'defaultSelectedKey', + required: false, + type: 'Key ', + }, + { + defaultValue: '', + description: + 'A description for the field. Provides a hint such as specific requirements for what to choose.', + name: 'description', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: + 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.', + name: 'disabledKeys', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'An error message for the field.', + name: 'errorMessage', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: + 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', + name: 'excludeFromTabOrder', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the items are currently loading.', + name: 'isLoading', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Sets the open state of the menu.', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether user input is required on the input before form submission.\nOften paired with the `necessityIndicator` prop to add a visual indicator to the input.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Item objects in the collection.', + name: 'items', + required: false, + type: 'Iterable ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: + 'The maxHeight specified for the overlay element.\nBy default, it will take all space up to the current viewport height.', + name: 'maxHeight', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'The name of the input, used when submitting an HTML form.', + name: 'name', + required: false, + type: 'string ', + }, + { + defaultValue: '4', + description: + 'The additional offset applied along the main axis between the element and its\nanchor element.', + name: 'offset', + required: false, + type: 'number ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: + 'Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.', + name: 'onLoadMore', + required: false, + type: '(() => any) ', + }, + { + defaultValue: '', + description: 'Method that is called when the open state of the menu changes.', + name: 'onOpenChange', + required: false, + type: '((isOpen: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the selection changes.', + name: 'onSelectionChange', + required: false, + type: '((key: Key) => any) ', + }, + { + defaultValue: '', + description: 'Temporary text that occupies the text input when it is empty.', + name: 'placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: "'bottom'", + description: 'The placement of the element with respect to its anchor element.', + name: 'placement', + required: false, + type: 'Placement ', + }, + { + defaultValue: '', + description: 'The currently selected key in the collection (controlled).', + name: 'selectedKey', + required: false, + type: 'Key | null ', + }, + { + defaultValue: 'true', + description: + 'Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely.', + name: 'shouldFlip', + required: false, + type: 'boolean ', + }, + { + defaultValue: "'medium'", + description: 'The size of the combobox', + name: 'size', + required: false, + type: '"small" | "medium" ', + }, + { + defaultValue: '', + description: + 'Icon displayed at the start of the text field.\n@example } />', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + ], + }, + { + displayName: 'SelectItem', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: '"div" ', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Icon added before the item text.', + name: 'startIcon', + required: false, + type: 'ReactElement> ', + }, + ], + }, + { + displayName: 'SelectSection', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: '"div" ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The section label.', + name: 'title', + required: false, + type: 'ReactNode', + }, + ], + }, + { + displayName: 'Separator', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: "'horizontal", + description: 'The orientation of the separator.', + name: 'orientation', + required: false, + type: '"horizontal" | "vertical" ', + }, + ], + }, + { + displayName: 'Stack', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The gap between elements in the stack.', + name: 'gap', + required: false, + type: '"small" | "x-large" | "x-small" | "large" | "medium" ', + }, + { + defaultValue: "'vertical'", + description: 'The layout orientation of the stack.', + name: 'orientation', + required: false, + type: '"horizontal" | "vertical" ', + }, + ], + }, + { + displayName: 'Switch', + props: [ + { + defaultValue: '', + description: + 'Identifies the element (or elements) whose contents or presence are controlled by the current element.', + name: 'aria-controls', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that describes the object.', + name: 'aria-describedby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: + 'Identifies the element (or elements) that provide a detailed, extended description for the object.', + name: 'aria-details', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Defines a string value that labels the current element.', + name: 'aria-label', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Identifies the element (or elements) that labels the current element.', + name: 'aria-labelledby', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: "The content to render as the Switch's label.", + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the Switch should be selected (uncontrolled).', + name: 'defaultSelected', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available.', + name: 'excludeFromTabOrder', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).", + name: 'id', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the Switch should be selected (controlled).', + name: 'isSelected', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: + 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).', + name: 'name', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the Switch's selection state changes.", + name: 'onChange', + required: false, + type: '((isSelected: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: + 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).', + name: 'value', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'Table', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseEnter', + required: false, + type: '((event: MouseEvent) => void) ', + }, + { + defaultValue: '', + description: '', + name: 'onMouseLeave', + required: false, + type: '((event: MouseEvent) => void) ', + }, + { defaultValue: '', description: '', name: 'showHover', required: false, type: 'boolean ' }, + ], + }, + { + displayName: 'TableBody', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'TableCell', + props: [ + { + defaultValue: "'left'", + description: 'Text alignment of the table cell.', + name: 'align', + required: false, + type: 'Align ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Handler called on mouse enter.', + name: 'onMouseEnter', + required: false, + type: '((event: MouseEvent) => void) ', + }, + ], + }, + { + displayName: 'TableColumn', + props: [ + { + defaultValue: "'left'", + description: 'Text alignment of the table column.', + name: 'align', + required: false, + type: 'Align ', + }, + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'The content of the column.', + name: 'children', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the current column is actively sorted.', + name: 'isActive', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the column supports sorting.', + name: 'isSortable', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Callback executed on column click, used for column sort only.', + name: 'onClick', + required: false, + type: '((event: MouseEvent) => void) ', + }, + { + defaultValue: "'asc'", + description: 'The sort direction of the column.', + name: 'sortDirection', + required: false, + type: '"desc" | "asc" ', + }, + ], + }, + { + displayName: 'TableFooter', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'TableHeader', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + ], + }, + { + displayName: 'TableRow', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Handler called on mouse enter.', + name: 'onMouseEnter', + required: false, + type: '((event: MouseEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler called on mouse leave.', + name: 'onMouseLeave', + required: false, + type: '((event: MouseEvent) => void) ', + }, + ], + }, + { + displayName: 'Tag', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the tag is removeable.', + name: 'isRemovable', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler called on tag removable.', + name: 'onRemove', + required: false, + type: '(() => void) ', + }, + ], + }, + { + displayName: 'TextArea', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: 'Props passed to the input element.', + name: 'inputProps', + required: false, + type: 'InputHTMLAttributes | TextareaHTMLAttributes ', + }, + { + defaultValue: '', + description: 'The ref passed to the input element.', + name: 'inputRef', + required: false, + type: 'RefObject ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether user input is required on the input before form submission.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'LabelHTMLAttributes ', + }, + { + defaultValue: '', + description: 'Whether the textfield should support multiline input (textarea).', + name: 'multiline', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: string) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Temporary text that occupies the text input when it is empty.', + name: 'placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'TextField', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'The default value (uncontrolled).', + name: 'defaultValue', + required: false, + type: 'string ', + }, + { + defaultValue: '', + description: 'Icon displayed at the end of the text field.', + name: 'endIcon', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: 'Props passed to the input element.', + name: 'inputProps', + required: false, + type: 'InputHTMLAttributes | TextareaHTMLAttributes ', + }, + { + defaultValue: '', + description: 'The ref passed to the input element.', + name: 'inputRef', + required: false, + type: 'RefObject ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether user input is required on the input before form submission.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'LabelHTMLAttributes ', + }, + { + defaultValue: '', + description: 'Whether the textfield should support multiline input (textarea).', + name: 'multiline', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the value changes.', + name: 'onChange', + required: false, + type: '((value: string) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Temporary text that occupies the text input when it is empty.', + name: 'placeholder', + required: false, + type: 'string ', + }, + { + defaultValue: "'medium'", + description: 'The size of the combobox', + name: 'size', + required: false, + type: '"small" | "medium" ', + }, + { + defaultValue: '', + description: 'Icon displayed at the start of the text field.', + name: 'startIcon', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + { + defaultValue: '', + description: 'The current value (controlled).', + name: 'value', + required: false, + type: 'string ', + }, + ], + }, + { + displayName: 'TextFieldBase', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Whether the element should receive focus on render.', + name: 'autoFocus', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Icon displayed at the end of the text field.', + name: 'endIcon', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Helper text to append to the form control input element.', + name: 'helperText', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the helper text.', + name: 'helperTextProps', + required: false, + type: 'HTMLAttributes ', + }, + { + defaultValue: '', + description: 'Props passed to the input element.', + name: 'inputProps', + required: false, + type: 'InputHTMLAttributes | TextareaHTMLAttributes ', + }, + { + defaultValue: '', + description: 'The ref passed to the input element.', + name: 'inputRef', + required: false, + type: 'RefObject ', + }, + { + defaultValue: '', + description: 'Whether the input is disabled.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the input can be selected but not changed by the user.', + name: 'isReadOnly', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether user input is required on the input before form submission.', + name: 'isRequired', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Label of the input element', + name: 'label', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Props passed to the label.', + name: 'labelProps', + required: false, + type: 'LabelHTMLAttributes ', + }, + { + defaultValue: '', + description: 'Whether the textfield should support multiline input (textarea).', + name: 'multiline', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element loses focus.', + name: 'onBlur', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when the element receives focus.', + name: 'onFocus', + required: false, + type: '((e: FocusEvent) => void) ', + }, + { + defaultValue: '', + description: "Handler that is called when the element's focus status changes.", + name: 'onFocusChange', + required: false, + type: '((isFocused: boolean) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is pressed.', + name: 'onKeyDown', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Handler that is called when a key is released.', + name: 'onKeyUp', + required: false, + type: '((e: KeyboardEvent) => void) ', + }, + { + defaultValue: '', + description: 'Icon displayed at the start of the text field.', + name: 'startIcon', + required: false, + type: 'ReactNode', + }, + { + defaultValue: '', + description: 'Whether the input should display its "valid" or "invalid" visual styling.', + name: 'validationState', + required: false, + type: 'ValidationState ', + }, + ], + }, + { + displayName: 'Tooltip', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (uncontrolled).', + name: 'defaultOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the tooltip should be disabled, independent from the trigger.', + name: 'isDisabled', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: 'Whether the overlay is open by default (controlled).', + name: 'isOpen', + required: false, + type: 'boolean ', + }, + { + defaultValue: '', + description: "Handler that is called when the overlay's open state changes.", + name: 'onOpenChange', + required: false, + type: '((isOpen: boolean) => void) ', + }, + { + defaultValue: "'top'", + description: 'The placement of the element with respect to its anchor element.', + name: 'placement', + required: false, + type: '"end" | "start" | "left" | "right" | "top" | "bottom" ', + }, + { + defaultValue: '', + description: 'The content rendered within the tooltip.', + name: 'title', + required: false, + type: 'ReactNode', + }, + ], + }, + { + displayName: 'Typography', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: "'primary'", + description: 'The display variant of the text.', + name: 'variant', + required: false, + type: '"body" | "caption" | "title" | "heading" | "display" | "subtitle" | "subtext" | "bodyBold" | "captionBold" | "subtextBold" ', + }, + ], + }, + { + displayName: 'VisuallyHidden', + props: [ + { + defaultValue: '', + description: 'The DOM tag or react component to use for the element.', + name: 'as', + required: false, + type: 'As', + }, + { + defaultValue: '', + description: 'Theme aware style object.', + name: 'css', + required: false, + type: 'CSS ', + }, + { + defaultValue: '', + description: 'Whether the element should become visible on focus, for example skip links.', + name: 'isFocusable', + required: false, + type: 'boolean ', + }, + ], + }, ]; diff --git a/apps/docs/src/data/sidebar.ts b/apps/docs/src/data/sidebar.ts index d1bdf0d7..71089f54 100644 --- a/apps/docs/src/data/sidebar.ts +++ b/apps/docs/src/data/sidebar.ts @@ -1,67 +1,67 @@ import type { SidebarItem } from '../types'; export const sidebar: SidebarItem[] = [ - { - collapsible: true, - slug: '/docs/getting-started', - title: 'Getting Started', - items: [ - { title: 'Contributing', slug: '/docs/getting-started/contributing' }, - { title: 'Designers', slug: '/docs/getting-started/designers' }, - { title: 'Developers', slug: '/docs/getting-started/developers' }, - ], - }, - { - collapsible: true, - slug: '/docs/tokens', - title: 'Tokens', - items: [ - { title: 'Colors', slug: '/docs/tokens/colors' }, - { title: 'Radius', slug: '/docs/tokens/radius' }, - { title: 'Shadows', slug: '/docs/tokens/shadows' }, - { title: 'Spacing', slug: '/docs/tokens/spacing' }, - { title: 'Typography', slug: '/docs/tokens/typography' }, - ], - }, - { - collapsible: true, - slug: '/docs/components', - title: 'Components', - items: [ - { title: 'Avatar', slug: '/docs/components/avatar' }, - { title: 'Box', slug: '/docs/components/box' }, - { title: 'Button', slug: '/docs/components/button' }, - { title: 'Button Group', slug: '/docs/components/button-group' }, - { title: 'Card', slug: '/docs/components/card' }, - { title: 'Checkbox', slug: '/docs/components/checkbox' }, - { title: 'Combobox', slug: '/docs/components/combobox' }, - { title: 'Container', slug: '/docs/components/container' }, - { title: 'Date Picker', slug: '/docs/components/date-picker' }, - { title: 'Date Range Picker', slug: '/docs/components/date-range-picker' }, - { title: 'Dropdown', slug: '/docs/components/dropdown' }, - { title: 'Flex', slug: '/docs/components/flex' }, - { title: 'Form Control', slug: '/docs/components/form-control' }, - { title: 'Grid', slug: '/docs/components/grid' }, - { title: 'Icon', slug: '/docs/components/icon' }, - { title: 'Icon Button', slug: '/docs/components/icon-button' }, - { title: 'Link', slug: '/docs/components/link' }, - { title: 'List Box', slug: '/docs/components/list-box' }, - { title: 'Pagination', slug: '/docs/components/pagination' }, - { title: 'Pill', slug: '/docs/components/pill' }, - { title: 'Popover', slug: '/docs/components/popover' }, - { title: 'Radio', slug: '/docs/components/radio' }, - { title: 'Select', slug: '/docs/components/select' }, - { title: 'Separator', slug: '/docs/components/separator' }, - { title: 'Stack', slug: '/docs/components/stack' }, - { title: 'Switch', slug: '/docs/components/switch' }, - { title: 'Table', slug: '/docs/components/table' }, - { title: 'Tag', slug: '/docs/components/tag' }, - { title: 'Text Area', slug: '/docs/components/text-area' }, - { title: 'Text Field', slug: '/docs/components/text-field' }, - { title: 'Tooltip', slug: '/docs/components/tooltip' }, - { title: 'Visually Hidden', slug: '/docs/components/visually-hidden' }, - ], - }, + { + collapsible: true, + slug: '/docs/getting-started', + title: 'Getting Started', + items: [ + { title: 'Contributing', slug: '/docs/getting-started/contributing' }, + { title: 'Designers', slug: '/docs/getting-started/designers' }, + { title: 'Developers', slug: '/docs/getting-started/developers' }, + ], + }, + { + collapsible: true, + slug: '/docs/tokens', + title: 'Tokens', + items: [ + { title: 'Colors', slug: '/docs/tokens/colors' }, + { title: 'Radius', slug: '/docs/tokens/radius' }, + { title: 'Shadows', slug: '/docs/tokens/shadows' }, + { title: 'Spacing', slug: '/docs/tokens/spacing' }, + { title: 'Typography', slug: '/docs/tokens/typography' }, + ], + }, + { + collapsible: true, + slug: '/docs/components', + title: 'Components', + items: [ + { title: 'Avatar', slug: '/docs/components/avatar' }, + { title: 'Box', slug: '/docs/components/box' }, + { title: 'Button', slug: '/docs/components/button' }, + { title: 'Button Group', slug: '/docs/components/button-group' }, + { title: 'Card', slug: '/docs/components/card' }, + { title: 'Checkbox', slug: '/docs/components/checkbox' }, + { title: 'Combobox', slug: '/docs/components/combobox' }, + { title: 'Container', slug: '/docs/components/container' }, + { title: 'Date Picker', slug: '/docs/components/date-picker' }, + { title: 'Date Range Picker', slug: '/docs/components/date-range-picker' }, + { title: 'Dropdown', slug: '/docs/components/dropdown' }, + { title: 'Flex', slug: '/docs/components/flex' }, + { title: 'Form Control', slug: '/docs/components/form-control' }, + { title: 'Grid', slug: '/docs/components/grid' }, + { title: 'Icon', slug: '/docs/components/icon' }, + { title: 'Icon Button', slug: '/docs/components/icon-button' }, + { title: 'Link', slug: '/docs/components/link' }, + { title: 'List Box', slug: '/docs/components/list-box' }, + { title: 'Pagination', slug: '/docs/components/pagination' }, + { title: 'Pill', slug: '/docs/components/pill' }, + { title: 'Popover', slug: '/docs/components/popover' }, + { title: 'Radio', slug: '/docs/components/radio' }, + { title: 'Select', slug: '/docs/components/select' }, + { title: 'Separator', slug: '/docs/components/separator' }, + { title: 'Stack', slug: '/docs/components/stack' }, + { title: 'Switch', slug: '/docs/components/switch' }, + { title: 'Table', slug: '/docs/components/table' }, + { title: 'Tag', slug: '/docs/components/tag' }, + { title: 'Text Area', slug: '/docs/components/text-area' }, + { title: 'Text Field', slug: '/docs/components/text-field' }, + { title: 'Tooltip', slug: '/docs/components/tooltip' }, + { title: 'Visually Hidden', slug: '/docs/components/visually-hidden' }, + ], + }, ]; export default sidebar; diff --git a/apps/docs/src/layouts/Default.tsx b/apps/docs/src/layouts/Default.tsx index f780cc61..ee5ed24a 100644 --- a/apps/docs/src/layouts/Default.tsx +++ b/apps/docs/src/layouts/Default.tsx @@ -4,19 +4,19 @@ import Header from './Header'; import Head from '../components/Head'; interface DefaultLayoutProps { - children: React.ReactNode; + children: React.ReactNode; } function DefaultLayout(props: DefaultLayoutProps) { - const { children } = props; + const { children } = props; - return ( - <> - -
- {children} - - ); + return ( + <> + +
+ {children} + + ); } export default DefaultLayout; diff --git a/apps/docs/src/layouts/Docs.tsx b/apps/docs/src/layouts/Docs.tsx index 6262a5c6..6d7a85a9 100644 --- a/apps/docs/src/layouts/Docs.tsx +++ b/apps/docs/src/layouts/Docs.tsx @@ -9,41 +9,41 @@ import Head from '../components/Head'; import Meta from '../components/Meta'; interface DocsLayoutProps { - children: React.ReactNode; - description?: string; - title?: string; - toc?: TOCType[]; + children: React.ReactNode; + description?: string; + title?: string; + toc?: TOCType[]; } function DocsLayout(props: DocsLayoutProps) { - const { children, description, title, toc = [] } = props; + const { children, description, title, toc = [] } = props; - return ( - - -
- - - - - - {children} - - - - {!isEmpty(toc) && } - - ); + return ( + + +
+ + + + + + {children} + + + + {!isEmpty(toc) && } + + ); } export default DocsLayout; diff --git a/apps/docs/src/layouts/Header.tsx b/apps/docs/src/layouts/Header.tsx index c6cec230..3c465ea0 100644 --- a/apps/docs/src/layouts/Header.tsx +++ b/apps/docs/src/layouts/Header.tsx @@ -4,46 +4,46 @@ import Image from 'next/image'; import Link from 'next/link'; function Header() { - return ( - - - - - Manifest Design System logo - Manifest Design System - - - - - ); + return ( + + + + + Manifest Design System logo + Manifest Design System + + + + + ); } export default Header; diff --git a/apps/docs/src/layouts/Sidebar.tsx b/apps/docs/src/layouts/Sidebar.tsx index 5729aa5a..03088774 100644 --- a/apps/docs/src/layouts/Sidebar.tsx +++ b/apps/docs/src/layouts/Sidebar.tsx @@ -5,35 +5,35 @@ import SidebarItem from '../components/SidebarItem'; import { useRouter } from 'next/router'; function Sidebar() { - const router = useRouter(); + const router = useRouter(); - return ( - - - - {items.map(item => ( - - ))} - - - - ); + return ( + + + + {items.map((item) => ( + + ))} + + + + ); } export default Sidebar; diff --git a/apps/docs/src/layouts/TOC.tsx b/apps/docs/src/layouts/TOC.tsx index 6be1f506..56f30f4a 100644 --- a/apps/docs/src/layouts/TOC.tsx +++ b/apps/docs/src/layouts/TOC.tsx @@ -4,75 +4,75 @@ import { Box, pxToRem, Stack } from '@project44-manifest/react'; import TOCItem from '../components/TOCItem'; interface TOCProps { - items?: TOCType[]; + items?: TOCType[]; } function TOC(props: TOCProps) { - const { items = [] } = props; + const { items = [] } = props; - const [currentHeading, setCurrentHeading] = React.useState(''); + const [currentHeading, setCurrentHeading] = React.useState(''); - const observer = React.useRef(null); + const observer = React.useRef(null); - React.useEffect(() => { - const headings = items.map(item => document.getElementById(item.slug)); + React.useEffect(() => { + const headings = items.map((item) => document.getElementById(item.slug)); - observer.current?.disconnect(); - observer.current = new IntersectionObserver( - entries => { - entries.forEach(entry => { - if (entry?.isIntersecting) { - setCurrentHeading(entry.target.getAttribute('id') ?? ''); - } - }); - }, - { rootMargin: '0% 0% -85% 0%' }, - ); + observer.current?.disconnect(); + observer.current = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry?.isIntersecting) { + setCurrentHeading(entry.target.getAttribute('id') ?? ''); + } + }); + }, + { rootMargin: '0% 0% -85% 0%' }, + ); - headings.forEach(heading => { - if (heading) observer.current?.observe(heading); - }); + headings.forEach((heading) => { + if (heading) observer.current?.observe(heading); + }); - return () => observer.current?.disconnect(); - }, [items]); + return () => observer.current?.disconnect(); + }, [items]); - return ( - - - - {items.map(item => ( - - ))} - - - - ); + return ( + + + + {items.map((item) => ( + + ))} + + + + ); } export default TOC; diff --git a/apps/docs/src/pages/_app.tsx b/apps/docs/src/pages/_app.tsx index 521e8982..1681daa2 100644 --- a/apps/docs/src/pages/_app.tsx +++ b/apps/docs/src/pages/_app.tsx @@ -3,11 +3,11 @@ import * as React from 'react'; import { Provider } from '@project44-manifest/react'; function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ); + return ( + + + + ); } export default MyApp; diff --git a/apps/docs/src/pages/_document.tsx b/apps/docs/src/pages/_document.tsx index ed64402e..dc3e06c1 100644 --- a/apps/docs/src/pages/_document.tsx +++ b/apps/docs/src/pages/_document.tsx @@ -3,31 +3,31 @@ import Document, { Html, Head, Main, NextScript } from 'next/document'; import { getCssText } from '@project44-manifest/react'; class MyDocument extends Document { - override render(): JSX.Element { - return ( - - - - - - - - -