

## Button
### Styling overrides
The styling of a button can be overridden using four keys, their uses should be self-explanatory:
- `components.button`
- `components.button.disabled`: `pointer-events-none bg-gray-500`
- `components.button.primary`: `text-white`
- `components.button.secondary`
- `components.button.tertiary`: `text-gray-700 bg-white border`

## ButtonGroup
### Styling overrides
- `components.buttongroup`
- `components.buttongroup.outer.left`
- `components.buttongroup.outer.right`
- `components.buttongroup.inner.left`: `rounded-l-none`
- `components.buttongroup.inner.right`: `rounded-r-none border-r`

## DateInput
### Styling overrides

- `components.dateinput.invalid` => `components.form.invalid`
- `components.dateinput.disabled` => `components.form.disabled`
- `components.dateinput.valid`
- `components.dateinput.inset`: `-mr-3 -ml-2 rounded-l-none h-9`
- `components.dateinput.selector.container`: `absolute bg-white top-12 right-0 border border-gray-200 rounded-md`
- `components.dateinput.selector.header`: `p-2 font-bold`
- `components.dateinput.selector.header.buttons`: `cursor-pointer select-none`
- `components.dateinput.selector.header.icons.previous` => `components.icons.chevron-left`
- `components.dateinput.selector.header.icons.next` => `components.icons.chevron-right`
- `components.dateinput.selector.items.grid`: `gap-2 px-2 pb-2 w-60 text-center`
- `components.dateinput.selector.items.dow`: `font-bold select-none`
- `components.dateinput.selector.items.date`: `w-8 h-8 -m-1 flex justify-center items-center rounded-full cursor-pointer select-none`
- `components.dateinput.selector.highlight.other`: `text-gray-500`

## Overlay
### Styling overrides
- `components.overlay.color`: `rgba(0, 0, 0, 0.7)`
- `components.overlay.classes`

## Form
### Styling overrides
- `components.form.disabled`: `bg-gray-100 cursor-not-allowed`

## Label
### Styling overrides
A label has a few default classes which can be overridden using the `components.label.classes` key.

## Input
### Styling overrides
- `components.input.disabled` => `components.form.disabled`
- `components.input`: `shadow-sm block w-full sm:text-sm rounded-md border-0`
- `components.input.container`: `rounded-md border border-gray-200 focus-within:border-indigo-500 ring-0 focus-within:ring-1 ring-indigo-500`
- `components.input.with-inset`: `rounded-r-none focus:ring-transparent`
- `components.input.inset`: `flex-grow-0 flex items-center pl-2 pr-3 shadow-sm rounded-r-md border-l pointer-events-none`

## Select
### Styling overrides
- `components.select.icons.open`
- `components.select.icons.close` => `components.select.icons.close`
- `components.select.icons.check`
- `components.select.enabled`
- `components.select.disabled` => `components.form.disabled`
- `components.select.highlight`
- `components.select.list` : `max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`
- `components.select.list_item` : `text-gray-900 cursor-pointer select-none relative py-2 pl-3 pr-9`
- `components.select.dropdown` : `rounded-md bg-white shadow-lg`

## Toggle
### Styling overrides
- `components.toggle.disabled.color-bg`: `bg-gray-200`
- `components.toggle.disabled.color-text`: `text-gray-400`
- `components.toggle.active.color-bg`: `bg-green-300`
- `components.toggle.active.color-text`: `text-green-500`
- `components.toggle.active.icon` => `components.icons.check`
- `components.toggle.active.translate`: `translate-x-5`
- `components.toggle.inactive.color-bg`: `bg-red-200`
- `components.toggle.inactive.color-text`: `text-red-400`
- `components.toggle.inactive.icon` => `components.icons.cross`
- `components.toggle.inactive.translate`: `translate-x-0`
- `components.toggle.classes`: `relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full  transition-colors ease-in-out duration-200 focus:outline-none`
- `components.toggle.classes.disabled`: `cursor-not-allowed`
- `components.toggle.classes.enabled`: `cursor-pointer`
- `components.toggle.classes.focus`: `focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`
- `components.toggle.container.icon-inner`: `h-3 w-3 bg-white`
- `components.toggle.container.icon-outer`: `ease-in-out duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`
- `components.toggle.container.point`: `pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200`

## Checkbox
### Styling overrides
- `components.form.checkbox.checkbox` : `border-gray-300`
- `component.form.checkbox.label.left` : `mr-2`
- `component.form.checkboc.label.right` : `ml-2`

## File Input
### Styling overrides
- `components.fileinput.buttons.select`: `rounded-l-none`
- `components.fileinput.buttons.select.with-remove`: `rounded-r-none`
- `components.fileinput.buttons.remove`: `rounded-l-none border-l`
- `components.fileinput.invalid` => `components.form.invalid`
- `components.fileinput.icons.select` => `components.icons.document-add`
- `components.fileinput.icons.remove` => `components.icons.trash`

## Password
### Styling overrides
- `components.password.icon.show` => `components.icons.eye-off`
- `components.password.icon.hide` => `components.icons.eye`

# Icons
The library comes with a few included icons, these can be changed to different SVG paths, or to entirely different icon sets by overriding the `IconRenderer`.

- `components.icons.calendar`: `M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z`
- `components.icons.check`: `M 20.634 5.377 C 21.137 5.878 21.137 6.693 20.634 7.195 L 10.34 17.482 C 9.838 17.983 9.024 17.983 8.522 17.482 L 3.373 12.338 C 2.686 11.627 3.026 10.437 3.988 10.197 C 4.419 10.09 4.874 10.212 5.193 10.521 L 9.431 14.755 L 18.815 5.377 C 19.319 4.875 20.133 4.875 20.634 5.377 Z`
- `components.icons.chevron-down`: `M 19 9 C 20 8 19 7 18 8 L 12 14 L 6 8 C 5 7 4 8 5 9 L 12 16 Z`
- `components.icons.chevron-left`: `M 15 19 C 16 20 17 19 16 18 L 10 12 L 16 6 C 17 5 16 4 15 5 L 8 12 Z`
- `components.icons.chevron-right`: `M 9 19 C 8 20 7 19 8 18 L 14 12 L 8 6 C 7 5 8 4 9 5 L 16 12 Z`
- `components.icons.cross`: `M 5 4  C 4 3 3 4 4 5 L 11 12 L 4 19 C 3 20 4 21 5 20 L 12 13 L 19 20 C 20 21 21 20 20 19 L 13 12 L 20 5 C 21 4 20 3 19 4 L 12 11 Z`
- `components.icons.document-add`: `M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z`
- `components.icons.eye`: `M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z` 
- `components.icons.eye-off`: `M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21`
- `components.icons.trash`: `M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16`

Overriding the icon renderer can be done using the React Context API, the example below shows how you might integrate FontAwesome.

```jsx
<IconRenderer render={icon => (<i className={`fa fa-${icon}`} />)}>
  {/* Your app comes here */}
</IconRenderer>
```

# Notes

- Overriding styling to different input types that are normally hard to style e.g. checkboxes you are required to install the @tailwindcss/forms plugin into your project.