open-index/open-npm huggingface dataset:
npm package: @svelte.codes/drawer
Description: No wrapper components, no extra markup, no dependencies, just forms.
Latest version: 0.0.4

# Svelte Form Manager

No wrapper components, no extra markup, no dependencies, just forms.

## Installation

```bash
npm install @svelte.codes/form-manager
```

## Usage

```ts
<script lang="ts">
  import { Form, FormContainer, FormTextField, email, minLength } from "@svelte.codes/form-manager";

  const form = new Form({
    name: "test",
    fields: {
      email: {
        name: "email",
        label: "Email",
        placeholder: "Email",
        validators: [email]
      },
      firstName: {
        name: "firstName",
        label: "firstName",
        placeholder: "firstName",
        validators: [minLength(3)]
      },
      lastName: {
        name: "lastName",
        label: "lastName",
        placeholder: "lastName"
      }
    }
  });

  $: errors = form.fields.firstName.errors;
  $: values = form.values;
</script>

<FormContainer {form}>
  <FormTextField name="email" {form} />
  <FormTextField name="firstName" {form} />
  <FormTextField name="lastName" {form} />
  <button
    on:click={() => {
      const result = form.submit();
      console.log(result);
    }}>Submit</button
  >
</FormContainer>

<div>
  values: {JSON.stringify($values)}
</div>
<div>
  errors: {$errors?.join(", ")}
</div>

```
npm package: @svelte.codes/form-manager
Description: No wrapper components, no extra markup, no dependencies, just forms.
Latest version: 0.7.1

# Svelte Form Manager

No wrapper components, no extra markup, no dependencies, just forms.

## Installation

```bash
npm install @svelte.codes/form-manager
```

## Usage

```ts
<script lang="ts">
  import { Form, FormContainer, FormTextField, email, minLength } from "@svelte.codes/form-manager";

  const form = new Form({
    name: "test",
    fields: {
      email: {
        name: "email",
        label: "Email",
        placeholder: "Email",
        validators: [email]
      },
      firstName: {
        name: "firstName",
        label: "firstName",
        placeholder: "firstName",
        validators: [minLength(3)]
      },
      lastName: {
        name: "lastName",
        label: "lastName",
        placeholder: "lastName"
      }
    }
  });

  $: errors = form.fields.firstName.errors;
  $: values = form.values;
</script>

<FormContainer {form}>
  <FormTextField name="email" {form} />
  <FormTextField name="firstName" {form} />
  <FormTextField name="lastName" {form} />
  <button
    on:click={() => {
      const result = form.submit();
      console.log(result);
    }}>Submit</button
  >
</FormContainer>

<div>
  values: {JSON.stringify($values)}
</div>
<div>
  errors: {$errors?.join(", ")}
</div>

```
npm package: @svelte.codes/forms
Description: No wrapper components, no extra markup, no dependencies, just forms.
Latest version: 0.0.26

# Svelte Form Manager

No wrapper components, no extra markup, no dependencies, just forms.

## Installation

```bash
npm install @svelte.codes/form-manager
```

## Usage

```ts
<script lang="ts">
  import { Form, FormContainer, FormTextField, email, minLength } from "@svelte.codes/form-manager";

  const form = new Form({
    name: "test",
    fields: {
      email: {
        name: "email",
        label: "Email",
        placeholder: "Email",
        validators: [email]
      },
      firstName: {
        name: "firstName",
        label: "firstName",
        placeholder: "firstName",
        validators: [minLength(3)]
      },
      lastName: {
        name: "lastName",
        label: "lastName",
        placeholder: "lastName"
      }
    }
  });

  $: errors = form.fields.firstName.errors;
  $: values = form.values;
</script>

<FormContainer {form}>
  <FormTextField name="email" {form} />
  <FormTextField name="firstName" {form} />
  <FormTextField name="lastName" {form} />
  <button
    on:click={() => {
      const result = form.submit();
      console.log(result);
    }}>Submit</button
  >
</FormContainer>

<div>
  values: {JSON.stringify($values)}
</div>
<div>
  errors: {$errors?.join(", ")}
</div>

```
npm package: @svelte.codes/modal-manager
Description: Manage modals like a boss 🚀
Latest version: 0.0.25

# Svelte Modal Manager

Manage modals like a boss 🚀

No wrapper components, no extra markup, no dependencies, just modals.

* Comes with a backdrop overlay.
* Handles multiple modals at once.
* Handles multiple instances of the same modal at once.
* Access the modal manager from within your modal component.

## Installation

```bash
npm install @svelte.codes/modal-manager
```

## Usage

### Manager component

#### `ModalConfig` Properties

