open-index/open-npm huggingface dataset:
npm package: @luke-codewalker/game-kit
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Latest version: 0.0.10

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @luke-dcz/lightning-ui
Description: A comprehensive and customisable React UI library.
Latest version: 0.4.3

# Lightning UI ⚡️

A comprehensive and customisable React UI library.

## Installation

```
#Using npm
npm install @luke-dcz/lightning-ui

#Using yarn
yarn add @luke-dcz/lightning-ui

#Using pnpm
pnpm add @luke-dcz/lightning-ui
```

## Import

Each component can be imported individually, so that you only bundle what you use.

```
// import { ComponentName } from "@luke-dcz/lightning-ui";
import { Button } from "@luke-dcz/lightning-ui";
import '@luke-dcz/lightning-ui/dist/style.css';

export default function MyPage() {
  return (
    <main>
      <Button>Click Me</Button>
    </main>
  );
}
```

## Components

### Button

Props:

- className: `string` - add custom styles or override current styles (optional)
- children: `ReactNode` - render text inside the button
- isDisabled: `boolean` - disable the button (optional)
- size: `sm`, `md`, `lg`, `xl` - change the size of the button (optional)
- radius: `none`, `sm`, `base`, `md`, `lg`, `xl`, `full` - change the border radius of the button (optional)
- variant: `solid`, `bordered`, `ghost` - change the style of the button (optional)
- default HTML props

### Input

Props:

- className: `string` - add custom styles or override current styles (optional)
- isDisabled: `boolean` - disable the input (optional)
- isRequired: `boolean` - makes the input required (optional)
- label: `string` - add a label for the input (optional)
- labelPlacement: `left`, `top` - change the placement of the button (optional)
- name: `string` - add the HTML name prop to uniquely identify the input
- placeholder: `string` - add a placeholder to the input (optional)
- radius: `none`, `sm`, `base`, `md`, `lg`, `xl`, `full` - change the border radius of the input (optional)
- variant: `solid`, `bordered`, `underlined` - change the style of the input (optional)

### Chip

Props:

- className: `string` - add custom styles or override current styles (optional)
- children: `ReactNode` - render text inside the chip
- radius: `none`, `sm`, `base`, `md`, `lg`, `xl`, `full` - change the border radius of the chip (optional)
- size: `sm`, `md`, `lg`, `xl` - change the size of the chip (optional)
- variant: `solid`, `bordered` - change the style of the chip (optional)

### Select

Props:

- containerStyles: `string` - add custom styles to the main container (optional)
- isDisabled: `boolean` - disable the select (optional)
- isRequired: `boolean` - makes the select required (optional)
- label: `string` - add a label for the select (optional)
- listBoxStyles: `string` - add custom styles to the listbox (optional)
  -multipleOptions: `boolean` - allows the user to select multiple options (optional)
- options: `{
  value: string;
  label: string;
}[]` - add the various options to select from
- radius: `none`, `sm`, `base`, `md`, `lg`, `xl`, `full` - change the border radius of the select (optional)
- variant: `solid`, `bordered` - change the style of the select (optional)

## Storybook

// To do