open-index/open-npm huggingface dataset:
npm package: @samwindham1/component-library
Description: ## Introduction
Latest version: 0.2.2

# @samwindham1/component-library &middot; [![npm version](https://img.shields.io/npm/v/@samwindham1/component-library?style=flat)](https://www.npmjs.com/package/@samwindham1/component-library)

## Introduction

This is a themable component library that uses React and styled-components. Simply import the components into your project to style and build your site.

## Setup

```
npm install @samwindham1/component-library --save
```

Add the `ThemeProvider` at the top-most level of your app, and supply it your theme overrides.

```jsx
// app.jsx

import { ThemeProvider } from '@samwindham1/component-library';
import { theme } from './theme';

export const App = () => (
    <ThemeProvider theme={theme}>
        <... />
    </ThemeProvider>
);
```

Set up your theme overrides (See below for theme structure):

```js
// theme.js
export const theme = {
    color: {
        primary: 'blue'
        ...
    },
    button: {
        color: 'magenta'
        ...
    },
    ...
}
```

Import and use a component:

```jsx
// Component.jsx

import { Button } from '@samwindham1/component-library';

const Component = () => (
    <>
        ...
        <Button label={'Label'} onClick={() => {}} />
    </>
);
```

## Components:

### Default Props

| prop     | type    | default        | description       |
| -------- | ------- | -------------- | ----------------- |
| id       | string  | [empty string] | custom id         |
| disabled | boolean | false          |                   |
| classes  | string  | [empty string] | custom classnames |

### Button

| prop    | type       | default | description            |
| ------- | ---------- | ------- | ---------------------- |
| label   | string     |         |                        |
| onClick | () => void |         | onClick event function |

### Checkbox

| prop     | type                     | default | description                                   |
| -------- | ------------------------ | ------- | --------------------------------------------- |
| label    | string                   |         |                                               |
| checked  | boolean                  |         | parent component needs to control the state   |
| onChange | (value: boolean) => void |         | onChange function to control the parent state |

### TextInput

| prop     | type                    | default | description                                   |
| -------- | ----------------------- | ------- | --------------------------------------------- |
| value    | string                  |         | parent component needs to control the state   |
| onChange | (value: string) => void |         | onChange function to control the parent state |
npm package: @samwise-app/sveltekit-test
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.2

# 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 init svelte

# create a new project in my-app
npm init svelte 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.