feat(clayui.com): Move API tables to new files and update document ta…

…bs, rename files to use singular naming instead of plural, change mainTabURL of pagination-bar to a proper one

clayui.com/content/docs/components/api-alert.mdx

@@ -0,0 +1,23 @@
+---
+title: 'Alert'
+description: 'Alerts are used to capture the attention of the user in an intrusive way.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/alerts/'
+mainTabURL: 'docs/components/alert.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Alert](#alert)
+-   [Alert.ToastContainer](#alert.toastcontainer)
+
+</div>
+</div>
+
+## Alert
+
+<div>[APITable "clay-alert/src/index.tsx"]</div>
+
+## Alert.ToastContainer
+
+<div>[APITable "clay-alert/src/ToastContainer.tsx"]</div>

clayui.com/content/docs/components/api-autocomplete.mdx

@@ -0,0 +1,40 @@
+---
+title: 'Autocomplete'
+description: 'An autocomplete text field is an input that offers the user text suggestions while they type.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input-variations/'
+mainTabURL: 'docs/components/autocomplete.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Autocomplete](#autocomplete)
+-   [Autocomplete.DropDown](#autocomplete.dropdown)
+-   [Autocomplete.Input](#autocomplete.input)
+-   [Autocomplete.Item](#autocomplete.item)
+-   [Autocomplete.LoadingIndicator](#autocomplete.loadingindicator)
+
+</div>
+</div>
+
+## Autocomplete
+
+<div>[APITable "clay-autocomplete/src/index.tsx"]</div>
+
+## Autocomplete.DropDown
+
+<div>[APITable "clay-autocomplete/src/DropDown.tsx"]</div>
+
+## Autocomplete.Input
+
+<code class="list-api-item-type">Extends from `ClayForm.Input`</code>
+
+## Autocomplete.Item
+
+`ClayAutocomplete.Item` is a wrapper around `ClayDropDown.Item` but also underlines the bold characters that are matched. Feel free to create your own match rule using `ClayDropDown.Item`'s API.
+
+<div>[APITable "clay-autocomplete/src/Item.tsx"]</div>
+
+## Autocomplete.LoadingIndicator
+
+<div>[APITable "clay-autocomplete/src/LoadingIndicator.tsx"]</div>

clayui.com/content/docs/components/api-badge.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Badge'
+description: 'Badges help highlight important information, such as notifications or new and unread messages.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/badges/'
+mainTabURL: 'docs/components/badge.html'
+---
+
+<div>[APITable "clay-badge/src/index.tsx"]</div>

clayui.com/content/docs/components/api-breadcrumb.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Breadcrumb'
+description: 'Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/breadcrumb/'
+mainTabURL: 'docs/components/breadcrumb.html'
+---
+
+<div>[APITable "clay-breadcrumb/src/index.tsx"]</div>

clayui.com/content/docs/components/api-button-group.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Button Group'
+description: 'Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, "Change and Cancel" actions, or "Save and Cancel" actions. In those cases, single buttons are the correct solution.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
+mainTabURL: 'docs/components/button-group.html'
+---
+
+<div>[APITable "clay-button/src/Group.tsx"]</div>

clayui.com/content/docs/components/api-button.mdx

@@ -0,0 +1,28 @@
+---
+title: 'Button'
+description: 'Buttons communicate an action to happen on user interaction.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
+mainTabURL: 'docs/components/button.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Button](#button)
+-   [Button.Group](#button.group)
+-   [ButtonWithIcon](#buttonwithicon)
+
+</div>
+</div>
+
+## Button
+
+<div>[APITable "clay-button/src/Button.tsx"]</div>
+
+## Button.Group
+
+<div>[APITable "clay-button/src/Group.tsx"]</div>
+
+## ButtonWithIcon
+
+<div>[APITable "clay-button/src/ButtonWithIcon.tsx"]</div>

clayui.com/content/docs/components/api-card.mdx

@@ -0,0 +1,74 @@
+---
+title: 'Card'
+description: 'Cards are a specific form of data visualization focused mainly on displaying images.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/cards/'
+mainTabURL: 'docs/components/card.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Card](#card)
+-   [Card.AspectRatio](#card.aspectratio)
+-   [Card.Body](#card.body)
+-   [Card.Caption](#card.caption)
+-   [Card.Description](#card.description)
+-   [Card.Group](#card.group)
+-   [Card.Row](#card.row)
+-   [CardWithHorizontal](#cardwithhorizontal)
+-   [CardWithInfo](#cardwithinfo)
+-   [CardWithNavigation](#cardwithnavigation)
+-   [CardWithUser](#cardwithuser)
+
+</div>
+</div>
+
+## Card
+
+<div>[APITable "clay-card/src/Card.tsx"]</div>
+
+## Card.AspectRatio
+
+<div>[APITable "clay-card/src/AspectRatio.tsx"]</div>
+
+## Card.Body
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
+
+## Card.Caption
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>`}
+</code>
+
+## Card.Description
+
+<div>[APITable "clay-card/src/Description.tsx"]</div>
+
+## Card.Group
+
+<div>[APITable "clay-card/src/Group.tsx"]</div>
+
+## Card.Row
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
+
+## CardWithHorizontal
+
+<div>[APITable "clay-card/src/CardWithHorizontal.tsx"]</div>
+
+## CardWithInfo
+
+<div>[APITable "clay-card/src/CardWithInfo.tsx"]</div>
+
+## CardWithNavigation
+
+<div>[APITable "clay-card/src/CardWithNavigation.tsx"]</div>
+
+## CardWithUser
+
+<div>[APITable "clay-card/src/CardWithUser.tsx"]</div>

clayui.com/content/docs/components/api-checkbox-radio.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Checkbox'
+description: 'A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-check-toggle/'
+mainTabURL: 'docs/components/checkbox.html'
+---
+
+<div>[APITable "clay-form/src/Checkbox.tsx"]</div>

clayui.com/content/docs/components/api-color-picker.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Color Picker'
+description: 'Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-color/'
+mainTabURL: 'docs/components/color-picker.html'
+---
+
+<div>[APITable "clay-color-picker/src/index.tsx"]</div>

clayui.com/content/docs/components/api-date-and-time-pickers.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Date Picker'
+description: 'Date and Time pickers let users select a date and time for a form.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-date-time/'
+mainTabURL: 'docs/components/date-picker.html'
+---
+
+<div>[APITable "clay-date-picker/src/index.tsx"]</div>

clayui.com/content/docs/components/api-dropdown.mdx

@@ -0,0 +1,78 @@
+---
+title: 'Drop Down'
+description: 'A dropdown menu displays a list of options for the element that triggers it.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/dropdowns/'
+mainTabURL: 'docs/components/drop-down.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [DropDown](#dropdown)
+-   [DropDown.Action](#dropdown.action)
+-   [DropDown.Caption](#dropdown.caption)
+-   [DropDown.Divider](#dropdown.divider)
+-   [DropDown.Group](#dropdown.group)
+-   [DropDown.Help](#dropdown.help)
+-   [DropDown.Item](#dropdown.item)
+-   [DropDown.ItemList](#dropdown.itemlist)
+-   [DropDown.Menu](#dropdown.menu)
+-   [DropDown.Search](#dropdown.search)
+-   [DropDownWithItems](#dropdownwithitems)
+
+</div>
+</div>
+
+## DropDown
+
+<div>[APITable "clay-drop-down/src/DropDown.tsx"]</div>
+
+## DropDown.Action
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLButtonElement>`}
+</code>
+
+## DropDown.Caption
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
+
+## DropDown.Divider
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLLIElement>`}
+</code>
+
+## DropDown.Group
+
+<div>[APITable "clay-drop-down/src/Group.tsx"]</div>
+
+## DropDown.Help
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
+
+## DropDown.Item
+
+<div>[APITable "clay-drop-down/src/Item.tsx"]</div>
+
+## DropDown.ItemList
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLUListElement>`}
+</code>
+
+## DropDown.Menu
+
+<div>[APITable "clay-drop-down/src/Menu.tsx"]</div>
+
+## DropDown.Search
+
+<div>[APITable "clay-drop-down/src/Search.tsx"]</div>
+
+## DropDownWithItems
+
+<div>[APITable "clay-drop-down/src/DropDownWithItems.tsx"]</div>

clayui.com/content/docs/components/api-dual-list-box.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Dual List Box'
+description: 'Dual List Box provides users with two Select Boxes with the ability to move items between lists.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/'
+mainTabURL: 'docs/components/dual-list_box.html'
+---
+
+<div>[APITable "clay-form/src/DualListBox.tsx"]</div>

clayui.com/content/docs/components/api-empty-state.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Empty State'
+description: 'Empty states provide users with feedback on the reasons behind the empty state and what they can do to move out of the empty state.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/empty-states/'
+mainTabURL: 'docs/components/empty-state.html'
+---
+
+<div>[APITable "clay-empty-state/src/index.tsx"]</div>

clayui.com/content/docs/components/api-form-group.mdx

@@ -0,0 +1,51 @@
+---
+title: 'Form'
+description: 'Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/'
+mainTabURL: 'docs/components/form.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Form.FeedbackIndicator](#form.feedbackindicator)
+-   [Form.Group](#form.group)
+-   [Form](#form)
+-   [Form.FeedbackGroup](#form.feedbackgroup)
+-   [Form.FeedbackItem](#form.feedbackitem)
+-   [Form.Text](#form.text)
+
+</div>
+</div>
+
+## Form.FeedbackIndicator
+
+<div>[APITable "clay-form/src/Form.tsx#ClayFormFeedbackIndicator"]</div>
+
+## Form.Group
+
+<div>[APITable "clay-form/src/Form.tsx#ClayFormGroup"]</div>
+
+## Form
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLFormElement>`}
+</code>
+
+## Form.FeedbackGroup
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
+
+## Form.FeedbackItem
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
+
+## Form.Text
+
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>

clayui.com/content/docs/components/api-icon.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Icon'
+description: 'Icons are a visual representation of an idea and/or action.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/icons/'
+mainTabURL: 'docs/components/icon.html'
+---
+
+<div>[APITable "clay-icon/src/index.tsx"]</div>

clayui.com/content/docs/components/api-label.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Label'
+description: 'Labels are a visual pattern used to categorize information providing quick and easy recognition.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/labels/'
+mainTabURL: 'docs/components/label.html'
+---
+
+<div>[APITable "clay-label/src/index.tsx"]</div>