open-index/open-npm huggingface dataset:
npm package: @sveltekit/ui
Description: Svelte UI Library
Latest version: 4.0.0

# Sveltekit - Powerful, reliable & fully featured Svelte UI library

## Getting started
```sh
$  npm install @sveltekit/ui
```

**Note:** Install as a dev dependency `npm i @sveltekit/ui -D` if using [Sapper](https://sapper.svelte.dev/) to avoid SSR errors.

## Dev

## Dependencies
- [node](https://nodejs.org/en): stable
- [yarn](https://yarnpkg.com/en/): stable

## Setup
```sh
$  yarn
```

To work locally on the components you'll need to yarn link the project to itself
```sh
$  yarn link
$  yarn link @sveltekit/ui
$  yarn dev
```

## Tests
Run tests (make sure you also have yarn dev running in another console)
```sh
$  yarn test:browser
```

## Releases

Once all changes/PRs required for release have been merge to develop then create a PR for develop to be merged into master.

Complete the PR, which will merge all develop changes into master.

Checkout master and pull down from origin to retrieve latest changes.

Update CHANGELOG and commit change (don't push).

Run `npm version <update_type>` [https://docs.npmjs.com/about-semantic-versioning](https://docs.npmjs.com/about-semantic-versioning)
Then `npm publish`

Finally, checkout develop and merge in changes from master ie. `git merge master`
npm package: @sveltelegos-blue/svelte-legos
Description: A framework for Svelte Utilities
Author: Jamie Alavosus
Latest version: 0.5.1

# sveltelegos-blue

A fork of [ankurrsinghal/svelte-legos](https://github.com/ankurrsinghal/svelte-legos), hopefully with more consistent releases and maintenance.

Collection of essential Svelte Composition Utilities
<br>
<br>

## 🚀 Features

- 🎪 [**Interactive docs & demos**](https://sveltelegos-blue.vercel.app)
- ⚡ **Fully tree shakeable**: Only take what you want, [bundle size]
- 🦾 **Type Strong**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc)
- 🔋 **SSR Friendly**
- 🌎 **No bundler required**: Usable via CDN
- 🔩 **Flexible**: Configurable event filters and targets

## 🦄 Usage

```svelte
<script lang="ts">
    import { loadingAction } from "@sveltelegos-blue/svelte-legos";

    let loading = $state(false);

    handleClick = () => {
        setTimeout(() => {loading = false}, 5000);
        loading = true;
    }
</script>

<button use:loadingAction={loading} onclick={handleClick}>Click me and I'll start loading!</button>
```

```svelte
<script lang="ts">
    import { clickOutsideAction } from "@sveltelegos-blue/svelte-legos";
    
    let hidden = false;
    
    function handleClickOutside() {
        hidden = !hidden;
    }
</script>

<div class="modal" use:clickOutsideAction onclickoutside={handleClickOutside} />
```

Refer to [functions list](https://svelte-legos.surge.sh/guides) or [documentations](https://svelte-legos.surge.sh) for more details.

## UPCOMING DEPRECATION NOTICE!

Since Svelte 5 and its runes have made stores more and more obsolete, it's time to start removing them 
from this library. For many things, there's no point in specifically using a store
when a `$state()` or `$derived()` would work better. 

As such, **starting soon, I will be phasing out various legos in `stores`**, getting rid of 
or rewriting as many as possible.

Yes, this is a breaking change.

## 📦 Install

```bash
npm i @sveltelegos-blue/svelte-legos
```

## A note about version numbers

Semantic Versioning is a bit silly. 

I very likely will not be bumping this to a major version for _**quite**_ a while. 
Given that, assume that minor versions (0.**x**.y) **can** include entirely breaking changes.
They very likely won't, but, don't get comfortable. 

Patch versions (0.x.**y**) will never break things. In fact, they'll usually fix things. 

## Local setup

```bash
npm run dev
```

## Current Todos/Projects

- [ ] Actual dark mode design, not just haphazard application of colours where they look good.
- [ ] Styles consolidation (ie. actual themes)

Contributions to these lofty goals are welcome.

## 🌸 Thanks

This project is heavily inspired by the following awesome projects.

- [vueuse/vueuse](https://github.com/vueuse/vueuse)
- [streamich/react-use](https://github.com/streamich/react-use)
- [u3u/vue-hooks](https://github.com/u3u/vue-hooks)
- [logaretm/vue-use-web](https://github.com/logaretm/vue-use-web)
- [kripod/react-hooks](https://github.com/kripod/react-hooks)

## License

[MIT](LICENSE.md)
npm package: @svelteness/kit-docs
Description: Documentation integration for SvelteKit.
Latest version: 1.1.5

# KitDocs

[![package-badge]][package]

Documentation integration for [SvelteKit][sveltekit]. You can think of it as a
[VitePress](https://vitepress.vuejs.org) alternative for Svelte.

![Demo ScreenShot](./assets/img/svelte.png)

## ✨ Features

- 📝 Vite plugin for transforming Markdown files to Svelte components with HMR support.
- 📡 Loaders and endpoint handlers for loading Markdown metadata (i.e., title, frontmatter, etc.),
  and sidebar configurations.
- 🎨 Beautiful pre-designed theme that's inspired by the [Tailwind docs](https://tailwindcss.com/docs/installation).
- :wheelchair: Accessible menus and popovers with full keyboard support, which are included
  in the default theme and also exported for your convenience.
- 🌎 Global components folder that's imported into all Markdown files
  and also mapped to custom containers (e.g., `Button.svelte` -> `:::button`).
- 🧩 Markdown extensions for header anchors, file links, YAML frontmatter, emojis, custom
  containers, table of contents, code fences, and importing code snippets.
- 🖼️ Beautiful syntax highlighting with [Shiki](https://shiki.matsu.io). This
  includes pre-designed code blocks that support titles, line highlighting, copy code button and a
  few other goodies.
- 🏗️ Prebuilt Markdown components for steps, admonitions (i.e., callouts),
  tabbed links, responsive tables, and yes/no blocks.
- 🔎 Algolia search integration that includes a clean default design.

## 📖 Documentation

You can find our documentation at [kit-docs.vercel.app](https://kitdocs.vercel.app).

[package]: https://www.npmjs.com/package/@svelteness/kit-docs
[package-badge]: https://img.shields.io/npm/v/@svelteness/kit-docs/latest
[sveltekit]: https://kit.svelte.dev
[vite]: https://vitejs.dev

## 📝 License

KitDocs is [MIT licensed](./LICENSE).
npm package: @sveltepress/docsearch
Description: Docsearch component for sveltepress
Author: Dongsheng Zhao
Latest version: 0.1.1

# @sveltepress/docsearch

Algolia DocSearch component for SveltePress.

## Installation

```bash
pnpm add @sveltepress/docsearch
```

## Usage

Import and use the Search component:

```svelte
<script>
  import Search from '@sveltepress/docsearch/Search.svelte'
</script>

<Search
  appId="YOUR_APP_ID"
  apiKey="YOUR_API_KEY"
  indexName="YOUR_INDEX_NAME"
/>
```

The component automatically handles dark mode switching by observing the `dark` class on `<html>`.

## Type Exports

```typescript
import type { DocSearchProps } from '@sveltepress/docsearch/types'
```

## License

MIT
npm package: @sveltepress/meilisearch
Description: Meilisearch integration for SveltePress
Latest version: 0.0.1

# @sveltepress/meilisearch

Meilisearch search component for SveltePress.

## Installation

```bash
pnpm add @sveltepress/meilisearch
```

## Usage

In your `vite.config.ts`:

```typescript
import { defaultTheme } from '@sveltepress/theme-default'

defaultTheme({
  search: '/path/to/your/MeilisearchWrapper.svelte',
})
```

Create a wrapper component:

```svelte
<script>
  import Search from '@sveltepress/meilisearch/Search.svelte'
</script>

<Search
  host="https://your-meilisearch-instance.com"
  apiKey="YOUR_SEARCH_API_KEY"
  indexName="docs"
/>
```

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `host` | `string` | ✅ | - | Meilisearch host URL |
| `apiKey` | `string` | ✅ | - | Search-only API key |
| `indexName` | `string` | ✅ | - | Index name to search |
| `placeholder` | `string` | ❌ | `'Search...'` | Input placeholder |
| `limit` | `number` | ❌ | `10` | Max results |

## Features

- ⌘K / Ctrl+K keyboard shortcut
- Debounced search (200ms)
- Highlighted results
- Dark mode support
- Responsive modal UI

## Type Exports

```typescript
import type { MeilisearchProps, SearchResult } from '@sveltepress/meilisearch/types'
```

## License

MIT
npm package: @svelterialjs/process
Description: A Svelte preprocessor for Svelterial.
Author: TheComputerM
Latest version: 0.0.9

<h1 align="center">@svelterialjs/process</h1>
<p>
  <a href="https://www.npmjs.com/package/@svelterialjs/process" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@svelterialjs/process.svg">
  </a>
  <a href="https://github.com/svelterialjs/integrations/tree/main/packages/preprocessor#readme" target="_blank">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
  </a>
  <a href="https://github.com/svelterialjs/integrations/graphs/commit-activity" target="_blank">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
  </a>
  <a href="https://github.com/svelterialjs/integrations/blob/master/LICENSE" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/github/license/ThComputerM/@svelterialjs/process" />
  </a>
  <a href="https://twitter.com/TheComputerM" target="_blank">
    <img alt="Twitter: TheComputerM" src="https://img.shields.io/twitter/follow/TheComputerM.svg?style=social" />
  </a>
</p>

> A Svelte preprocessor for Svelterial.

### 🏠 [Homepage](https://github.com/svelterialjs/integrations/tree/main/packages/preprocessor#readme)

## Install

```sh
npm i -D @svelterialjs/process
```

## Usage

You can use this method with **ANY TOOLING YOU PREFER** like rollup, webpack and even vite. Just add it to the preprocess method.

```js
const svelterial = require('@svelterialjs/process');
// OR
import svelterial from '@svelterialjs/process';

{
  svelte({
    preprocess: [..., svelterial({ your_config })]
  })
}
```

### Example: Rollup

```js
import svelte from 'rollup-plugin-svelte';
import svelterial from '@svelterialjs/process';

export default {
  plugins: [
    svelte({
      preprocess: svelterial({ your_config }),
    }),
  ],
};
```

## Author

👤 **TheComputerM**

- Twitter: [@TheComputerM](https://twitter.com/TheComputerM)
- Github: [@ThComputerM](https://github.com/ThComputerM)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/svelterialjs/integrations/issues). You can also take a look at the [contributing guide](https://github.com/svelterialjs/integrations/blob/master/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2021 [TheComputerM](https://github.com/ThComputerM).<br />
This project is [MIT](https://github.com/svelterialjs/integrations/blob/master/LICENSE) licensed.

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @svelterialjs/svelte-extend
Description: Generate new Svelte components by extending existing ones.
Author: TheComputerM
Latest version: 1.0.0

<h1 align="center">@svelterialjs/svelte-extend</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
  <a href="https://github.com/svelterialjs/svelte-extend#readme" target="_blank">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
  </a>
  <a href="https://github.com/svelterialjs/svelte-extend/graphs/commit-activity" target="_blank">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
  </a>
  <a href="https://github.com/svelterialjs/svelte-extend/blob/master/LICENSE" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/github/license/TheComputerM/@svelterialjs/svelte-extend" />
  </a>
  <a href="https://twitter.com/TheComputerM" target="_blank">
    <img alt="Twitter: TheComputerM" src="https://img.shields.io/twitter/follow/TheComputerM.svg?style=social" />
  </a>
</p>

> Generate new Svelte components by extending existing ones.

### 🏠 [Homepage](https://github.com/svelterialjs/svelte-extend#readme)

## Install

```sh
npm i -D @svelterialjs/svelte-extend
```

## Usage

```html
<script>
  import Component from './Component.svelte';
  import createComponent from '@svelterialjs/svelte-extend';
  const NewComponent = createComponent(Component, {value: 'hello'});
</script>

<!-- Both are the SAME -->
<Component value="hello" />
<NewComponent />
<!-- Even works with SSR! -->
```

## Author

👤 **TheComputerM**

* Website: https://thecomputerm.github.io/
* Twitter: [@TheComputerM](https://twitter.com/TheComputerM)
* Github: [@TheComputerM](https://github.com/TheComputerM)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/svelterialjs/svelte-extend/issues). You can also take a look at the [contributing guide](https://github.com/svelterialjs/svelte-extend/blob/master/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2021 [TheComputerM](https://github.com/TheComputerM).<br />
This project is [MIT](https://github.com/svelterialjs/svelte-extend/blob/master/LICENSE) licensed.

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_