open-index/open-npm huggingface dataset:
npm package: @svelte-five/inspection
Description: Dev mode, frontend logging library for svelte with support for elimination in production.
Author: Murat Gözel
Latest version: 1.0.0

# @svelte-five/inspection
[![NPM Version](https://img.shields.io/npm/v/@svelte-five/inspection.svg?style=flat)](https://www.npmjs.com/package/@svelte-five/inspection)
![](https://img.shields.io/npm/dm/@svelte-five/inspection.svg?style=flat)

Dev mode, frontend logging library for svelte with support for elimination in production.

A small logging utility for frontend development in svelte. It prints nothing in non-dev environments and functions get eliminated during bundling for non-dev environments.

![Screenshot of the library in action](https://github.com/svelte-five/inspection/blob/main/assets/screenshot1.png?raw=true)

## Usage
Install:
```shell
pnpm add @svelte-five/inspection
```

Import the relevant logging method:
```ts
import { info, debug, warn, error } from '@svelte-five/inspection'

debug('The identifier is 1')
info('Loaded local storage.')
error(new Error('Failed to fetch data.'))
warn({ msg: 'This is a warning.' })
```

These functions will be eliminated by your builder in production and in case your builder doesn't support auto elimination, they will produce no output based on the following condition:
```ts
const isActive = import.meta.env['VITE_SVELTE_INSPECTION'] || import.meta.env['DEV']
```

## Contributing
If you're interested in contributing, read the [CONTRIBUTING.md](https://github.com/muratgozel/muratgozel/blob/main/CONTRIBUTING.md) first, please.

---

Thanks for the attention 💙 Any amount of support on [patreon](https://patreon.com/muratgozel?utm_medium=organic&utm_source=github_repo&utm_campaign=github&utm_content=join_link) or [github](https://github.com/sponsors/muratgozel) will return you back as bug fixes, new features and bits and bytes.
npm package: @svelte-frens/ui-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.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 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: @svelte-fui/core
Description: An implementation of Microsoft Fluent UI v9 for Svelte framework
Author: ryu-man
Latest version: 1.0.0-alpha.20

# @svelte-fui/core

Contains all the necessary UI component of the Fluent Design System (Still under development) 

# Usage

Add @fluentui/react-components to a project:

```shell
// pnpm
pnpm install @svelte-fui/core

//npm
npm install @svelte-fui/core
```

To use Fluent design for Sveltekit app you have to make `App` component at the top level route, ex: `/routes/+layout.svelte`

```html
<script>
	import { App, Button } from '@svelte-fui/core';
	
	// This is ude in tailwindcss project or you can ignore and use your tailwindcss setup stylesheet, it should work fine
	import '@svelte-fui/core/styles/root';

	// Uncomment the file import if you want to use the library outside a tailwindcss project
	//import '@svelte-fui/core/styles/compiled';
</script>

<App>
	<Button>Hello World!</Button>
</App>
```

# Using FUI preset fot TailwindCSS 

This will allow you to integrate FUI tokens into your TailwindCSS config.


```bash
// pnpm
pnpm install @svelte-fui/tailwindcss

//npm
npm install @svelte-fui/tailwindcss
```

```js
// tailwindcss.config.js

import { fuiPreset } from '@svelte-fui/tailwindcss';

/** @type {import('tailwindcss').Config} */
export default {
	presets: [fuiPreset],
	content: ['./src/**/*.{html,js,svelte, stories.svelte, ts}']
};
```

Now in your `.svelte` file you can use FUI tokens as tw classes:

```html
<!-- src/routes/+page.svelte -->
<script>
  // some logic goes here
</script>

<!--  -->

<div class="bg-neutral-background-1 text-neutral-foreground-1 font-base-400">
    <!-- UI contents goes here -->
</div>
```
# Use Pre-Defined Themes

```bash
// pnpm
pnpm install @svelte-fui/themes

//npm
npm install @svelte-fui/themes
```
```html
<script>
  import { webLightTheme, webDarkTheme } from '@svelte-fui/themes';
  import { App, Button } from '@svelte-fui/core';

	let theme = webLightTheme;

	onMount(() => {
		function handler(schemeMedia) {
			theme = schemeMedia.matches ? webLightTheme : webDarkTheme;
		}

		const schemeMedia = matchMedia('(prefers-color-scheme: light)');

		schemeMedia.addEventListener('change', handler);

		theme = schemeMedia.matches ? webLightTheme : webDarkTheme;

		return () => {
			schemeMedia.removeEventListener('change', handler);
		};
	});
</script>

<App {theme}>
	<Button>Fluent UI for Svelte</Button>
</App>
```
npm package: @svelte-fui/icons
Description: Fluent UI Icons Set for svelte-fui
Author: ryu-man
Latest version: 0.0.1

# Svelte + Vite

This template should help get you started developing with Svelte in Vite.

## Recommended IDE Setup

[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

## Need an official Svelte framework?

Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.

## Technical considerations

**Why use this over SvelteKit?**

- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.

This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.

Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.

**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**

Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.

**Why include `.vscode/extensions.json`?**

Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.

**Why enable `checkJs` in the JS template?**

It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.

**Why is HMR not preserving my local component state?**

HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).

If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.

```js
// store.js
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```
npm package: @svelte-fui/tailwindcss
Description: This project's Tailwind CSS preset for the Fluent Design System makes it simple to create modern, accessible, and customizable user interfaces. This integration enables developers to construct the desired look and feel without spending hours writing code.
Latest version: 0.1.9

# @svelte-fui/tailwindcss

This project's Tailwind CSS preset for the Fluent Design System makes it simple to create modern, accessible, and customizable user interfaces. This integration enables developers to construct the desired look and feel without spending hours writing code. Using Tailwind's predefined classes, developers can readily modify the application's colors, fonts, sizes, and other design elements.


# Usage

First, install `@svelte-fui/tailwindcss`:

```shell
// pnpm
pnpm install @svelte-fui/tailwindcss

//npm
npm install @svelte-fui/tailwindcss
```

Then, you add it to your tailwindcss's presets array:

```js
// tailwindcss.config.js

import { fuiPreset } from '@svelte-fui/tailwindcss';

/** @type {import('tailwindcss').Config} */
export default {
	presets: [fuiPreset],
	content: ['./src/**/*.{html,js,svelte, stories.svelte, ts}']
};
```

```html
<script>
	import { App, Button } from '@svelte-fui/core';
</script>

<App>
	<div class="text-neutral-foreground-1 text-base-400" >This a simple label</div>
	<Button>Hello World!</Button>
</App>
```
npm package: @svelte-fui/theme
Description: The `@svelte-fui/theme` package empowers users to craft tailor-made themes for their Svelte Fluent UI applications.
Latest version: 0.1.4

# @svelte-fui/theme

The `@svelte-fui/theme` package empowers users to craft tailor-made themes for their Svelte Fluent UI applications. 

This grants them effortless control over the visual aesthetics of their app, while maintaining seamless integration with Fluent UI's core components. 

# Usage

Please proceed with the package installation.

```shell
// pnpm
pnpm install @svelte-fui/theme

//npm
npm install @svelte-fui/theme
```
npm package: @svelte-fui/themes
Description: Svelte FUI Themes offers a comprehensive range of pre-designed, accessible, and customizable UI themes for your Svelte applications. This library boasts the following features:
Latest version: 0.1.3

# @svelte-fui/themes

Svelte FUI Themes offers a comprehensive range of pre-designed, accessible, and customizable UI themes for your Svelte applications. This library boasts the following features:

- Ready-made stylesheets to expedite your UI development process.
- User-friendly and intuitive interface for seamless integration.

Supported Themes:

- [x]  Web light
- [x]  Web dark
- [ ]  Teams light
- [ ]  Teams dark

# Usage

To begin, install Fluent UI for Svelte.

```shell
// pnpm
pnpm install @svelte-fui/themes

//npm
npm install @svelte-fui/themes
```

Then import the required theme from `@svelte-fui/themes` and passing it as the `theme` prop to the `App` component. For a seamless transition, consider attaching a listener to switch themes based on your system's color scheme.

Moreover, you can leverage the power of local storage and Svelte store to remember user preferences, ensuring a personalized and consistent experience across sessions.

```html
<script>
	import { webLightTheme, webDarkTheme } from '@svelte-fui/themes';
	import { App, Button } from '@svelte-fui/core';

	let theme = webLightTheme;

	onMount(() => {
		function handler(schemeMedia: MediaQueryListEvent) {
			theme = schemeMedia.matches ? webLightTheme : webDarkTheme;
		}

		const schemeMedia = matchMedia('(prefers-color-scheme: light)');

		schemeMedia.addEventListener('change', handler);

		theme = schemeMedia.matches ? webLightTheme : webDarkTheme;

		return () => {
			schemeMedia.removeEventListener('change', handler);
		};
	});
</script>

<App {theme}>
	<Button>Fluent UI for Svelte</Button>
</App>
```
npm package: @svelte-hook-form/rules
Description: Form validation rules of `svelte-hook-form`.
Author: si3nloong
Latest version: 0.1.1

# @svelte-hook-form/rules

> Form validation rules of `svelte-hook-form`.

<p>

[![npm](https://img.shields.io/npm/v/@svelte-hook-form/rules.svg)](https://www.npmjs.com/package/@svelte-hook-form/rules)
[![download](https://img.shields.io/npm/dw/@svelte-hook-form/rules.svg)](https://www.npmjs.com/package/@svelte-hook-form/rules)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/%40responsive-ui%2Faccordion)](https://bundlephobia.com/result?p=@svelte-hook-form/rules)
[![LICENCE](https://img.shields.io/github/license/si3nloong/svelte-hook-form)](https://github.com/si3nloong/svelte-hook-form/blob/master/LICENSE)

</p>

## Install

```console
npm install @svelte-hook-form/rules
```

or

```console
yarn add @svelte-hook-form/rules
```
npm package: @svelte-i18n/cli
Description: CLI tool for svelte-i18n
Latest version: 1.0.0

# @svelte-i18n/cli

CLI tool for [@svelte-i18n/core](https://github.com/svelte-intl/core). Generates a TypeScript type definition file from a flat JSON translation file, giving you full type-safety and autocompletion on your translation keys.

## Installation

```bash
npx @svelte-i18n/cli generate-types --input <path-or-url>
```

Or install globally:

```bash
npm install -g @svelte-i18n/cli
svelte-i18n generate-types --input <path-or-url>
```

## Commands

### `generate-types`

Reads a flat JSON translation file (local or remote) and generates an `I18nDictionary` type containing all the translation keys.

```bash
svelte-i18n generate-types --input <path-or-url> [--output <path>]
```

| Option            | Description                         | Default             |
| ----------------- | ----------------------------------- | ------------------- |
| `--input <path>`  | Path to a local JSON file or a URL  | _(required)_        |
| `--output <path>` | Path for the generated `.d.ts` file | `./i18n-types.d.ts` |

**Examples:**

```bash
# From a local file
svelte-i18n generate-types --input src/locales/en.json

# From a URL (e.g. a dev server endpoint)
svelte-i18n generate-types --input https://example.com/api/locales/en --output src/i18n-types.d.ts
```

**Example output** (`i18n-types.d.ts`):

```ts
export type I18nDictionary = {
    Dashboard: string;
    'Welcome, {firstName} {lastName}!': string;
    // ...
};
```