[DOCS] Add documentation for Clubs UI

.gitignore

@@ -108,4 +108,4 @@ dump
 .yarnrc.yml
 
 # generated docs
-docs
+# docs

ui/docs/components/react/clb-button-group.md

@@ -0,0 +1,39 @@
+# CLBButtonGroup
+Button groups are a group of related actions that may be used to paginate results, tab sections of pages, or simply select an option.
+
+![img.png](../_media/button-group.png)
+
+## Usage
+```jsx
+<CLBButtonGroup>
+	<CLBButtonGroupItem id="polygon" name="network" value="polygon">
+		Polygon
+	</CLBButtonGroupItem>
+	<CLBButtonGroupItem id="arbitrium" name="network" value="arbitrium">
+		Arbitrium
+	</CLBButtonGroupItem>
+	<CLBButtonGroupItem id="ethereum" name="network" value="ethereum">
+		Ethereum
+	</CLBButtonGroupItem>
+</CLBButtonGroup>
+```
+
+## Props
+| Prop       | Type    | Default | Description                                          |
+|------------|---------|---------|------------------------------------------------------|
+| id         | string  | null    | The component's id.                                  |
+| name       | string  | null    | The component's name.                                |
+| value      | string  | null    | The component's value.                               |
+| isChecked  | boolean | false   | Boolean toggle to set the button to checked or not.  |
+| isDisabled | boolean | false   | Boolean toggle to set the button to disabled or not. |
+
+## Slots
+| Slot    | Description      |
+|---------|------------------|
+| default | The button text. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button-group) of this component's base component.

ui/docs/components/react/clb-button.md

@@ -0,0 +1,80 @@
+# CLBButton
+
+Buttons call the user to a specific action in the page. May it be in a form, or a hyperlink.
+
+![img.png](../_media/normal-btn.png)
+
+## Usage
+
+```tsx
+<CLBButton
+	link="String"
+	type="String"
+	icon={<Icon />}
+	onClick={() => {}}
+	isDisabled
+>Click Me
+</CLBButton>
+```
+
+## Props
+
+| Prop       | Type                                | Default | Description                                         |
+|------------|-------------------------------------|---------|-----------------------------------------------------|
+| type       | ButtonType\|string                  | null    | The type of button.                                 |
+| icon       | React.ReactElement                  | null    | The icon of the button.                             |
+| link       | string                              | null    | The link required.                                  |
+| onClick    | () => React.MouseEventHandler\|void | null    | The function to execute when the button is clicked. |
+| isDisabled | boolean                             | false   | Whether the button is disabled.                     |
+
+### Available types
+
+#### 1. Text
+
+Text buttons are used for the least prioritized actions. These are used as action alternatives, or actions to be third
+and beyond in consideration.
+
+#### 2. Outlined
+
+Outlined buttons are used for secondarily prioritized actions. These are used as action alternatives, or actions to be
+second in consideration.
+
+#### 3. Filled
+
+Filled buttons are used for the most prioritized actions. These are used for actions you want the user to see/consider
+first.
+
+#### 5. Small
+
+![img.png](../_media/small-btn.png)
+
+Small buttons are a smaller version of the normal-sized buttons. These are used in tight spaces in which a normal-sized
+button cannot fit in.
+
+#### 6. Large
+
+![img.png](../_media/large-btn.png)
+Large buttons are a larger version of the normal-sized buttons. These are used typically in big call to actions (CTAs)
+in marketing pages like the hero in the index page.
+
+#### 7. Fullwidth\*
+
+Fullwidth buttons are buttons that fill up 100% of its width in a container.
+
+#### 8. Contained\*
+
+Contained buttons are buttons that only stretch to its maximum content width.
+
+> `*` = not available in the skeleton version.
+
+## Slots
+
+| Slot    | Description      |
+|---------|------------------|
+| default | The button text. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button) of this component's base component.

ui/docs/components/react/clb-checkbox.md

