open-index/open-npm huggingface dataset:
npm package: @mateothegreat/modalr
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
Latest version: 0.0.4

# Lib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.

## Code scaffolding

Run `ng generate component component-name --project lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lib`.
> Note: Don't forget to add `--project lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build lib`, go to the dist folder `cd dist/lib` and run `npm publish`.

## Running unit tests

Run `ng test lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @mateothegreat/salute
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
Latest version: 0.0.6

# Lib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.

## Code scaffolding

Run `ng generate component component-name --project lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lib`.
> Note: Don't forget to add `--project lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build lib`, go to the dist folder `cd dist/lib` and run `npm publish`.

## Running unit tests

Run `ng test lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @mateothegreat/svelte5-forms
Description: A simple form library for Svelte that uses tailwind and bits-ui.
Latest version: 1.0.4

# Svelte 5 forms w00t w00t

A simple form library for Svelte that uses tailwind and bits-ui.

![screenshot](./screenshot.png)

## Installation

```bash
npm install @mateothegreat/svelte-5-forms
```

## Usage

```svelte
<script lang="ts">
  import * as Form from "@mateothegreat/svelte5-forms";
  import { FormInstance, minLength } from "@mateothegreat/svelte5-forms";
  import { Palette } from "phosphor-svelte";

  type MyDataType1 = {
    name: string;
    foobar: {
      value: string;
      label: string;
    }[];
    agree: boolean;
  };

  const items = [
    { value: "mango", label: "Mango" },
    { value: "watermelon", label: "Watermelon" },
    { value: "apple", label: "Apple" }
  ];

  let form: FormInstance;
  let valid: boolean;

  const controls = $state([
    {
      name: "name",
      value: "mateothegreat",
      validators: [minLength(3)]
    },
    {
      name: "foobar",
      data: items,
      validators: [minLength(2)],
      displayFn: (data: (typeof items)[number]) => {
        return data.label;
      }
    },
    {
      name: "agree",
      validators: [minLength(2)]
    }
  ]);
</script>

{#snippet selectPrefix()}
  <div class="text-muted-foreground">
    <Palette class="size-6 dark:text-sky-600" />
  </div>
{/snippet}

<div class="absolute flex h-full w-full items-center justify-center gap-14 bg-zinc-900 p-10">
  <div class="w-96 rounded-lg bg-black p-4 shadow-xl">
    <Form.Root bind:form {controls}>
      <Form.Group>
        <Form.Field>
          <Form.Header.Root>
            <Form.Header.Label>Name</Form.Header.Label>
            <Form.Header.Description>Foo bar baz pow.</Form.Header.Description>
          </Form.Header.Root>
          <Form.Controls.Input {form} name="name" />
        </Form.Field>
        <Form.Field>
          <Form.Header.Root>
            <Form.Header.Label>Foo Bar</Form.Header.Label>
            <Form.Header.Description>Foo bar baz pow.</Form.Header.Description>
          </Form.Header.Root>
          <Form.Controls.Select
            {form}
            placeholder="Select something cool.."
            name="foobar"
            type="multiple"
            prefix={selectPrefix} />
        </Form.Field>
      </Form.Group>
      <Form.Group>
        <Form.Field>
          <Form.Header.Root>
            <Form.Header.Label>Name</Form.Header.Label>
            <Form.Header.Description>Foo bar baz pow.</Form.Header.Description>
          </Form.Header.Root>
          <Form.Controls.Switch {form} name="agree" class="rounded-lg border-2 border-slate-800 bg-zinc-900/40 p-2">
            <span class="text-xs text-sky-500">I agree to be awesome.</span>
          </Form.Controls.Switch>
        </Form.Field>
      </Form.Group>
    </Form.Root>
  </div>
  <div class="w-96 rounded-lg bg-black p-4 shadow-xl">
    <pre class="text-xs text-slate-500">{JSON.stringify(form.values, null, 2)}</pre>
    <pre class="text-xs text-slate-500">{JSON.stringify(form.errors, null, 2)}</pre>
    <pre class="text-xs text-slate-500">valid: {form.valid}</pre>
  </div>
</div>
```
npm package: @mateothegreat/svelte5-table
Description: Slick & lean Svelte 5 Table Component
Latest version: 1.0.29

# svelte5-table

Slick & lean Svelte 5 Table Component

![screenshot.png](screenshot.png)

**Features**:

- Svelte 5 + Snippets support💖
- Zero dependencies 0️⃣
- Built with override-able TailwindCSS classes 💄.
- Customizable header & cell renderering support.

## Installation

```bash
npm install @mateothegreat/svelte5-table
```

## Usage

The following example demonstrates how to use the `DropinTable` component where the `customHeader` and `actionsColumn` are defined as snippets:

```ts
<script lang="ts">
  import type { TableColumn } from "@mateothegreat/svelte5-table";
  import { DropinTable } from "@mateothegreat/svelte5-table";
  import { writable, type Writable } from "svelte/store";
  import "./app.pcss";

  type Component = {
    id: string;
    name: string;
    description: string;
  };

  const columns: TableColumn[] = [
    {
      field: "id",
      header: "Component ID"
    },
    {
      field: "name",
      header: "Component Name"
    },
    {
      field: "custom",
      header: customHeader
    },
    {
      field: "actions",
      classes: "w-24 flex items-center justify-center",
      renderer: actionsColumn
    }
  ];

  const components: Writable<Component[]> = writable([
    {
      id: "1",
      name: "Foo",
      custom: "This is a custom column 1",
      description: "A foo component"
    },
    {
      id: "2",
      name: "Bar",
      custom: "This is a custom column 2",
      description: "A bar component"
    }
  ]);

  let selections = writable([]);
  selections.set([$components[0].id]);
</script>

{#snippet customHeader()}
  <div class="flex justify-center rounded-lg border border-pink-500 p-1 text-indigo-500">My Custom Header</div>
{/snippet}

{#snippet actionsColumn(row: any)}
  <button class="rounded-md bg-blue-500 px-3 py-1 text-white">
    Edit #{row.id}
  </button>
{/snippet}

<div class="absolute flex h-full w-full flex-col gap-5 bg-black p-20 text-slate-500">
  <DropinTable config={{ selection: { all: true } }} {columns} id="id" data={$components} bind:selections />
  <div class="flex flex-col gap-2 rounded-md border border-slate-700 p-2">
    <div class="text-sm font-medium">Selections:</div>
    <pre>{JSON.stringify($selections)}</pre>
  </div>
</div>
```