| name                   | default  | description                   |
|------------------------|----------|-------------------------------|
| `name`                 | required | The name of the modal.        |
| `classes`              | optional | Extra css classes to add.     |
| `component`            | required | Svelte component reference.   |
| `closeIcon`            | optional | Show a close icon, top right. |
| `closeOnEscape`        | optional | Close modal on escape key.    |
| `closeOnExternalClick` | optional | Close modal on outside click. |

#### Opening a modal

The `manager.open()` method takes a `ModalConfig` object as an argument (see above):

```ts
<script lang="ts">
  import { ModalManager } from "@svelte.codes/modal-manager";
  import TestComponent from "../../lib/components/test-component.svelte";

  const manager = new ModalManager();

  manager.open({
    name: "test-modal-1",
    component: TestComponent,
    classes: "bg-slate-300/50 p-10"
  });
</script>

I'm inside a modal via modal manager!
```

When the modal manager instantiates your `component`, it will pass in a `ModalInstance` object as a prop
so you can interact with the manager from within your component.

### Client component

From inside your client component you can interact with the manager via the `instance` prop.

```ts
<script lang="ts">
  import { ModalInstance } from "@svelte.codes/modal-manager";

  export let instance: ModalInstance;
</script>

<div class="bg-slate-300 p-10">
  <h1 class="text-3xl font-bold underline">this is inside a modal</h1>
  <button on:click={() => instance.manager.close(instance.config.name)}>close</button>
</div>
```
npm package: @sveltebase/state
Description: Small state helpers for Svelte 5.
Latest version: 0.4.6

# `@sveltebase/state`

Small state helpers for Svelte 5.

This package exports two classes:

- `State<T>`: simple reactive in-memory state
- `PersistentState<TSchema>`: reactive state backed by cookies and validated with a Standard Schema-compatible validator

## Install

~~~bash
bun add @sveltebase/state svelte
~~~

If you want to use `zod` as your schema library:

~~~bash
bun add zod
~~~

## Exports

- `State`
- `PersistentState`

## `State`

A tiny wrapper around a value.

~~~ts
import { State } from "@sveltebase/state";

const count = new State(0);

count.current = 1;
count.set((value) => value + 1);

console.log(count.current); // 2
~~~

### API

- `new State(initialValue)`
- `state.current`
- `state.set(updater)`

## `PersistentState`

Cookie-backed state with schema validation.

It:

- reads from cookies
- validates with a Standard Schema-compatible validator
- writes updates back to cookies
- can load the initial value during SSR

~~~ts
import { z } from "zod";
import { PersistentState } from "@sveltebase/state";

const themeSchema = z.enum(["light", "dark"]).default("light");

export const theme = new PersistentState("theme", themeSchema);

theme.current = "dark";
theme.set((value) => (value === "dark" ? "light" : "dark"));
~~~

## SSR setup

For SSR, return all cookies from `+layout.server.ts`, then initialize the state with `state.init(() => data.cookies)` so it loads the server value first.

### `src/routes/+layout.server.ts`

~~~ts
export async function load({ cookies }) {
  return {
    cookies: cookies.getAll()
  };
}
~~~

### `src/routes/+layout.svelte`

~~~svelte
<script lang="ts">
  import type { LayoutData } from "./$types";
  import { locale } from "$lib/state";

  let { data }: { data: LayoutData } = $props();

  locale.init(() => data.cookies);
</script>

<slot />
~~~

### `src/lib/state.ts`

~~~ts
import { z } from "zod";
import { PersistentState } from "@sveltebase/state";

const localeSchema = z.enum(["en", "uz"]).default("en");

export const locale = new PersistentState("locale", localeSchema);
~~~

With this setup:

- on the server, `init` reads from `data.cookies`
- the initial SSR render uses that cookie value
- in the browser, updates keep syncing back to cookies

## API

### `new PersistentState(key, schema)`

Creates a persistent state value.

- `key`: cookie name
- `schema`: Standard Schema-compatible validator used for parsing and validation, such as a `zod` schema

### `persistentState.current`

Gets or sets the current value.

### `persistentState.set(updater)`

Updates the current value.

### `persistentState.init(cookies)`

Loads the value from server cookies.

It accepts either:

- a cookie array
- a getter function like `() => data.cookies`

Expected cookie shape:

~~~ts
type Cookie = {
  name: string;
  value: string;
};
~~~

## Notes

- `PersistentState` stores JSON in cookies
- invalid cookie data falls back to the schema result
- `init(...)` is for server-side initialization
- any Standard Schema-compatible library can be used here, including `zod`
- this package is designed for Svelte 5