@@ -0,0 +1,43 @@
+# CLBCheckbox
+Checkboxes take and validate predetermined inputs of the user in a context of a form, or simple querying. They can have multiple selected values per field.
+
+![img.png](../_media/tick-checkboxes.png)
+
+```jsx
+<CLBCheckbox
+	name="String"
+	id="String"
+	value="String"
+	type="String"
+	label="String"
+	helper="String"
+	media="String"
+	mediaAlt="String"
+	isChecked
+	isDisabled
+	onChange={() => {}}
+/>
+```
+
+## Props
+
+> `*` = required
+
+| Prop      | Type                  | Default | Description                                                     |
+|-----------|-----------------------|---------|-----------------------------------------------------------------|
+| name*     | string                | null    | The component's name.                                           |
+| id        | string                | null    | The component's id.                                             |
+| type      | CheckboxTypes\|string | null    | The component's type.                                           |
+| value     | string                | null    | The component's default value.                                  |
+| label*    | string                | null    | The component's label.                                          |
+| helper    | string                | null    | The component's helper text.                                    |
+| media     | string                | null    | The sprite/icon for the left side of the component.             |
+| mediaAlt  | string                | null    | The alt text for the media.                                     |
+| isChecked | boolean               | false   | Boolean toggle to set the checkbox to checked or not.           |
+| onChange  | () => void            | null    | Function to execute when watching for changes to the component. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component.

ui/docs/components/react/clb-form-field.md

@@ -0,0 +1,43 @@
+# CLBFormField
+
+Form fields take and validate inputs the user in a context of a form, or simple querying.
+
+![img.png](../_media/form-field.png)
+
+```jsx
+<CLBFormField
+	label="String"
+	name="String"
+	type="String"
+	inputType="String"
+	helper="String"
+	placeholder="String"
+	rows={5}
+	isRequired
+	isDisabled
+	isReadonly
+/>
+```
+
+## Props
+
+> `*` = required
+
+| Prop        | Type                   | Default | Description                        |
+|-------------|------------------------|---------|------------------------------------|
+| label*      | string                 | null    | The component's label.             |
+| name*       | string                 | null    | The component's name.              |
+| type        | FormFieldTypes\|string | null    | The component's type.              |
+| inputType*  | string                 | null    | The component's input type.        |
+| helper      | string                 | null    | The component's helper text.       |
+| placeholder | string                 | null    | The component's placeholder.       |
+| rows        | number                 | 5       | The component's rows.              |
+| isRequired  | boolean                | false   | Whether the component is required. |
+| isDisabled  | boolean                | false   | Whether the component is disabled. |
+| isReadonly  | boolean                | false   | Whether the component is readonly. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/form-field) of this component's base component.

ui/docs/components/react/clb-link.md

@@ -0,0 +1,29 @@
+# CLBLink
+
+Links are elements that take a user from one webpage to another. These are often found inline with regular text.
+
+![img.png](../_media/link.png)
+
+## Usage
+
+```jsx
+<CLBLink link="String">Link sample.</CLBLink>
+```
+
+## Props
+
+| Prop | Type   | Default | Description        |
+|------|--------|---------|--------------------|
+| link | String | null    | The link required. |
+
+## Slots
+
+| Slot    | Description    |
+|---------|----------------|
+| default | The link text. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/link) of this component's base component.

ui/docs/components/react/clb-radio.md

@@ -0,0 +1,43 @@
+# CLBRadio
+Radio fields take and validate predetermined inputs of the user in a context of a form, or simple querying. They can only have a single selected value per field.
+
+![img.png](../_media/tick-radio.png)
+
+```jsx
+<CLBRadio
+	name="String"
+	id="String"
+	value="String"
+	type="String"
+	label="String"
+	helper="String"
+	media="String"
+	mediaAlt="String"
+	isChecked="Boolean"
+	isDisabled="Boolean"
+	onChange="Function"
+/>
+```
+
+## Props
+
+> `*` = required
+
+| Prop      | Type                  | Default | Description                                                     |
+|-----------|-----------------------|---------|-----------------------------------------------------------------|
+| name*     | string                | null    | The component's name.                                           |
+| id        | string                | null    | The component's id.                                             |
+| type      | CheckboxTypes\|string | null    | The component's type.                                           |
+| value     | string                | null    | The component's default value.                                  |
+| label*    | string                | null    | The component's label.                                          |
+| helper    | string                | null    | The component's helper text.                                    |
+| media     | string                | null    | The sprite/icon for the left side of the component.             |
+| mediaAlt  | string                | null    | The alt text for the media.                                     |
+| isChecked | boolean               | false   | Boolean toggle to set the checkbox to checked or not.           |
+| onChange  | () => void            | null    | Function to execute when watching for changes to the component. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component.

