npm package: @kaiachain/kaia-design-system
Description: The **Kaia Design System** provides a set of reusable, consistent UI components, built to follow the Kaia Foundation's design guidelines. It includes components such as buttons, inputs, labels, and more, to ensure a unified design across all Kaia applicat
Latest version: 1.1.6

# Kaia Design System

The **Kaia Design System** provides a set of reusable, consistent UI components, built to follow the Kaia Foundation's design guidelines. It includes components such as buttons, inputs, labels, and more, to ensure a unified design across all Kaia applications.

## Requirements

- Node.js (version 16 or higher)
- Yarn package manager

## Installation

To install the Kaia Design System package, run the following command:

```bash
yarn add @kaiachain/kaia-design-system
```

## Usage

Once installed, you can start using the components by importing them into your project:

```jsx
import { useState } from 'react'
import {
  KaThemeProvider,
  KaButton,
  KaText,
  useKaTheme,
} from '@kaiachain/kaia-design-system'

type ThemeType = 'light' | 'dark'

const Home = ({
  theme,
  setTheme,
}: {
  theme: ThemeType
  setTheme: (theme: ThemeType) => void
}) => {
  const { getTheme } = useKaTheme()

  return (
    <div style={{ backgroundColor: getTheme('gray', '10') }}>
      <KaText fontType="title/lg_700">Welcome to Kaia Design System</KaText>
      <KaButton
        onClick={() => {
          setTheme(theme === 'light' ? 'dark' : 'light')
        }}
      >
        Click Me
      </KaButton>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState<ThemeType>('light')

  return (
    <KaThemeProvider theme={theme}>
      <Home theme={theme} setTheme={setTheme} />
    </KaThemeProvider>
  )
}

export default App

```

## Key Features

The Kaia Design System provides the following key components and utilities:

- **KaIcon**: A set of scalable SVG icons that ensure consistency and flexibility across the UI.
- **KaLogo**: The official Kaia Foundation logo in SVG format, optimized for scalability and clarity.
- **KaButton & KaButtonProps**: A versatile button component with customizable size, type, icons, and state options.
- **KaCheckBox & KaCheckBoxProps**: A customizable checkbox component for user input, with support for various states.
- **KaTextInput & KaTextInputProps**: A text input component that handles various states like error, disabled, and sizes.
- **KaLabel & KaLabelProps**: A flexible label component with multiple styles, including solid, pale, line, and more.
- **KaRadio & KaRadioProps**: A radio button component designed for selecting between options, customizable in size and label.
- **KaText & KaTextProps**: A core text component that adheres to the system's typography standards, with multiple font styles and sizes.
- **KaSelectBox & KaSelectBoxProps**: A select box component for dropdowns, supporting customizable values and states.
- **useKaTheme**: A hook to access and control the current theme (light or dark).
- **font**: Standardized typography settings for consistent font sizes, weights, and line heights.
- **darkTheme**: A predefined dark theme for low-light environments, providing better readability.
- **lightTheme**: A predefined light theme for bright environments, ensuring clarity and usability.

## Theming

The Kaia Design System includes a theming mechanism, allowing you to switch between light and dark themes. You can easily toggle themes using the `useKaTheme` hook:

```jsx
import { useKaTheme, KaRadio, KaText } from '@kaiachain/kaia-design-system';

function ThemeToggle() {
  const { theme, setTheme } = useKaTheme();

  return (
    <div>
      <KaText fontType="title/sm_700">Toggle Theme</KaText>
      <KaRadio selected={theme} value="light" onClick={() => setTheme('light')} />
      <KaText fontType="body/md_600">Light Theme</KaText>
      <KaRadio selected={theme} value="dark" onClick={() => setTheme('dark')} />
      <KaText fontType="body/md_600">Dark Theme</KaText>
    </div>
  );
}
```

## Example

You can find a working example that demonstrates how to use the components and theming system of `kaia-design-system`. The example project includes various components such as buttons, checkboxes, inputs, and more, along with a theme toggle feature.

### Running the Example Project

1. Clone the repository and navigate to the example project directory:

   ```bash
   git clone https://github.com/kaiachain/kaia-design-system.git
   cd kaia-design-system/example
   ```

2. Install dependencies using `yarn`:

   ```bash
   yarn install
   ```

3. Start the development server:

   ```bash
   yarn dev
   ```

4. Explore the various components and features provided by `kaia-design-system` directly in your browser.

> You can view the example source code in the `example` directory of the [kaia-design-system/example repository](https://github.com/kaiachain/kaia-design-system/tree/main/example).


## Development

### Local Development and Linking

While developing the Kaia Design System locally, you can link the package to an example project to see live updates:

1. In the root directory of `kaia-design-system`, create a symbolic link:
   ```bash
   yarn link
   ```

2. In the example project, link the design system:
   ```bash
   yarn link "@kaiachain/kaia-design-system"
   ```

3. Build the design system to apply changes:
   ```bash
   yarn build
   ```

Now, any changes made in the design system will reflect in the example project after building.

## Contributing

Contributions are welcome! Please follow the code style and run `yarn lint` before submitting pull requests.

## License

This project is licensed under the MIT License.