Vite && React && Typescript

How to use: 0. You need ThemeProvider from styled-components:

npm i styled-components

import { ThemeProvider } from "styled-components";

1. In your component:

   import { useTheme, Box, Button, Input, Accordion } from "vite-react-ts-shared-ui-system";

2. You can change theme with "toggleTheme":

<Button onClick={() => toggleTheme()} label={"Change theme"} />

3. For example:

import { ThemeProvider } from "styled-components";
import { useTheme, Box, Button, Input, Accordion } from "vite-react-ts-shared-ui-system";
import { useState } from "react";

function App() {
  const [value, setValue] = useState('');
  const { currentTheme, toggleTheme } = useTheme();
  return (
    <ThemeProvider theme={currentTheme}>
   <Box className="App">
        <Box>
          <Button
            onClick={() => toggleTheme()}
            label={"Change theme"}
          />
        </Box>

        <Box>
          <Input
            placeholder="Enter text here..."
            value={value}
            onValueChange={setValue}
          />
        </Box>
        <Box>
            <Input placeholder="Uncontrollable input" value={value} />
        </Box>

        <Box>
          <Accordion header="Header">
            <p>Content</p>
          </Accordion>
        </Box>
    </Box>
    </ThemeProvider>
  );
}

export default App;