ui/docs/components/react/clb-select-field.md

@@ -0,0 +1,44 @@
+# CLBFormField
+
+Select fields lets the user pick an option from a finite set of choices, and validate the option in a context of a form,
+or simple filtering.
+
+![img.png](../_media/select-field.png)
+
+```jsx
+<CLBSelectField
+	label="String"
+	name="String"
+	type="String"
+	helper="String"
+	isRequired
+	isDisabled
+>
+	<option value="Option">Option</option>
+	...
+</CLBSelectField>
+```
+
+## Props
+
+> `*` = required
+
+| Prop        | Type    | Default | Description                        |
+|-------------|---------|---------|------------------------------------|
+| label*      | string  | null    | The component's label.             |
+| name*       | string  | null    | The component's name.              |
+| type        | string  | null    | The component's type.              |
+| helper      | string  | null    | The component's helper text.       |
+| isRequired  | boolean | false   | Whether the component is required. |
+| isDisabled  | boolean | false   | Whether the component is disabled. |
+
+## Slots
+| Slot    | Description                          |
+|---------|--------------------------------------|
+| default | Entry point for `<option>` elements. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/select-field) of this component's base component.

ui/docs/components/react/clb-tier.md

@@ -0,0 +1,21 @@
+# CLBTier
+Tiers are a Clubs exclusive UI component. This is used for the rewards tier section of your DAO.
+
+## Usage
+```jsx
+<CLBTier title="CLBTier" subtitle="500 DEV">
+	<CLBButton type="filled">Select</CLBButton>
+</CLBTier>
+```
+
+## Props
+| Prop     | Type   | Default | Description                 |
+|----------|--------|---------|-----------------------------|
+| title    | string | null    | The component's title.      |
+| subtitle | string | null    | The component's subtitle.   |
+| media    | string | null    | The component's media file. |
+
+## Slots
+| Slot    | Description                                                         |
+|---------|---------------------------------------------------------------------|
+| default | The component's action slot. This is where buttons usually live in. |

ui/docs/components/svelte/clb-button-group.md

@@ -0,0 +1,43 @@
+# CLBButtonGroup
+Button groups are a group of related actions that may be used to paginate results, tab sections of pages, or simply select an option.
+
+![img.png](../_media/button-group.png)
+
+## Usage
+```sveltehtml
+<CLBButtonGroup>
+	<CLBButtonGroupItem id="polygon" name="network" value="polygon">
+		Polygon
+	</CLBButtonGroupItem>
+	<CLBButtonGroupItem id="arbitrium" name="network" value="arbitrium">
+		Arbitrium
+	</CLBButtonGroupItem>
+	<CLBButtonGroupItem id="ethereum" name="network" value="ethereum">
+		Ethereum
+	</CLBButtonGroupItem>
+</CLBButtonGroup>
+
+<script>
+import {CLBButtonGroup, CLBButtonGroupItem} from '@devprotocol/clubs-core/ui/svelte';
+</script>
+```
+
+## Props
+| Prop       | Type    | Default | Description                                          |
+|------------|---------|---------|------------------------------------------------------|
+| id         | string  | null    | The component's id.                                  |
+| name       | string  | null    | The component's name.                                |
+| value      | string  | null    | The component's value.                               |
+| isChecked  | boolean | false   | Boolean toggle to set the button to checked or not.  |
+| isDisabled | boolean | false   | Boolean toggle to set the button to disabled or not. |
+
+## Slots
+| Slot    | Description      |
+|---------|------------------|
+| default | The button text. |
+
+## Detailed API Documentation
+
+A detailed API documentation is available whenever you want to change something in the component manually--like using
+the class names API, or CSS variables API. The documentation is located in
+the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button-group) of this component's base component.