Below are the main components included in the My Design System library, along with their props and usage examples.

Button A customizable button component.

Props:

onClick: Function - Function to call on button click. children: ReactNode - The content of the button. Example:

import { Button } from 'my-design-system';

function App() {
return <Button onClick={() => console.log("Button clicked!")}>Click me!</Button>;
}

Input A simple input component for user text input.

Props:

value: string - The input value. onChange: Function - Function to call on input change. Example:

import { Input } from 'my-design-system';

function App() {
return <Input value="Hello" onChange={(e) => console.log(e.target.value)} />;
}

TextArea A text area component for multiline text input.

Props:

value: string - The text area value. onChange: Function - Function to call when the text changes. Example:

import { TextArea } from 'my-design-system';

function App() {
return <TextArea value="Enter text here" onChange={(e) => console.log(e.target.value)} />;
}

Select A select component to provide dropdown options.

Props:

options: Array<{ value: string, label: string }> - The options for the select. onChange: Function - Function to call when an option is selected. value: string - The current selected value. Example:

import { Select } from 'my-design-system';

function App() {
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' }
];
return <Select options={options} value="option1" onChange={(e) => console.log(e.target.value)} />;
}

Contributing We welcome contributions to improve My Design System! Please feel free to fork the repository, make changes, and submit pull requests.