This is page 168 of 179. Use http://codebase.md/xmlui-org/xmlui?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── containers.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── state-management.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ ├── BehaviorContext.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/HtmlTags/HtmlTags.tsx:
--------------------------------------------------------------------------------
```typescript
1 | /**
2 | * @deprecated HTML Tag Components are temporary and will be removed from the framework.
3 | *
4 | * DEPRECATION NOTICE:
5 | * All HTML tag wrapper components in this file are scheduled for removal in a future version.
6 | * These components were created as temporary solutions and should not be used in new development.
7 | *
8 | * Migration Path:
9 | * - Replace with native HTML elements or dedicated XMLUI components
10 | * - Use semantic HTML directly for better performance and maintainability
11 | * - Consider existing XMLUI components (Button, Link, Text, Heading, etc.) for common use cases
12 | *
13 | * Timeline: These components will be removed in the next major version release.
14 | */
15 |
16 | import { createComponentRenderer } from "../../components-core/renderers";
17 | import styles from "./HtmlTags.module.scss";
18 | import { parseScssVar } from "../../components-core/theming/themeVars";
19 | import { LinkNative } from "../Link/LinkNative";
20 | import { Heading } from "../Heading/HeadingNative";
21 | import { Text } from "../Text/TextNative";
22 | import { PropsTrasform } from "../../components-core/utils/extractParam";
23 | import { createMetadata, d } from "../metadata-helpers";
24 | import classnames from 'classnames';
25 |
26 | export const HtmlAMd = createMetadata({
27 | status: "deprecated",
28 | description: "This component renders an HTML `a` tag.",
29 | isHtmlTag: true,
30 | props: {
31 | href: d("Specifies the URL of the page the link goes to"),
32 | target: d("Specifies where to open the linked document"),
33 | rel: d("Specifies the relationship between the current document and the linked document"),
34 | download: d("Indicates that the target will be downloaded when a user clicks on the hyperlink"),
35 | hreflang: d("Specifies the language of the linked document"),
36 | type: d("Specifies the MIME type of the linked document"),
37 | ping: d(
38 | "Specifies a space-separated list of URLs to be notified if the user follows the hyperlink",
39 | ),
40 | referrerPolicy: d("Specifies the referrer policy for the element"),
41 | disabled: d("Specifies that the link should be disabled"),
42 | },
43 | });
44 |
45 | export const htmlATagRenderer = createComponentRenderer(
46 | "a",
47 | HtmlAMd,
48 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
49 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
50 | const { disabled } = p.asOptionalBoolean("disabled");
51 | const { href, ...rest } = p.asRest();
52 | return (
53 | <LinkNative to={href} disabled={disabled ?? false} className={className} {...rest}>
54 | {renderChild(node.children)}
55 | </LinkNative>
56 | );
57 | },
58 | );
59 |
60 | export const HtmlAbbrMd = createMetadata({
61 | status: "deprecated",
62 | description: "This component renders an HTML `abbr` tag.",
63 | isHtmlTag: true,
64 | });
65 |
66 | export const htmlAbbrTagRenderer = createComponentRenderer(
67 | "abbr",
68 | HtmlAbbrMd,
69 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
70 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
71 | const props = p.asRest();
72 | return (
73 | <Text className={className} {...props} variant="abbr">
74 | {renderChild(node.children)}
75 | </Text>
76 | );
77 | },
78 | );
79 |
80 | export const HtmlAddressMd = createMetadata({
81 | status: "deprecated",
82 | description: "This component renders an HTML `address` tag.",
83 | isHtmlTag: true,
84 | });
85 |
86 | export const htmlAddressTagRenderer = createComponentRenderer(
87 | "address",
88 | HtmlAddressMd,
89 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
90 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
91 | const props = p.asRest();
92 | return (
93 | <address className={className} {...props}>
94 | {renderChild(node.children)}
95 | </address>
96 | );
97 | },
98 | );
99 |
100 | export const HtmlAreaMd = createMetadata({
101 | status: "deprecated",
102 | description: "This component renders an HTML `area` tag.",
103 | isHtmlTag: true,
104 | props: {
105 | alt: d("Specifies an alternate text for the area"),
106 | coords: d("Specifies the coordinates of the area"),
107 | download: d("Indicates that the target will be downloaded when a user clicks on the area"),
108 | href: d("Specifies the URL of the linked document"),
109 | hrefLang: d("Specifies the language of the linked document"),
110 | referrerPolicy: d("Specifies the referrer policy for the area"),
111 | rel: d("Specifies the relationship between the current document and the linked document"),
112 | shape: d("Specifies the shape of the area"),
113 | target: d("Specifies where to open the linked document"),
114 | media: d("Specifies a media query for the linked resource"),
115 | },
116 | });
117 |
118 | export const htmlAreaTagRenderer = createComponentRenderer(
119 | "area",
120 | HtmlAreaMd,
121 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
122 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
123 | const props = p.asRest();
124 | return (
125 | <area className={className} {...props}>
126 | {renderChild(node.children)}
127 | </area>
128 | );
129 | },
130 | );
131 |
132 | export const HtmlArticleMd = createMetadata({
133 | status: "deprecated",
134 | description: "This component renders an HTML `article` tag.",
135 | isHtmlTag: true,
136 | });
137 |
138 | export const htmlArticleTagRenderer = createComponentRenderer(
139 | "article",
140 | HtmlArticleMd,
141 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
142 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
143 | const props = p.asRest();
144 | return (
145 | <article className={className} {...props}>
146 | {renderChild(node.children)}
147 | </article>
148 | );
149 | },
150 | );
151 |
152 | export const HtmlAsideMd = createMetadata({
153 | status: "deprecated",
154 | description: "This component renders an HTML `aside` tag.",
155 | isHtmlTag: true,
156 | });
157 |
158 | export const htmlAsideTagRenderer = createComponentRenderer(
159 | "aside",
160 | HtmlAsideMd,
161 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
162 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
163 | const props = p.asRest();
164 | return (
165 | <aside className={className} {...props}>
166 | {renderChild(node.children)}
167 | </aside>
168 | );
169 | },
170 | );
171 |
172 | export const HtmlAudioMd = createMetadata({
173 | status: "deprecated",
174 | description: "This component renders an HTML `audio` tag.",
175 | isHtmlTag: true,
176 | props: {
177 | autoPlay: d("Specifies that the audio will start playing as soon as it is ready"),
178 | controls: d("Specifies that audio controls should be displayed"),
179 | crossOrigin: d("Specifies how the element handles cross-origin requests"),
180 | loop: d("Specifies that the audio will start over again every time it is finished"),
181 | muted: d("Specifies that the audio output should be muted"),
182 | preload: d(
183 | "Specifies if and how the author thinks the audio should be loaded when the page loads",
184 | ),
185 | src: d("Specifies the URL of the audio file"),
186 | },
187 | });
188 |
189 | export const htmlAudioTagRenderer = createComponentRenderer(
190 | "audio",
191 | HtmlAudioMd,
192 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
193 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
194 | const { autoPlay, controls, loop, muted } = p.asOptionalBoolean(
195 | "autoPlay",
196 | "controls",
197 | "loop",
198 | "muted",
199 | );
200 | const props = p.asRest();
201 | return (
202 | <audio
203 | className={className}
204 | autoPlay={autoPlay ?? false}
205 | controls={controls ?? false}
206 | loop={loop ?? false}
207 | muted={muted ?? false}
208 | {...props}
209 | >
210 | {renderChild(node.children)}
211 | </audio>
212 | );
213 | },
214 | );
215 |
216 | export const HtmlBMd = createMetadata({
217 | status: "deprecated",
218 | description: "This component renders an HTML `b` tag.",
219 | isHtmlTag: true,
220 | });
221 |
222 | export const htmlBTagRenderer = createComponentRenderer(
223 | "b",
224 | HtmlBMd,
225 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
226 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
227 | const props = p.asRest();
228 | return (
229 | <b className={className} {...props}>
230 | {renderChild(node.children)}
231 | </b>
232 | );
233 | },
234 | );
235 |
236 | export const HtmlBdiMd = createMetadata({
237 | status: "deprecated",
238 | description: "This component renders an HTML `bdi` tag.",
239 | isHtmlTag: true,
240 | });
241 |
242 | export const htmlBdiTagRenderer = createComponentRenderer(
243 | "bdi",
244 | HtmlBdiMd,
245 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
246 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
247 | const props = p.asRest();
248 | return (
249 | <bdi className={className} {...props}>
250 | {renderChild(node.children)}
251 | </bdi>
252 | );
253 | },
254 | );
255 |
256 | export const HtmlBdoMd = createMetadata({
257 | status: "deprecated",
258 | description: "This component renders an HTML `bdo` tag.",
259 | isHtmlTag: true,
260 | props: {
261 | dir: d("Specifies the text direction override"),
262 | },
263 | });
264 |
265 | export const htmlBdoTagRenderer = createComponentRenderer(
266 | "bdo",
267 | HtmlBdoMd,
268 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
269 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
270 | const props = p.asRest();
271 | return (
272 | <bdo className={className} {...props}>
273 | {renderChild(node.children)}
274 | </bdo>
275 | );
276 | },
277 | );
278 |
279 | export const HtmlBlockquoteMd = createMetadata({
280 | status: "deprecated",
281 | description: "This component renders an HTML `blockquote` tag.",
282 | isHtmlTag: true,
283 | props: {
284 | cite: d("Specifies the source of the quotation"),
285 | },
286 | });
287 |
288 | export const htmlBlockquoteTagRenderer = createComponentRenderer(
289 | "blockquote",
290 | HtmlBlockquoteMd,
291 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
292 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
293 | const props = p.asRest();
294 | return (
295 | <blockquote className={className} {...props}>
296 | {renderChild(node.children)}
297 | </blockquote>
298 | );
299 | },
300 | );
301 |
302 | export const HtmlBrMd = createMetadata({
303 | status: "deprecated",
304 | description: "This component renders an HTML `br` tag.",
305 | isHtmlTag: true,
306 | });
307 |
308 | export const htmlBrTagRenderer = createComponentRenderer(
309 | "br",
310 | HtmlBrMd,
311 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
312 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
313 | const props = p.asRest();
314 | return (
315 | <br className={className} {...props}>
316 | {renderChild(node.children)}
317 | </br>
318 | );
319 | },
320 | );
321 |
322 | export const HtmlButtonMd = createMetadata({
323 | status: "deprecated",
324 | description: "This component renders an HTML `button` tag.",
325 | isHtmlTag: true,
326 | props: {
327 | autoFocus: d("Specifies that the button should automatically get focus when the page loads"),
328 | disabled: d("Specifies that the button should be disabled"),
329 | form: d("Specifies the form the button belongs to"),
330 | formAction: d(
331 | "Specifies the URL of a file that processes the information submitted by the button",
332 | ),
333 | formEncType: d(
334 | "Specifies how the form-data should be encoded when submitting it to the server",
335 | ),
336 | formMethod: d("Specifies the HTTP method to use when sending form-data"),
337 | formNoValidate: d("Specifies that the form should not be validated when submitted"),
338 | formTarget: d("Specifies where to display the response after submitting the form"),
339 | name: d("Specifies a name for the button"),
340 | type: d("Specifies the type of the button"),
341 | value: d("Specifies the value associated with the button"),
342 | },
343 | });
344 |
345 | export const htmlButtonTagRenderer = createComponentRenderer(
346 | "button",
347 | HtmlButtonMd,
348 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
349 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
350 | const { autoFocus, disabled, formNoValidate } = p.asOptionalBoolean(
351 | "autoFocus",
352 | "disabled",
353 | "formNoValidate",
354 | );
355 | const props = p.asRest();
356 | return (
357 | <button
358 | className={className}
359 | autoFocus={autoFocus ?? false}
360 | disabled={disabled ?? false}
361 | formNoValidate={formNoValidate ?? false}
362 | {...props}
363 | >
364 | {renderChild(node.children)}
365 | </button>
366 | );
367 | },
368 | );
369 |
370 | export const HtmlCanvasMd = createMetadata({
371 | status: "deprecated",
372 | description: "This component renders an HTML `canvas` tag.",
373 | isHtmlTag: true,
374 | props: {
375 | width: d("Specifies the width of the canvas"),
376 | height: d("Specifies the height of the canvas"),
377 | },
378 | });
379 |
380 | export const htmlCanvasTagRenderer = createComponentRenderer(
381 | "canvas",
382 | HtmlCanvasMd,
383 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
384 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
385 | const sizeProps = p.asOptionalNumber("width", "height");
386 | const props = p.asRest();
387 | return (
388 | <canvas className={className} {...sizeProps} {...props}>
389 | {renderChild(node.children)}
390 | </canvas>
391 | );
392 | },
393 | );
394 |
395 | export const HtmlCaptionMd = createMetadata({
396 | status: "deprecated",
397 | description: "This component renders an HTML `caption` tag.",
398 | isHtmlTag: true,
399 | });
400 |
401 | export const htmlCaptionTagRenderer = createComponentRenderer(
402 | "caption",
403 | HtmlCaptionMd,
404 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
405 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
406 | const props = p.asRest();
407 | return (
408 | <caption className={className} {...props}>
409 | {renderChild(node.children)}
410 | </caption>
411 | );
412 | },
413 | );
414 |
415 | export const HtmlCiteMd = createMetadata({
416 | status: "deprecated",
417 | description: "This component renders an HTML `cite` tag.",
418 | isHtmlTag: true,
419 | });
420 |
421 | export const htmlCiteTagRenderer = createComponentRenderer(
422 | "cite",
423 | HtmlCiteMd,
424 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
425 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
426 | const props = p.asRest();
427 | return (
428 | <Text className={className} {...props} variant="cite">
429 | {renderChild(node.children)}
430 | </Text>
431 | );
432 | },
433 | );
434 |
435 | export const HtmlCodeMd = createMetadata({
436 | status: "deprecated",
437 | description: "This component renders an HTML `code` tag.",
438 | isHtmlTag: true,
439 | });
440 |
441 | export const htmlCodeTagRenderer = createComponentRenderer(
442 | "code",
443 | HtmlCodeMd,
444 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
445 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
446 | const props = p.asRest();
447 | return (
448 | <Text className={className} {...props} variant="code">
449 | {renderChild(node.children)}
450 | </Text>
451 | );
452 | },
453 | );
454 |
455 | export const HtmlColMd = createMetadata({
456 | status: "deprecated",
457 | description: "This component renders an HTML `col` tag.",
458 | isHtmlTag: true,
459 | props: {
460 | span: d("Specifies the number of columns a `col` element should span"),
461 | },
462 | });
463 |
464 | export const htmlColTagRenderer = createComponentRenderer(
465 | "col",
466 | HtmlColMd,
467 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
468 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
469 | const { span } = p.asOptionalNumber("span");
470 | const props = p.asRest();
471 | return (
472 | <col className={className} span={span} {...props}>
473 | {renderChild(node.children)}
474 | </col>
475 | );
476 | },
477 | );
478 |
479 | export const HtmlColgroupMd = createMetadata({
480 | status: "deprecated",
481 | description: "This component renders an HTML `colgroup` tag.",
482 | isHtmlTag: true,
483 | props: {
484 | span: d("Specifies the number of columns in a `colgroup`"),
485 | },
486 | });
487 |
488 | export const htmlColgroupTagRenderer = createComponentRenderer(
489 | "colgroup",
490 | HtmlColgroupMd,
491 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
492 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
493 | const { span } = p.asOptionalNumber("span");
494 | const props = p.asRest();
495 | return (
496 | <colgroup className={className} span={span} {...props}>
497 | {renderChild(node.children)}
498 | </colgroup>
499 | );
500 | },
501 | );
502 |
503 | export const HtmlDataMd = createMetadata({
504 | status: "deprecated",
505 | description: "This component renders an HTML `data` tag.",
506 | isHtmlTag: true,
507 | props: {
508 | value: d("Specifies the machine-readable value of the element"),
509 | },
510 | });
511 |
512 | export const htmlDataTagRenderer = createComponentRenderer(
513 | "data",
514 | HtmlDataMd,
515 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
516 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
517 | const props = p.asRest();
518 | return (
519 | <data className={className} {...props}>
520 | {renderChild(node.children)}
521 | </data>
522 | );
523 | },
524 | );
525 |
526 | export const HtmlDatalistMd = createMetadata({
527 | status: "deprecated",
528 | description: "This component renders an HTML `datalist` tag.",
529 | isHtmlTag: true,
530 | });
531 |
532 | export const htmlDatalistTagRenderer = createComponentRenderer(
533 | "datalist",
534 | HtmlDatalistMd,
535 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
536 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
537 | const props = p.asRest();
538 | return (
539 | <datalist className={className} {...props}>
540 | {renderChild(node.children)}
541 | </datalist>
542 | );
543 | },
544 | );
545 |
546 | export const HtmlDdMd = createMetadata({
547 | status: "deprecated",
548 | description: "This component renders an HTML `dd` tag.",
549 | isHtmlTag: true,
550 | });
551 |
552 | export const htmlDdTagRenderer = createComponentRenderer(
553 | "dd",
554 | HtmlDdMd,
555 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
556 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
557 | const props = p.asRest();
558 | return (
559 | <dd className={className} {...props}>
560 | {renderChild(node.children)}
561 | </dd>
562 | );
563 | },
564 | );
565 |
566 | export const HtmlDelMd = createMetadata({
567 | status: "deprecated",
568 | description: "This component renders an HTML `del` tag.",
569 | isHtmlTag: true,
570 | props: {
571 | cite: d("Specifies the source of the quotation"),
572 | dateTime: d("Specifies the date and time of the edit"),
573 | },
574 | });
575 |
576 | export const htmlDelTagRenderer = createComponentRenderer(
577 | "del",
578 | HtmlDelMd,
579 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
580 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
581 | const props = p.asRest();
582 | return (
583 | <Text className={className} {...props} variant="deleted">
584 | {renderChild(node.children)}
585 | </Text>
586 | );
587 | },
588 | );
589 |
590 | export const HtmlDetailsMd = createMetadata({
591 | status: "deprecated",
592 | description: "This component renders an HTML `details` tag.",
593 | isHtmlTag: true,
594 | props: {
595 | open: d("Specifies that the details are visible (open)"),
596 | },
597 | themeVars: parseScssVar(styles.themeVarsDetails),
598 | defaultThemeVars: {
599 | "marginTop-HtmlDetails": "1rem",
600 | "marginBottom-HtmlDetails": "1rem",
601 | },
602 | });
603 |
604 | export const htmlDetailsTagRenderer = createComponentRenderer(
605 | "details",
606 | HtmlDetailsMd,
607 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
608 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
609 | const { open } = p.asOptionalBoolean("open");
610 | const props = p.asRest();
611 | return (
612 | <details className={classnames(styles.htmlDetails, className)} open={open ?? false} {...props}>
613 | {renderChild(node.children)}
614 | </details>
615 | );
616 | },
617 | );
618 |
619 | export const HtmlDfnMd = createMetadata({
620 | status: "deprecated",
621 | description: "This component renders an HTML `dfn` tag.",
622 | isHtmlTag: true,
623 | });
624 |
625 | export const htmlDfnTagRenderer = createComponentRenderer(
626 | "dfn",
627 | HtmlDfnMd,
628 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
629 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
630 | const props = p.asRest();
631 | return (
632 | <dfn className={className} {...props}>
633 | {renderChild(node.children)}
634 | </dfn>
635 | );
636 | },
637 | );
638 |
639 | export const HtmlDialogMd = createMetadata({
640 | status: "deprecated",
641 | description: "This component renders an HTML `dialog` tag.",
642 | isHtmlTag: true,
643 | props: {
644 | open: d("Specifies that the dialog is open"),
645 | },
646 | });
647 |
648 | export const htmlDialogTagRenderer = createComponentRenderer(
649 | "dialog",
650 | HtmlDialogMd,
651 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
652 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
653 | const { open } = p.asOptionalBoolean("open");
654 | const props = p.asRest();
655 | return (
656 | <dialog className={className} open={open ?? false} {...props}>
657 | {renderChild(node.children)}
658 | </dialog>
659 | );
660 | },
661 | );
662 |
663 | export const HtmlDivMd = createMetadata({
664 | status: "deprecated",
665 | description: "This component renders an HTML `div` tag.",
666 | isHtmlTag: true,
667 | });
668 |
669 | export const htmlDivTagRenderer = createComponentRenderer(
670 | "div",
671 | HtmlDivMd,
672 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
673 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
674 | const props = p.asRest();
675 | return (
676 | <div className={className} {...props}>
677 | {renderChild(node.children)}
678 | </div>
679 | );
680 | },
681 | );
682 |
683 | export const HtmlDlMd = createMetadata({
684 | status: "deprecated",
685 | description: "This component renders an HTML `dl` tag.",
686 | isHtmlTag: true,
687 | });
688 |
689 | export const htmlDlTagRenderer = createComponentRenderer(
690 | "dl",
691 | HtmlDlMd,
692 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
693 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
694 | const props = p.asRest();
695 | return (
696 | <dl className={className} {...props}>
697 | {renderChild(node.children)}
698 | </dl>
699 | );
700 | },
701 | );
702 |
703 | export const HtmlDtMd = createMetadata({
704 | status: "deprecated",
705 | description: "This component renders an HTML `dt` tag.",
706 | isHtmlTag: true,
707 | });
708 |
709 | export const htmlDtTagRenderer = createComponentRenderer(
710 | "dt",
711 | HtmlDtMd,
712 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
713 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
714 | const props = p.asRest();
715 | return (
716 | <dt className={className} {...props}>
717 | {renderChild(node.children)}
718 | </dt>
719 | );
720 | },
721 | );
722 |
723 | export const HtmlEMMd = createMetadata({
724 | status: "deprecated",
725 | description: "This component renders an HTML `em` tag.",
726 | isHtmlTag: true,
727 | });
728 |
729 | export const htmlEMTagRenderer = createComponentRenderer(
730 | "em",
731 | HtmlEMMd,
732 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
733 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
734 | const props = p.asRest();
735 | return (
736 | <Text className={className} {...props} variant="em">
737 | {renderChild(node.children)}
738 | </Text>
739 | );
740 | },
741 | );
742 |
743 | export const HtmlEmbedMd = createMetadata({
744 | status: "deprecated",
745 | description: "This component renders an HTML `embed` tag.",
746 | isHtmlTag: true,
747 | props: {
748 | src: d("Specifies the URL of the resource"),
749 | type: d("Specifies the type of the resource"),
750 | width: d("Specifies the width of the embed"),
751 | height: d("Specifies the height of the embed"),
752 | },
753 | });
754 |
755 | export const htmlEmbedTagRenderer = createComponentRenderer(
756 | "embed",
757 | HtmlEmbedMd,
758 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
759 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
760 | const { src } = p.asUrlResource("src");
761 | const props = p.asRest();
762 | return (
763 | <embed className={className} src={src} {...props}>
764 | {renderChild(node.children)}
765 | </embed>
766 | );
767 | },
768 | );
769 |
770 | export const HtmlFieldsetMd = createMetadata({
771 | status: "deprecated",
772 | description: "This component renders an HTML `fieldset` tag.",
773 | isHtmlTag: true,
774 | props: {
775 | disabled: d("Specifies that the fieldset should be disabled"),
776 | form: d("Specifies the form the fieldset belongs to"),
777 | name: d("Specifies a name for the fieldset"),
778 | },
779 | });
780 |
781 | export const htmlFieldsetTagRenderer = createComponentRenderer(
782 | "fieldset",
783 | HtmlFieldsetMd,
784 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
785 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
786 | const { disabled } = p.asOptionalBoolean("disabled");
787 | const props = p.asRest();
788 | return (
789 | <fieldset className={className} disabled={disabled ?? false} {...props}>
790 | {renderChild(node.children)}
791 | </fieldset>
792 | );
793 | },
794 | );
795 |
796 | export const HtmlFigcaptionMd = createMetadata({
797 | status: "deprecated",
798 | description: "This component renders an HTML `figcaption` tag.",
799 | isHtmlTag: true,
800 | });
801 |
802 | export const htmlFigcaptionTagRenderer = createComponentRenderer(
803 | "figcaption",
804 | HtmlFigcaptionMd,
805 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
806 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
807 | const props = p.asRest();
808 | return (
809 | <figcaption className={className} {...props}>
810 | {renderChild(node.children)}
811 | </figcaption>
812 | );
813 | },
814 | );
815 |
816 | export const HtmlFigureMd = createMetadata({
817 | status: "deprecated",
818 | description: "This component renders an HTML `figure` tag.",
819 | isHtmlTag: true,
820 | });
821 |
822 | export const htmlFigureTagRenderer = createComponentRenderer(
823 | "figure",
824 | HtmlFigureMd,
825 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
826 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
827 | const props = p.asRest();
828 | return (
829 | <figure className={className} {...props}>
830 | {renderChild(node.children)}
831 | </figure>
832 | );
833 | },
834 | );
835 |
836 | export const HtmlFooterMd = createMetadata({
837 | status: "deprecated",
838 | description: "This component renders an HTML `footer` tag.",
839 | isHtmlTag: true,
840 | });
841 |
842 | export const htmlFooterTagRenderer = createComponentRenderer(
843 | "footer",
844 | HtmlFooterMd,
845 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
846 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
847 | const props = p.asRest();
848 | return (
849 | <footer className={className} {...props}>
850 | {renderChild(node.children)}
851 | </footer>
852 | );
853 | },
854 | );
855 |
856 | export const HtmlFormMd = createMetadata({
857 | status: "deprecated",
858 | description: "This component renders an HTML `form` tag.",
859 | isHtmlTag: true,
860 | props: {
861 | acceptCharset: d(
862 | "Specifies the character encodings that are to be used for the form submission",
863 | ),
864 | action: d("Specifies where to send the form-data when a form is submitted"),
865 | autoComplete: d("Specifies whether a form should have auto-completion"),
866 | encType: d("Specifies how the form-data should be encoded when submitting it to the server"),
867 | method: d("Specifies the HTTP method to use when sending form-data"),
868 | name: d("Specifies the name of the form"),
869 | noValidate: d("Specifies that the form should not be validated when submitted"),
870 | target: d("Specifies where to display the response after submitting the form"),
871 | },
872 | });
873 |
874 | export const htmlFormTagRenderer = createComponentRenderer(
875 | "form",
876 | HtmlFormMd,
877 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
878 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
879 | const { noValidate } = p.asOptionalBoolean("noValidate");
880 | const props = p.asRest();
881 | return (
882 | <form className={className} noValidate={noValidate ?? false} {...props}>
883 | {renderChild(node.children)}
884 | </form>
885 | );
886 | },
887 | );
888 |
889 | export const HtmlH1Md = createMetadata({
890 | status: "deprecated",
891 | description: "This component renders an HTML `h1` tag.",
892 | isHtmlTag: true,
893 | themeVars: parseScssVar(styles.themeVarsHeading),
894 | defaultThemeVars: {
895 | "marginTop-HtmlHeading": "1rem",
896 | "marginBottom-HtmlHeading": ".5rem",
897 | },
898 | });
899 |
900 | export const htmlH1TagRenderer = createComponentRenderer(
901 | "h1",
902 | HtmlH1Md,
903 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
904 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
905 | const props = p.asRest();
906 | return (
907 | <Heading className={classnames(className, styles.htmlHeading)} {...props} level="h1">
908 | {renderChild(node.children)}
909 | </Heading>
910 | );
911 | },
912 | );
913 |
914 | export const HtmlH2Md = createMetadata({
915 | status: "deprecated",
916 | description: "This component renders an HTML `h2` tag.",
917 | isHtmlTag: true,
918 | themeVars: parseScssVar(styles.themeVarsHeading),
919 | defaultThemeVars: {
920 | "marginTop-HtmlHeading": "1rem",
921 | "marginBottom-HtmlHeading": ".5rem",
922 | },
923 | });
924 |
925 | export const htmlH2TagRenderer = createComponentRenderer(
926 | "h2",
927 | HtmlH2Md,
928 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
929 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
930 | const props = p.asRest();
931 | return (
932 | <Heading className={classnames(className, styles.htmlHeading)} {...props} level="h2">
933 | {renderChild(node.children)}
934 | </Heading>
935 | );
936 | },
937 | );
938 |
939 | export const HtmlH3Md = createMetadata({
940 | status: "deprecated",
941 | description: "This component renders an HTML `h3` tag.",
942 | isHtmlTag: true,
943 | themeVars: parseScssVar(styles.themeVarsHeading),
944 | defaultThemeVars: {
945 | "marginTop-HtmlHeading": "1rem",
946 | "marginBottom-HtmlHeading": ".5rem",
947 | },
948 | });
949 |
950 | export const htmlH3TagRenderer = createComponentRenderer(
951 | "h3",
952 | HtmlH3Md,
953 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
954 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
955 | const props = p.asRest();
956 | return (
957 | <Heading className={classnames(className, styles.htmlHeading)} {...props} level="h3">
958 | {renderChild(node.children)}
959 | </Heading>
960 | );
961 | },
962 | );
963 |
964 | export const HtmlH4Md = createMetadata({
965 | status: "deprecated",
966 | description: "This component renders an HTML `h4` tag.",
967 | isHtmlTag: true,
968 | themeVars: parseScssVar(styles.themeVarsHeading),
969 | defaultThemeVars: {
970 | "marginTop-HtmlHeading": "1rem",
971 | "marginBottom-HtmlHeading": ".5rem",
972 | },
973 | });
974 |
975 | export const htmlH4TagRenderer = createComponentRenderer(
976 | "h4",
977 | HtmlH4Md,
978 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
979 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
980 | const props = p.asRest();
981 | return (
982 | <Heading className={classnames(className, styles.htmlHeading)} {...props} level="h4">
983 | {renderChild(node.children)}
984 | </Heading>
985 | );
986 | },
987 | );
988 |
989 | export const HtmlH5Md = createMetadata({
990 | status: "deprecated",
991 | description: "This component renders an HTML `h5` tag.",
992 | isHtmlTag: true,
993 | themeVars: parseScssVar(styles.themeVarsHeading),
994 | defaultThemeVars: {
995 | "marginTop-HtmlHeading": "1rem",
996 | "marginBottom-HtmlHeading": ".5rem",
997 | },
998 | });
999 |
1000 | export const htmlH5TagRenderer = createComponentRenderer(
1001 | "h5",
1002 | HtmlH5Md,
1003 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1004 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1005 | const props = p.asRest();
1006 | return (
1007 | <Heading className={classnames(className, styles.htmlHeading)} {...props} level="h5">
1008 | {renderChild(node.children)}
1009 | </Heading>
1010 | );
1011 | },
1012 | );
1013 |
1014 | export const HtmlH6Md = createMetadata({
1015 | status: "deprecated",
1016 | description: "This component renders an HTML `h6` tag.",
1017 | isHtmlTag: true,
1018 | themeVars: parseScssVar(styles.themeVarsHeading),
1019 | defaultThemeVars: {
1020 | "marginTop-HtmlHeading": "1rem",
1021 | "marginBottom-HtmlHeading": ".5rem",
1022 | },
1023 | });
1024 |
1025 | export const htmlH6TagRenderer = createComponentRenderer(
1026 | "h6",
1027 | HtmlH6Md,
1028 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1029 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1030 | const props = p.asRest();
1031 | return (
1032 | <Heading className={classnames(className, styles.htmlHeading)} {...props} level="h6">
1033 | {renderChild(node.children)}
1034 | </Heading>
1035 | );
1036 | },
1037 | );
1038 |
1039 | export const HtmlHeaderMd = createMetadata({
1040 | status: "deprecated",
1041 | description: "This component renders an HTML `header` tag.",
1042 | isHtmlTag: true,
1043 | });
1044 |
1045 | export const htmlHeaderTagRenderer = createComponentRenderer(
1046 | "header",
1047 | HtmlHeaderMd,
1048 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1049 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1050 | const props = p.asRest();
1051 | return (
1052 | <header className={className} {...props}>
1053 | {renderChild(node.children)}
1054 | </header>
1055 | );
1056 | },
1057 | );
1058 |
1059 | export const HtmlHrMd = createMetadata({
1060 | status: "deprecated",
1061 | description: "This component renders an HTML `hr` tag.",
1062 | isHtmlTag: true,
1063 | });
1064 |
1065 | export const htmlHrTagRenderer = createComponentRenderer(
1066 | "hr",
1067 | HtmlHrMd,
1068 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1069 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1070 | const props = p.asRest();
1071 | return (
1072 | <hr className={className} {...props}>
1073 | {renderChild(node.children)}
1074 | </hr>
1075 | );
1076 | },
1077 | );
1078 |
1079 | export const HtmlIMd = createMetadata({
1080 | status: "deprecated",
1081 | description: "This component renders an HTML `i` tag.",
1082 | isHtmlTag: true,
1083 | });
1084 |
1085 | export const htmlITagRenderer = createComponentRenderer(
1086 | "i",
1087 | HtmlIMd,
1088 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1089 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1090 | const props = p.asRest();
1091 | return (
1092 | <i className={className} {...props}>
1093 | {renderChild(node.children)}
1094 | </i>
1095 | );
1096 | },
1097 | );
1098 |
1099 | export const HtmlIframeMd = createMetadata({
1100 | status: "deprecated",
1101 | description: "This component renders an HTML `iframe` tag.",
1102 | isHtmlTag: true,
1103 | props: {
1104 | src: d("Specifies the URL of the page to embed"),
1105 | srcDoc: d("Specifies the HTML content of the page to embed"),
1106 | name: d("Specifies the name of the iframe"),
1107 | sandbox: d("Specifies a set of extra restrictions for the content in the iframe"),
1108 | allow: d("Specifies a feature policy for the iframe"),
1109 | allowFullScreen: d("Specifies that the iframe can be displayed in full-screen mode"),
1110 | width: d("Specifies the width of the iframe"),
1111 | height: d("Specifies the height of the iframe"),
1112 | loading: d("Specifies the loading behavior of the iframe"),
1113 | referrerPolicy: d("Specifies the referrer policy for the iframe"),
1114 | },
1115 | });
1116 |
1117 | export const htmlIframeTagRenderer = createComponentRenderer(
1118 | "iframe",
1119 | HtmlIframeMd,
1120 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1121 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1122 | const { src } = p.asUrlResource("src");
1123 | const { allowFullScreen } = p.asOptionalBoolean("allowFullScreen");
1124 | const props = p.asRest();
1125 | return (
1126 | <iframe className={className} src={src} allowFullScreen={allowFullScreen ?? false} {...props}>
1127 | {renderChild(node.children)}
1128 | </iframe>
1129 | );
1130 | },
1131 | );
1132 |
1133 | export const HtmlImgMd = createMetadata({
1134 | status: "deprecated",
1135 | description: "This component renders an HTML `img` tag.",
1136 | isHtmlTag: true,
1137 | props: {
1138 | alt: d("Specifies an alternate text for an image"),
1139 | height: d("Specifies the height of an image"),
1140 | src: d("Specifies the path to the image"),
1141 | width: d("Specifies the width of an image"),
1142 | useMap: d("Specifies an image as a client-side image map"),
1143 | loading: d("Specifies the loading behavior of the image"),
1144 | referrerPolicy: d("Specifies the referrer policy for the image"),
1145 | sizes: d("Specifies image sizes for different page layouts"),
1146 | }
1147 | });
1148 |
1149 | export const htmlImgTagRenderer = createComponentRenderer(
1150 | "img",
1151 | HtmlImgMd,
1152 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1153 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1154 | const { src } = p.asUrlResource("src");
1155 | const props = p.asRest() as Record<string, any>;
1156 | return (
1157 | <img className={className} src={src} {...props}>
1158 | {renderChild(node.children)}
1159 | </img>
1160 | );
1161 | },
1162 | );
1163 |
1164 | export const HtmlInputMd = createMetadata({
1165 | status: "deprecated",
1166 | description: "This component renders an HTML `input` tag.",
1167 | isHtmlTag: true,
1168 | props: {
1169 | type: d("Specifies the type of input"),
1170 | value: d("Specifies the value of the input"),
1171 | placeholder: d("Specifies a short hint that describes the expected value of the input"),
1172 | autoFocus: d("Specifies that the input should automatically get focus when the page loads"),
1173 | checked: d("Specifies that the input should be pre-selected"),
1174 | disabled: d("Specifies that the input should be disabled"),
1175 | form: d("Specifies the form the input belongs to"),
1176 | name: d("Specifies the name of the input"),
1177 | list: d(
1178 | "Specifies the id of a datalist element that contains pre-defined options for the input",
1179 | ),
1180 | max: d("Specifies the maximum value for an input"),
1181 | maxLength: d("Specifies the maximum number of characters allowed in an input"),
1182 | min: d("Specifies the minimum value for an input"),
1183 | minLength: d("Specifies the minimum number of characters allowed in an input"),
1184 | multiple: d("Specifies that a user can enter more than one value"),
1185 | pattern: d("Specifies a regular expression that an input's value is checked against"),
1186 | readOnly: d("Specifies that the input is read-only"),
1187 | required: d("Specifies that the input is required"),
1188 | size: d("Specifies the width, in characters, of an input"),
1189 | step: d("Specifies the legal number intervals for an input"),
1190 | },
1191 | });
1192 |
1193 | export const htmlInputTagRenderer = createComponentRenderer(
1194 | "input",
1195 | HtmlInputMd,
1196 | ({ node, extractValue, extractResourceUrl, className }) => {
1197 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1198 | const { autoFocus, checked, disabled, readOnly, required, multiple } = p.asOptionalBoolean(
1199 | "autoFocus",
1200 | "checked",
1201 | "disabled",
1202 | "readOnly",
1203 | "required",
1204 | "multiple",
1205 | );
1206 | const numberProps = p.asOptionalNumber("maxLength", "minLength", "size");
1207 | const props = p.asRest();
1208 | return (
1209 | <input
1210 | className={className}
1211 | autoFocus={autoFocus ?? false}
1212 | checked={checked ?? false}
1213 | disabled={disabled ?? false}
1214 | multiple={multiple ?? false}
1215 | readOnly={readOnly ?? false}
1216 | required={required ?? false}
1217 | {...numberProps}
1218 | {...props}
1219 | />
1220 | );
1221 | },
1222 | );
1223 |
1224 | export const HtmlInsMd = createMetadata({
1225 | status: "deprecated",
1226 | description: "This component renders an HTML `ins` tag.",
1227 | isHtmlTag: true,
1228 | props: {
1229 | cite: d("Specifies the source URL for the inserted text"),
1230 | dateTime: d("Specifies the date and time when the text was inserted"),
1231 | },
1232 | });
1233 |
1234 | export const htmlInsTagRenderer = createComponentRenderer(
1235 | "ins",
1236 | HtmlInsMd,
1237 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1238 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1239 | const props = p.asRest();
1240 | return (
1241 | <Text className={className} {...props} variant="inserted">
1242 | {renderChild(node.children)}
1243 | </Text>
1244 | );
1245 | },
1246 | );
1247 |
1248 | export const HtmlKbdMd = createMetadata({
1249 | status: "deprecated",
1250 | description: "This component renders an HTML `kbd` tag.",
1251 | isHtmlTag: true,
1252 | });
1253 |
1254 | export const htmlKbdTagRenderer = createComponentRenderer(
1255 | "kbd",
1256 | HtmlKbdMd,
1257 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1258 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1259 | const props = p.asRest();
1260 | return (
1261 | <Text className={className} {...props} variant="keyboard">
1262 | {renderChild(node.children)}
1263 | </Text>
1264 | );
1265 | },
1266 | );
1267 |
1268 | export const HtmlLabelMd = createMetadata({
1269 | status: "deprecated",
1270 | description: "This component renders an HTML `label` tag.",
1271 | isHtmlTag: true,
1272 | props: {
1273 | htmlFor: d("Specifies which form element a label is bound to"),
1274 | },
1275 | });
1276 |
1277 | export const htmlLabelTagRenderer = createComponentRenderer(
1278 | "label",
1279 | HtmlLabelMd,
1280 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1281 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1282 | const props = p.asRest();
1283 | return (
1284 | <label className={className} {...props}>
1285 | {renderChild(node.children)}
1286 | </label>
1287 | );
1288 | },
1289 | );
1290 |
1291 | export const HtmlLegendMd = createMetadata({
1292 | status: "deprecated",
1293 | description: "This component renders an HTML `legend` tag.",
1294 | isHtmlTag: true,
1295 | });
1296 |
1297 | export const htmlLegendTagRenderer = createComponentRenderer(
1298 | "legend",
1299 | HtmlLegendMd,
1300 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1301 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1302 | const props = p.asRest();
1303 | return (
1304 | <legend className={className} {...props}>
1305 | {renderChild(node.children)}
1306 | </legend>
1307 | );
1308 | },
1309 | );
1310 |
1311 | export const HtmlLiMd = createMetadata({
1312 | status: "deprecated",
1313 | description: "This component renders an HTML `li` tag.",
1314 | isHtmlTag: true,
1315 | props: {
1316 | value: d("Specifies the value of the list item (if the parent is an ordered list)"),
1317 | },
1318 | defaultThemeVars: {
1319 | "marginLeft-HtmlLi": "$space-6",
1320 | "paddingLeft-HtmlLi": "$space-1",
1321 | }
1322 | });
1323 |
1324 | export const htmlLiTagRenderer = createComponentRenderer(
1325 | "li",
1326 | HtmlLiMd,
1327 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1328 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1329 | const { value } = p.asOptionalNumber("value");
1330 | const props = p.asRest();
1331 | return (
1332 | <li className={className} value={value} {...props}>
1333 | {renderChild(node.children)}
1334 | </li>
1335 | );
1336 | },
1337 | );
1338 |
1339 | export const HtmlMainMd = createMetadata({
1340 | status: "deprecated",
1341 | description: "This component renders an HTML `main` tag.",
1342 | isHtmlTag: true,
1343 | });
1344 |
1345 | export const htmlMainTagRenderer = createComponentRenderer(
1346 | "main",
1347 | HtmlMainMd,
1348 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1349 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1350 | const props = p.asRest();
1351 | return (
1352 | <main className={className} {...props}>
1353 | {renderChild(node.children)}
1354 | </main>
1355 | );
1356 | },
1357 | );
1358 |
1359 | export const HtmlMapMd = createMetadata({
1360 | status: "deprecated",
1361 | description: "This component renders an HTML `map` tag.",
1362 | isHtmlTag: true,
1363 | props: {
1364 | name: d("Specifies the name of the map"),
1365 | },
1366 | });
1367 |
1368 | export const htmlMapTagRenderer = createComponentRenderer(
1369 | "map",
1370 | HtmlMapMd,
1371 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1372 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1373 | const props = p.asRest();
1374 | return (
1375 | <map className={className} {...props}>
1376 | {renderChild(node.children)}
1377 | </map>
1378 | );
1379 | },
1380 | );
1381 |
1382 | export const HtmlMarkMd = createMetadata({
1383 | status: "deprecated",
1384 | description: "This component renders an HTML `mark` tag.",
1385 | isHtmlTag: true,
1386 | });
1387 |
1388 | export const htmlMarkTagRenderer = createComponentRenderer(
1389 | "mark",
1390 | HtmlMarkMd,
1391 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1392 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1393 | const props = p.asRest();
1394 | return (
1395 | <Text className={className} {...props} variant="marked">
1396 | {renderChild(node.children)}
1397 | </Text>
1398 | );
1399 | },
1400 | );
1401 |
1402 | export const HtmlMenuMd = createMetadata({
1403 | status: "deprecated",
1404 | description: "This component renders an HTML `menu` tag.",
1405 | isHtmlTag: true,
1406 | props: {
1407 | type: d("Specifies the type of the menu"),
1408 | },
1409 | });
1410 |
1411 | export const htmlMenuTagRenderer = createComponentRenderer(
1412 | "menu",
1413 | HtmlMenuMd,
1414 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1415 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1416 | const props = p.asRest();
1417 | return (
1418 | <menu className={className} {...props}>
1419 | {renderChild(node.children)}
1420 | </menu>
1421 | );
1422 | },
1423 | );
1424 |
1425 | export const HtmlMeterMd = createMetadata({
1426 | status: "deprecated",
1427 | description: "This component renders an HTML `meter` tag.",
1428 | isHtmlTag: true,
1429 | props: {
1430 | min: d("Specifies the minimum value"),
1431 | max: d("Specifies the maximum value"),
1432 | low: d("Specifies the lower bound of the high value"),
1433 | high: d("Specifies the upper bound of the low value"),
1434 | optimum: d("Specifies the optimal value"),
1435 | value: d("Specifies the current value"),
1436 | },
1437 | });
1438 |
1439 | export const htmlMeterTagRenderer = createComponentRenderer(
1440 | "meter",
1441 | HtmlMeterMd,
1442 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1443 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1444 | const numberProps = p.asOptionalNumber("value", "min", "max", "low", "high", "optimum");
1445 | const props = p.asRest();
1446 | return (
1447 | <meter className={className} {...numberProps} {...props}>
1448 | {renderChild(node.children)}
1449 | </meter>
1450 | );
1451 | },
1452 | );
1453 |
1454 | export const HtmlNavMd = createMetadata({
1455 | status: "deprecated",
1456 | description: "This component renders an HTML `nav` tag.",
1457 | isHtmlTag: true,
1458 | });
1459 |
1460 | export const htmlNavTagRenderer = createComponentRenderer(
1461 | "nav",
1462 | HtmlNavMd,
1463 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1464 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1465 | const props = p.asRest();
1466 | return (
1467 | <nav className={className} {...props}>
1468 | {renderChild(node.children)}
1469 | </nav>
1470 | );
1471 | },
1472 | );
1473 |
1474 | export const HtmlObjectMd = createMetadata({
1475 | status: "deprecated",
1476 | description: "This component renders an HTML `object` tag.",
1477 | isHtmlTag: true,
1478 | props: {
1479 | data: d("Specifies the URL of the resource"),
1480 | type: d("Specifies the MIME type of the resource"),
1481 | name: d("Specifies the name of the object"),
1482 | form: d("Specifies the form the object belongs to"),
1483 | width: d("Specifies the width of the object"),
1484 | height: d("Specifies the height of the object"),
1485 | },
1486 | });
1487 |
1488 | export const htmlObjectTagRenderer = createComponentRenderer(
1489 | "object",
1490 | HtmlObjectMd,
1491 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1492 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1493 | const props = p.asRest();
1494 | return (
1495 | <object className={className} {...props}>
1496 | {renderChild(node.children)}
1497 | </object>
1498 | );
1499 | },
1500 | );
1501 |
1502 | export const HtmlOlMd = createMetadata({
1503 | status: "deprecated",
1504 | description: "This component renders an HTML `ol` tag.",
1505 | isHtmlTag: true,
1506 | themeVars: parseScssVar(styles.themeVarsList), // Use only themeVarsList
1507 | defaultThemeVars: {
1508 | "marginTop-HtmlOl": "$space-5",
1509 | "marginBottom-HtmlOl": "$space-5",
1510 | },
1511 | });
1512 |
1513 | export const htmlOlTagRenderer = createComponentRenderer(
1514 | "ol",
1515 | HtmlOlMd, // Use HtmlOlMd instead of HtmlListMd
1516 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1517 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1518 | const props = p.asRest();
1519 | return (
1520 | <ol className={classnames(styles.htmlOl, className)} {...props}>
1521 | {renderChild(node.children)}
1522 | </ol>
1523 | );
1524 | },
1525 | );
1526 |
1527 | export const HtmlOptgroupMd = createMetadata({
1528 | status: "deprecated",
1529 | description: "This component renders an HTML `optgroup` tag.",
1530 | isHtmlTag: true,
1531 | props: {
1532 | label: d("Specifies the label for the option group"),
1533 | disabled: d("Specifies that the option group is disabled"),
1534 | },
1535 | });
1536 |
1537 | export const htmlOptgroupTagRenderer = createComponentRenderer(
1538 | "optgroup",
1539 | HtmlOptgroupMd,
1540 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1541 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1542 | const { disabled } = p.asOptionalBoolean("disabled");
1543 | const props = p.asRest();
1544 | return (
1545 | <optgroup className={className} disabled={disabled ?? false} {...props}>
1546 | {renderChild(node.children)}
1547 | </optgroup>
1548 | );
1549 | },
1550 | );
1551 |
1552 | export const HtmlOptionMd = createMetadata({
1553 | status: "deprecated",
1554 | description: "This component renders an HTML `option` tag.",
1555 | isHtmlTag: true,
1556 | props: {
1557 | disabled: d("Specifies that the option should be disabled"),
1558 | label: d("Specifies the label of the option"),
1559 | selected: d("Specifies that the option should be pre-selected"),
1560 | value: d("Specifies the value of the option"),
1561 | },
1562 | });
1563 |
1564 | export const htmlOptionTagRenderer = createComponentRenderer(
1565 | "option",
1566 | HtmlOptionMd,
1567 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1568 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1569 | const { disabled, selected } = p.asOptionalBoolean("disabled", "selected");
1570 | const props = p.asRest();
1571 | return (
1572 | <option
1573 | className={className}
1574 | disabled={disabled ?? false}
1575 | selected={selected ?? false}
1576 | {...props}
1577 | >
1578 | {renderChild(node.children)}
1579 | </option>
1580 | );
1581 | },
1582 | );
1583 |
1584 | export const HtmlOutputMd = createMetadata({
1585 | status: "deprecated",
1586 | description: "This component renders an HTML `output` tag.",
1587 | isHtmlTag: true,
1588 | props: {
1589 | form: d("Specifies the form element that the output is associated with"),
1590 | htmlFor: d("Specifies the IDs of the elements that this output is related to"),
1591 | name: d("Specifies the name of the output"),
1592 | },
1593 | });
1594 |
1595 | export const htmlOutputTagRenderer = createComponentRenderer(
1596 | "output",
1597 | HtmlOutputMd,
1598 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1599 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1600 | const props = p.asRest();
1601 | return (
1602 | <output className={className} {...props}>
1603 | {renderChild(node.children)}
1604 | </output>
1605 | );
1606 | },
1607 | );
1608 |
1609 | export const HtmlPMd = createMetadata({
1610 | status: "deprecated",
1611 | description: "This component renders an HTML `p` tag.",
1612 | isHtmlTag: true,
1613 | });
1614 |
1615 | export const htmlPTagRenderer = createComponentRenderer(
1616 | "p",
1617 | HtmlPMd,
1618 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1619 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1620 | const props = p.asRest();
1621 | return (
1622 | <Text className={className} {...props} variant="paragraph">
1623 | {renderChild(node.children)}
1624 | </Text>
1625 | );
1626 | },
1627 | );
1628 |
1629 | export const HtmlParamMd = createMetadata({
1630 | status: "deprecated",
1631 | description: "This component renders an HTML `param` tag.",
1632 | isHtmlTag: true,
1633 | props: {
1634 | name: d("Specifies the name of the parameter"),
1635 | value: d("Specifies the value of the parameter"),
1636 | },
1637 | });
1638 |
1639 | export const htmlParamTagRenderer = createComponentRenderer(
1640 | "param",
1641 | HtmlParamMd,
1642 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1643 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1644 | const props = p.asRest();
1645 | return (
1646 | <param className={className} {...props}>
1647 | {renderChild(node.children)}
1648 | </param>
1649 | );
1650 | },
1651 | );
1652 |
1653 | export const HtmlPictureMd = createMetadata({
1654 | status: "deprecated",
1655 | description: "This component renders an HTML `picture` tag.",
1656 | isHtmlTag: true,
1657 | });
1658 |
1659 | export const htmlPictureTagRenderer = createComponentRenderer(
1660 | "picture",
1661 | HtmlPictureMd,
1662 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1663 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1664 | const props = p.asRest();
1665 | return (
1666 | <picture className={className} {...props}>
1667 | {renderChild(node.children)}
1668 | </picture>
1669 | );
1670 | },
1671 | );
1672 |
1673 | export const HtmlPreMd = createMetadata({
1674 | status: "deprecated",
1675 | description: "This component renders an HTML `pre` tag.",
1676 | isHtmlTag: true,
1677 | });
1678 |
1679 | export const htmlPreTagRenderer = createComponentRenderer(
1680 | "pre",
1681 | HtmlPreMd,
1682 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1683 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1684 | const props = p.asRest();
1685 | return (
1686 | <Text className={className} {...props} variant="codefence">
1687 | {renderChild(node.children)}
1688 | </Text>
1689 | );
1690 | },
1691 | );
1692 |
1693 | export const HtmlProgressMd = createMetadata({
1694 | status: "deprecated",
1695 | description: "This component renders an HTML `progress` tag.",
1696 | isHtmlTag: true,
1697 | props: {
1698 | max: d("Specifies the maximum value of the progress element"),
1699 | value: d("Specifies the current value of the progress element"),
1700 | },
1701 | });
1702 |
1703 | export const htmlProgressTagRenderer = createComponentRenderer(
1704 | "progress",
1705 | HtmlProgressMd,
1706 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1707 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1708 | const numberProps = p.asOptionalNumber("max", "value");
1709 | const props = p.asRest();
1710 | return (
1711 | <progress className={className} {...numberProps} {...props}>
1712 | {renderChild(node.children)}
1713 | </progress>
1714 | );
1715 | },
1716 | );
1717 |
1718 | export const HtmlQMd = createMetadata({
1719 | status: "deprecated",
1720 | description: "This component renders an HTML `q` tag.",
1721 | isHtmlTag: true,
1722 | props: {
1723 | cite: d("Specifies the source URL of the quotation"),
1724 | },
1725 | });
1726 |
1727 | export const htmlQTagRenderer = createComponentRenderer(
1728 | "q",
1729 | HtmlQMd,
1730 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1731 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1732 | const props = p.asRest();
1733 | return (
1734 | <q className={className} {...props}>
1735 | {renderChild(node.children)}
1736 | </q>
1737 | );
1738 | },
1739 | );
1740 |
1741 | export const HtmlRpMd = createMetadata({
1742 | status: "deprecated",
1743 | description: "This component renders an HTML `rp` tag.",
1744 | isHtmlTag: true,
1745 | });
1746 |
1747 | export const htmlRpTagRenderer = createComponentRenderer(
1748 | "rp",
1749 | HtmlRpMd,
1750 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1751 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1752 | const props = p.asRest();
1753 | return (
1754 | <rp className={className} {...props}>
1755 | {renderChild(node.children)}
1756 | </rp>
1757 | );
1758 | },
1759 | );
1760 |
1761 | export const HtmlRtMd = createMetadata({
1762 | status: "deprecated",
1763 | description: "This component renders an HTML `rt` tag.",
1764 | isHtmlTag: true,
1765 | });
1766 |
1767 | export const htmlRtTagRenderer = createComponentRenderer(
1768 | "rt",
1769 | HtmlRtMd,
1770 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1771 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1772 | const props = p.asRest();
1773 | return (
1774 | <rt className={className} {...props}>
1775 | {renderChild(node.children)}
1776 | </rt>
1777 | );
1778 | },
1779 | );
1780 |
1781 | export const HtmlRubyMd = createMetadata({
1782 | status: "deprecated",
1783 | description: "This component renders an HTML `ruby` tag.",
1784 | isHtmlTag: true,
1785 | });
1786 |
1787 | export const htmlRubyTagRenderer = createComponentRenderer(
1788 | "ruby",
1789 | HtmlRubyMd,
1790 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1791 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1792 | const props = p.asRest();
1793 | return (
1794 | <ruby className={className} {...props}>
1795 | {renderChild(node.children)}
1796 | </ruby>
1797 | );
1798 | },
1799 | );
1800 |
1801 | export const HtmlSMd = createMetadata({
1802 | status: "deprecated",
1803 | description: "This component renders an HTML `s` tag.",
1804 | isHtmlTag: true,
1805 | });
1806 |
1807 | export const htmlSTagRenderer = createComponentRenderer(
1808 | "s",
1809 | HtmlSMd,
1810 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1811 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1812 | const props = p.asRest();
1813 | return (
1814 | <s className={className} {...props}>
1815 | {renderChild(node.children)}
1816 | </s>
1817 | );
1818 | },
1819 | );
1820 |
1821 | export const HtmlSampMd = createMetadata({
1822 | status: "deprecated",
1823 | description: "This component renders an HTML `samp` tag.",
1824 | isHtmlTag: true,
1825 | });
1826 |
1827 | export const htmlSampTagRenderer = createComponentRenderer(
1828 | "samp",
1829 | HtmlSampMd,
1830 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1831 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1832 | const props = p.asRest();
1833 | return (
1834 | <Text className={className} {...props} variant="sample">
1835 | {renderChild(node.children)}
1836 | </Text>
1837 | );
1838 | },
1839 | );
1840 |
1841 | export const HtmlSectionMd = createMetadata({
1842 | status: "deprecated",
1843 | description: "This component renders an HTML `section` tag.",
1844 | isHtmlTag: true,
1845 | });
1846 |
1847 | export const htmlSectionTagRenderer = createComponentRenderer(
1848 | "section",
1849 | HtmlSectionMd,
1850 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1851 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1852 | const props = p.asRest();
1853 | return (
1854 | <section className={className} {...props}>
1855 | {renderChild(node.children)}
1856 | </section>
1857 | );
1858 | },
1859 | );
1860 |
1861 | export const HtmlSelectMd = createMetadata({
1862 | status: "deprecated",
1863 | description: "This component renders an HTML `select` tag.",
1864 | isHtmlTag: true,
1865 | props: {
1866 | autoFocus: d("Specifies that the select should automatically get focus when the page loads"),
1867 | disabled: d("Specifies that the select should be disabled"),
1868 | form: d("Specifies the form the select belongs to"),
1869 | multiple: d("Specifies that multiple options can be selected at once"),
1870 | name: d("Specifies the name of the select"),
1871 | required: d("Specifies that the select is required"),
1872 | size: d("Specifies the number of visible options in the select"),
1873 | },
1874 | });
1875 |
1876 | export const htmlSelectTagRenderer = createComponentRenderer(
1877 | "select",
1878 | HtmlSelectMd,
1879 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1880 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1881 | const { autoFocus, disabled, multiple, required } = p.asOptionalBoolean(
1882 | "autoFocus",
1883 | "disabled",
1884 | "multiple",
1885 | "required",
1886 | );
1887 | const { size } = p.asOptionalNumber("size");
1888 | const props = p.asRest();
1889 | return (
1890 | <select
1891 | className={className}
1892 | autoFocus={autoFocus ?? false}
1893 | disabled={disabled ?? false}
1894 | multiple={multiple ?? false}
1895 | required={required ?? false}
1896 | size={size}
1897 | {...props}
1898 | >
1899 | {renderChild(node.children)}
1900 | </select>
1901 | );
1902 | },
1903 | );
1904 |
1905 | export const HtmlSmallMd = createMetadata({
1906 | status: "deprecated",
1907 | description: "This component renders an HTML `small` tag.",
1908 | isHtmlTag: true,
1909 | });
1910 |
1911 | export const htmlSmallTagRenderer = createComponentRenderer(
1912 | "small",
1913 | HtmlSmallMd,
1914 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1915 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1916 | const props = p.asRest();
1917 | return (
1918 | <Text className={className} {...props} variant="small">
1919 | {renderChild(node.children)}
1920 | </Text>
1921 | );
1922 | },
1923 | );
1924 |
1925 | export const HtmlSourceMd = createMetadata({
1926 | status: "deprecated",
1927 | description: "This component renders an HTML `source` tag.",
1928 | isHtmlTag: true,
1929 | props: {
1930 | src: d("Specifies the URL of the media file"),
1931 | type: d("Specifies the type of the media file"),
1932 | media: d("Specifies a media query for the media file"),
1933 | srcSet: d("Specifies the source set for responsive images"),
1934 | sizes: d("Specifies the sizes attribute for responsive images"),
1935 | },
1936 | });
1937 |
1938 | export const htmlSourceTagRenderer = createComponentRenderer(
1939 | "source",
1940 | HtmlSourceMd,
1941 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1942 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1943 | const { src } = p.asUrlResource("src");
1944 | const props = p.asRest();
1945 | return (
1946 | <source className={className} src={src} {...props}>
1947 | {renderChild(node.children)}
1948 | </source>
1949 | );
1950 | },
1951 | );
1952 |
1953 | export const HtmlSpanMd = createMetadata({
1954 | status: "deprecated",
1955 | description: "This component renders an HTML `span` tag.",
1956 | isHtmlTag: true,
1957 | });
1958 |
1959 | export const htmlSpanTagRenderer = createComponentRenderer(
1960 | "span",
1961 | HtmlSpanMd,
1962 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1963 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1964 | const props = p.asRest();
1965 | return (
1966 | <span className={className} {...props}>
1967 | {renderChild(node.children)}
1968 | </span>
1969 | );
1970 | },
1971 | );
1972 |
1973 | export const HtmlStrongMd = createMetadata({
1974 | status: "deprecated",
1975 | description: "This component renders an HTML `strong` tag.",
1976 | isHtmlTag: true,
1977 | });
1978 |
1979 | export const htmlStrongTagRenderer = createComponentRenderer(
1980 | "strong",
1981 | HtmlStrongMd,
1982 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
1983 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
1984 | const props = p.asRest();
1985 | return (
1986 | <Text className={className} {...props} variant="strong">
1987 | {renderChild(node.children)}
1988 | </Text>
1989 | );
1990 | },
1991 | );
1992 |
1993 | export const HtmlSubMd = createMetadata({
1994 | status: "deprecated",
1995 | description: "This component renders an HTML `sub` tag.",
1996 | isHtmlTag: true,
1997 | });
1998 |
1999 | export const htmlSubTagRenderer = createComponentRenderer(
2000 | "sub",
2001 | HtmlSubMd,
2002 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2003 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2004 | const props = p.asRest();
2005 | return (
2006 | <Text className={className} {...props} variant="sub">
2007 | {renderChild(node.children)}
2008 | </Text>
2009 | );
2010 | },
2011 | );
2012 |
2013 | export const HtmlSummaryMd = createMetadata({
2014 | status: "deprecated",
2015 | description: "This component renders an HTML `summary` tag.",
2016 | isHtmlTag: true,
2017 | });
2018 |
2019 | export const htmlSummaryTagRenderer = createComponentRenderer(
2020 | "summary",
2021 | HtmlSummaryMd,
2022 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2023 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2024 | const props = p.asRest();
2025 | return (
2026 | <summary className={className} {...props}>
2027 | {renderChild(node.children)}
2028 | </summary>
2029 | );
2030 | },
2031 | );
2032 |
2033 | export const HtmlSupMd = createMetadata({
2034 | status: "deprecated",
2035 | description: "This component renders an HTML `sup` tag.",
2036 | isHtmlTag: true,
2037 | });
2038 |
2039 | export const htmlSupTagRenderer = createComponentRenderer(
2040 | "sup",
2041 | HtmlSupMd,
2042 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2043 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2044 | const props = p.asRest();
2045 | return (
2046 | <Text className={className} {...props} variant="sup">
2047 | {renderChild(node.children)}
2048 | </Text>
2049 | );
2050 | },
2051 | );
2052 |
2053 | export const HtmlTableMd = createMetadata({
2054 | status: "deprecated",
2055 | description: "This component renders an HTML `table` tag.",
2056 | isHtmlTag: true,
2057 | props: {
2058 | border: d("Specifies the width of the border around the table"),
2059 | cellPadding: d("Specifies the space between the cell content and its borders"),
2060 | cellSpacing: d("Specifies the space between cells"),
2061 | summary: d("Provides a summary of the table's purpose and structure"),
2062 | width: d("Specifies the width of the table"),
2063 | align: d("Specifies the alignment of the table"),
2064 | frame: d("Specifies which parts of the table frame to render"),
2065 | rules: d("Specifies which rules to draw between cells"),
2066 | },
2067 | themeVars: parseScssVar(styles.themeVarsTable),
2068 | defaultThemeVars: {
2069 | "backgroundColor-HtmlTable": "$backgroundColor",
2070 | "border-HtmlTable": "1px solid $borderColor",
2071 | "marginBottom-HtmlTable": "$space-4",
2072 | "marginTop-HtmlTable": "$space-4",
2073 | },
2074 | });
2075 |
2076 | export const htmlTableTagRenderer = createComponentRenderer(
2077 | "table",
2078 | HtmlTableMd,
2079 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2080 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2081 | const props = p.asRest();
2082 | return (
2083 | <table className={classnames(styles.htmlTable, className)} {...props}>
2084 | {renderChild(node.children)}
2085 | </table>
2086 | );
2087 | },
2088 | );
2089 |
2090 | export const HtmlTbodyMd = createMetadata({
2091 | status: "deprecated",
2092 | description: "This component renders an HTML `tbody` tag.",
2093 | isHtmlTag: true,
2094 | themeVars: parseScssVar(styles.themeVarsTbody),
2095 | });
2096 |
2097 | export const htmlTbodyTagRenderer = createComponentRenderer(
2098 | "tbody",
2099 | HtmlTbodyMd,
2100 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2101 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2102 | const props = p.asRest();
2103 | return (
2104 | <tbody className={classnames(styles.htmlTbody, className)} {...props}>
2105 | {renderChild(node.children)}
2106 | </tbody>
2107 | );
2108 | },
2109 | );
2110 |
2111 | export const HtmlTdMd = createMetadata({
2112 | status: "deprecated",
2113 | description: "This component renders an HTML `td` tag.",
2114 | isHtmlTag: true,
2115 | props: {
2116 | align: d("Specifies the horizontal alignment of the content in the cell"),
2117 | colSpan: d("Specifies the number of columns a cell should span"),
2118 | headers: d("Specifies a list of header cells the current cell is related to"),
2119 | rowSpan: d("Specifies the number of rows a cell should span"),
2120 | valign: d("Specifies the vertical alignment of the content in the cell"),
2121 | scope: d("Specifies whether a cell is a header for a column, row, or group of columns or rows"),
2122 | abbr: d("Specifies an abbreviated version of the content in the cell"),
2123 | height: d("Specifies the height of the cell"),
2124 | width: d("Specifies the width of the cell"),
2125 | },
2126 | themeVars: parseScssVar(styles.themeVarsTd),
2127 | defaultThemeVars: {
2128 | "padding-HtmlTd": "$space-2",
2129 | "borderBottom-HtmlTd": "1px solid $borderColor",
2130 | },
2131 | });
2132 |
2133 | export const htmlTdTagRenderer = createComponentRenderer(
2134 | "td",
2135 | HtmlTdMd,
2136 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2137 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2138 | const props = p.asRest();
2139 | return (
2140 | <td className={classnames(styles.htmlTd, className)} {...props}>
2141 | {renderChild(node.children)}
2142 | </td>
2143 | );
2144 | },
2145 | );
2146 |
2147 | export const HtmlTemplateMd = createMetadata({
2148 | status: "deprecated",
2149 | description: "This component renders an HTML `template` tag.",
2150 | isHtmlTag: true,
2151 | });
2152 |
2153 | export const htmlTemplateTagRenderer = createComponentRenderer(
2154 | "template",
2155 | HtmlTemplateMd,
2156 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2157 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2158 | const props = p.asRest();
2159 | return (
2160 | <template className={className} {...props}>
2161 | {renderChild(node.children)}
2162 | </template>
2163 | );
2164 | },
2165 | );
2166 |
2167 | export const HtmlTextareaMd = createMetadata({
2168 | status: "deprecated",
2169 | description: "This component renders an HTML `textarea` tag.",
2170 | isHtmlTag: true,
2171 | props: {
2172 | autoFocus: d("Specifies that the textarea should automatically get focus when the page loads"),
2173 | cols: d("Specifies the visible width of the text area in average character widths"),
2174 | dirName: d("Specifies the text directionality"),
2175 | disabled: d("Specifies that the textarea should be disabled"),
2176 | form: d("Specifies the form the textarea belongs to"),
2177 | maxLength: d("Specifies the maximum number of characters allowed in the textarea"),
2178 | minLength: d("Specifies the minimum number of characters allowed in the textarea"),
2179 | name: d("Specifies the name of the textarea"),
2180 | placeholder: d("Specifies a short hint that describes the expected value"),
2181 | readOnly: d("Specifies that the textarea is read-only"),
2182 | required: d("Specifies that the textarea is required"),
2183 | rows: d("Specifies the visible number of lines in the textarea"),
2184 | value: d("Specifies the current value of the textarea"),
2185 | wrap: d("Specifies how the text in a textarea is to be wrapped when submitted"),
2186 | },
2187 | });
2188 |
2189 | export const htmlTextareaTagRenderer = createComponentRenderer(
2190 | "textarea",
2191 | HtmlTextareaMd,
2192 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2193 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2194 | const { autoFocus, disabled, readOnly, required } = p.asOptionalBoolean(
2195 | "autoFocus",
2196 | "disabled",
2197 | "readOnly",
2198 | "required",
2199 | );
2200 | const numberProps = p.asOptionalNumber("cols", "rows", "maxLength", "minLength");
2201 | const props = p.asRest();
2202 | return (
2203 | <textarea
2204 | className={className}
2205 | autoFocus={autoFocus ?? false}
2206 | disabled={disabled ?? false}
2207 | readOnly={readOnly ?? false}
2208 | required={required ?? false}
2209 | {...numberProps}
2210 | {...props}
2211 | >
2212 | {renderChild(node.children)}
2213 | </textarea>
2214 | );
2215 | },
2216 | );
2217 |
2218 | export const HtmlTfootMd = createMetadata({
2219 | status: "deprecated",
2220 | description: "This component renders an HTML `tfoot` tag.",
2221 | isHtmlTag: true,
2222 | themeVars: parseScssVar(styles.themeVarsTfoot),
2223 | });
2224 |
2225 | export const htmlTfootTagRenderer = createComponentRenderer(
2226 | "tfoot",
2227 | HtmlTfootMd,
2228 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2229 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2230 | const props = p.asRest();
2231 | return (
2232 | <tfoot className={classnames(styles.htmlTfoot, className)} {...props}>
2233 | {renderChild(node.children)}
2234 | </tfoot>
2235 | );
2236 | },
2237 | );
2238 |
2239 | export const HtmlThMd = createMetadata({
2240 | status: "deprecated",
2241 | description: "This component renders an HTML `th` tag.",
2242 | isHtmlTag: true,
2243 | props: {
2244 | abbr: d("Specifies an abbreviated version of the content in the header cell"),
2245 | align: d("Specifies the horizontal alignment of the content in the header cell"),
2246 | colSpan: d("Specifies the number of columns a header cell should span"),
2247 | headers: d("Specifies a list of header cells the current header cell is related to"),
2248 | rowSpan: d("Specifies the number of rows a header cell should span"),
2249 | scope: d(
2250 | "Specifies whether a header cell is a header for a column, row, or group of columns or rows",
2251 | ),
2252 | },
2253 | themeVars: parseScssVar(styles.themeVarsTh),
2254 | defaultThemeVars: {
2255 | "padding-HtmlTh": "$space-2",
2256 | "fontSize-HtmlTh": "$fontSize-tiny",
2257 | "fontWeight-HtmlTh": "$fontWeight-bold",
2258 | //"backgroundColor-HtmlTh--hover": "$color-surface-200",
2259 | },
2260 | });
2261 |
2262 | export const htmlThTagRenderer = createComponentRenderer(
2263 | "th",
2264 | HtmlThMd,
2265 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2266 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2267 | const props = p.asRest();
2268 | return (
2269 | <th className={classnames(styles.htmlTh, className)} {...props}>
2270 | {renderChild(node.children)}
2271 | </th>
2272 | );
2273 | },
2274 | );
2275 |
2276 | export const HtmlTheadMd = createMetadata({
2277 | status: "deprecated",
2278 | description: "This component renders an HTML `thead` tag.",
2279 | isHtmlTag: true,
2280 | themeVars: parseScssVar(styles.themeVarsThead),
2281 | defaultThemeVars: {
2282 | "textTransform-HtmlThead": "uppercase",
2283 | "backgroundColor-HtmlThead": "$color-surface-100",
2284 | "textColor-HtmlThead": "$color-surface-500",
2285 | },
2286 | });
2287 |
2288 | export const htmlTheadTagRenderer = createComponentRenderer(
2289 | "thead",
2290 | HtmlTheadMd,
2291 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2292 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2293 | const props = p.asRest();
2294 | return (
2295 | <thead className={classnames(styles.htmlThead, className)} {...props}>
2296 | {renderChild(node.children)}
2297 | </thead>
2298 | );
2299 | },
2300 | );
2301 |
2302 | export const HtmlTimeMd = createMetadata({
2303 | status: "deprecated",
2304 | description: "This component renders an HTML `time` tag.",
2305 | isHtmlTag: true,
2306 | props: {
2307 | dateTime: d("Specifies the date and time in a machine-readable format"),
2308 | },
2309 | });
2310 |
2311 | export const htmlTimeTagRenderer = createComponentRenderer(
2312 | "time",
2313 | HtmlTimeMd,
2314 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2315 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2316 | const props = p.asRest();
2317 | return (
2318 | <time className={className} {...props}>
2319 | {renderChild(node.children)}
2320 | </time>
2321 | );
2322 | },
2323 | );
2324 |
2325 | export const HtmlTrMd = createMetadata({
2326 | status: "deprecated",
2327 | description: "This component renders an HTML `tr` tag.",
2328 | isHtmlTag: true,
2329 | themeVars: parseScssVar(styles.themeVarsTr),
2330 | defaultThemeVars: {
2331 | "fontSize-HtmlTr": "$fontSize-sm",
2332 | "backgroundColor-row-HtmlTr": "inherit",
2333 | //"backgroundColor-HtmlTr--hover": "$color-primary-50",
2334 | },
2335 | });
2336 |
2337 | export const htmlTrTagRenderer = createComponentRenderer(
2338 | "tr",
2339 | HtmlTrMd,
2340 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2341 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2342 | const props = p.asRest();
2343 | return (
2344 | <tr className={classnames(styles.htmlTr, className)} {...props}>
2345 | {renderChild(node.children)}
2346 | </tr>
2347 | );
2348 | },
2349 | );
2350 |
2351 | export const HtmlTrackMd = createMetadata({
2352 | status: "deprecated",
2353 | description: "This component renders an HTML `track` tag.",
2354 | isHtmlTag: true,
2355 | props: {
2356 | default: d("Specifies that the track is to be enabled if no other track is more suitable"),
2357 | kind: d("Specifies the kind of text track"),
2358 | label: d("Specifies the title of the text track"),
2359 | src: d("Specifies the URL of the track file"),
2360 | srcLang: d("Specifies the language of the track text data"),
2361 | },
2362 | });
2363 |
2364 | export const htmlTrackTagRenderer = createComponentRenderer(
2365 | "track",
2366 | HtmlTrackMd,
2367 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2368 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2369 | const { src } = p.asUrlResource("src");
2370 | const { default: defaultProp } = p.asOptionalBoolean("default");
2371 | const props = p.asRest();
2372 | return (
2373 | <track className={className} default={defaultProp ?? false} src={src} {...props}>
2374 | {renderChild(node.children)}
2375 | </track>
2376 | );
2377 | },
2378 | );
2379 |
2380 | export const HtmlUMd = createMetadata({
2381 | status: "deprecated",
2382 | description: "This component renders an HTML `u` tag.",
2383 | isHtmlTag: true,
2384 | });
2385 |
2386 | export const htmlUTagRenderer = createComponentRenderer(
2387 | "u",
2388 | HtmlUMd,
2389 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2390 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2391 | const props = p.asRest();
2392 | return (
2393 | <u className={className} {...props}>
2394 | {renderChild(node.children)}
2395 | </u>
2396 | );
2397 | },
2398 | );
2399 |
2400 | export const HtmlUlMd = createMetadata({
2401 | status: "deprecated",
2402 | description: "This component renders an HTML `ul` tag.",
2403 | isHtmlTag: true,
2404 | themeVars: parseScssVar(styles.themeVarsList), // Use only themeVarsList
2405 | defaultThemeVars: {
2406 | "marginTop-HtmlUl": "$space-5",
2407 | "marginBottom-HtmlUl": "$space-5",
2408 | },
2409 | });
2410 |
2411 | export const htmlUlTagRenderer = createComponentRenderer(
2412 | "ul",
2413 | HtmlUlMd, // Use HtmlOlMd instead of HtmlListMd
2414 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2415 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2416 | const props = p.asRest();
2417 | return (
2418 | <ul className={classnames(styles.htmlUl, className)} {...props}>
2419 | {renderChild(node.children)}
2420 | </ul>
2421 | );
2422 | },
2423 | );
2424 |
2425 | export const HtmlVarMd = createMetadata({
2426 | status: "deprecated",
2427 | description: "This component renders an HTML `var` tag.",
2428 | isHtmlTag: true,
2429 | });
2430 |
2431 | export const htmlVarTagRenderer = createComponentRenderer(
2432 | "var",
2433 | HtmlCodeMd,
2434 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2435 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2436 | const props = p.asRest();
2437 | return (
2438 | <Text className={className} {...props} variant="var">
2439 | {renderChild(node.children)}
2440 | </Text>
2441 | );
2442 | },
2443 | );
2444 |
2445 | export const HtmlVideoMd = createMetadata({
2446 | status: "deprecated",
2447 | description: "This component renders an HTML `video` tag.",
2448 | isHtmlTag: true,
2449 | props: {
2450 | autoPlay: d("Specifies that the video will start playing as soon as it is ready"),
2451 | controls: d("Specifies that video controls should be displayed"),
2452 | height: d("Specifies the height of the video player"),
2453 | loop: d("Specifies that the video will start over again when finished"),
2454 | muted: d("Specifies that the video output should be muted"),
2455 | poster: d("Specifies an image to be shown while the video is downloading"),
2456 | preload: d(
2457 | "Specifies if and how the author thinks the video should be loaded when the page loads",
2458 | ),
2459 | src: d("Specifies the URL of the video file"),
2460 | width: d("Specifies the width of the video player"),
2461 | },
2462 | themeVars: parseScssVar(styles.themeVarsVideo),
2463 | defaultThemeVars: {
2464 | "marginTop-HtmlVideo": "1rem",
2465 | "marginBottom-HtmlVideo": "1rem",
2466 | },
2467 | });
2468 |
2469 | export const htmlVideoTagRenderer = createComponentRenderer(
2470 | "video",
2471 | HtmlVideoMd,
2472 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2473 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2474 | const { src } = p.asUrlResource("src");
2475 | const { autoPlay, controls, loop, muted } = p.asOptionalBoolean(
2476 | "autoPlay",
2477 | "controls",
2478 | "loop",
2479 | "muted",
2480 | );
2481 | const props = p.asRest();
2482 | return (
2483 | <video
2484 | className={className}
2485 | src={src}
2486 | autoPlay={autoPlay ?? false}
2487 | controls={controls ?? false}
2488 | loop={loop ?? false}
2489 | muted={muted ?? false}
2490 | {...props}
2491 | >
2492 | {renderChild(node.children)}
2493 | </video>
2494 | );
2495 | },
2496 | );
2497 |
2498 | export const HtmlWbrMd = createMetadata({
2499 | status: "deprecated",
2500 | description: "This component renders an HTML `wbr` tag.",
2501 | isHtmlTag: true,
2502 | });
2503 |
2504 | export const htmlWbrTagRenderer = createComponentRenderer(
2505 | "wbr",
2506 | HtmlWbrMd,
2507 | ({ node, renderChild, extractValue, extractResourceUrl, className }) => {
2508 | const p = new PropsTrasform(extractValue, extractResourceUrl, node.props);
2509 | const props = p.asRest();
2510 | return (
2511 | <wbr className={className} {...props}>
2512 | {renderChild(node.children)}
2513 | </wbr>
2514 | );
2515 | },
2516 | );
2517 |
```