Mosaic Components

Mosaic Components is a React component library designed to provide a set of reusable UI components. It includes customizable text boxes, buttons, calendars, and text areas that can be easily integrated into any React application.

Installation

To install Mosaic Components, run the following command in your project directory:

npm install mosaic-components


## Components
### MosaicTextBox
A customizable text input component.

```Props
```label: string (optional) - Label for the text box.
```style (optional): React.CSSProperties object for inline styling.
```placeholder (optional): String specifying the placeholder text of the input field.
```id: String specifying the unique identifier for the input field.
```labelColor (optional): String specifying the color of the label text. Default is #000000.
```defaultValue: string (optional) - Default value of the text box.
```onChange: function (optional) - Callback function that is called when the text changes.

### MosaicCalendar
A date picker component that allows users to select a date.

```Props
```minDate: string (optional) - Minimum date that can be selected.
```maxDate: string (optional) - Maximum date that can be selected.
```onChange: function (optional) - Callback function that is called when the date changes.
```id: String specifying the unique identifier for the input field.
```style (optional): React.CSSProperties object for inline styling.
```labelColor (optional): String specifying the color of the label text. Default is #000000.

### MosaicButton
A button component with customizable styling and click handling.

```Props
```label: string - Text to display on the button.
```onClick: function - Callback function that is called when the button is clicked.
```style: object (optional) - Custom styles to apply to the button.


### MosaicTextArea
A text area component for multi-line input.

```Props
```placeholder: string (optional) - Placeholder text for the text area.
```rows: number (default: 4) - Number of rows.
```cols: number (default: 50) - Number of columns.
```onChange: function (optional) - Callback function that is called when the text changes.
```id: String specifying the unique identifier for the input field.
```style (optional): React.CSSProperties object for inline styling.
```labelColor (optional): String specifying the color of the label text. Default is #000000.

### MosaicGrid
The `MosaicGrid` component is a flexible and customizable React component designed to display data in a tabular format with optional styling for headers and data cells. It supports various styling options to customize the appearance of the table headers and data cells.

`Features

- Display data in a tabular format.
- Customizable header and data cell styles.
- Supports empty data states.
```Props
```data: Array of objects representing the data to be displayed.
```headerColor (optional): String specifying the background color of the table headers. Default is #f2f2f2.
```headertextColor (optional): String specifying the text color of the table headers. Default is #000000.
```dataBackgroundColor (optional): String specifying the background color of the data cells. Default is transparent.
```dataTextColor (optional): String specifying the text color of the data cells. Default is #000000.

## Accessibility
Our components are designed with accessibility in mind, supporting ARIA attributes and keyboard navigation to ensure usability for all users.

## Contributing
Contributions to Mosaic Components are welcome! Please refer to our contributing guidelines for more information on how to contribute.

## License
Mosaic Components is licensed under the MIT License. See the LICENSE file for more details.