open-index/open-npm huggingface dataset:
npm package: @formosaic/antd
Description: Ant Design v5 field components for @formosaic/core
Author: bghcore
Latest version: 1.4.1

# @formosaic/antd

Ant Design v5 field components for [@formosaic/core](https://www.npmjs.com/package/@formosaic/core).

This package provides 27 field types using **Ant Design v5** components, with `dayjs` for date handling. Includes 18 native antd components and 9 semantic HTML fallbacks. All fields integrate with `@formosaic/core`'s rules engine and form orchestration.

## Installation

```bash
npm install @formosaic/antd @formosaic/core antd dayjs react react-dom react-hook-form
```

## Quick Start

```tsx
import { Formosaic, RulesEngineProvider, InjectedFieldProvider } from "@formosaic/core";
import { createAntdFieldRegistry } from "@formosaic/antd";

const fields = createAntdFieldRegistry();

function App() {
  return (
    <RulesEngineProvider>
      <InjectedFieldProvider fields={fields}>
        <Formosaic
          formConfig={myFormConfig}
          onSave={handleSave}
        />
      </InjectedFieldProvider>
    </RulesEngineProvider>
  );
}
```

## Field Components

### Editable Fields (12)

| Component | antd Component | Type Key |
|---|---|---|
| `Textbox` | `Input` | `Textbox` |
| `Number` | `InputNumber` | `Number` |
| `Toggle` | `Switch` | `Toggle` |
| `Dropdown` | `Select` | `Dropdown` |
| `MultiSelect` | `Select` (`mode="multiple"`) | `Multiselect` |
| `DateControl` | `DatePicker` (dayjs) | `DateControl` |
| `Slider` | `Slider` | `Slider` |
| `RadioGroup` | `Radio.Group` | `RadioGroup` |
| `CheckboxGroup` | `Checkbox.Group` | `CheckboxGroup` |
| `Textarea` | `Input.TextArea` | `Textarea` |
| `DynamicFragment` | `<input type="hidden">` | `DynamicFragment` |

### Read-Only Fields (1)

| Component | Renders | Type Key |
|---|---|---|
| `ReadOnly` | `ReadOnlyText` | `ReadOnly` |

## Custom Fields

You can extend or replace any field in the registry:

```tsx
import { createAntdFieldRegistry } from "@formosaic/antd";

const fields = createAntdFieldRegistry();

// Replace the textbox with your own component
fields["Textbox"] = <MyCustomTextbox />;

// Add a brand new field type
fields["PhoneNumber"] = <MyPhoneInput />;
```

## Compared to Other Adapters

| Feature | `antd` | `fluent` | `mui` | `headless` | `chakra` | `mantine` |
|---|---|---|---|---|---|---|
| UI framework | Ant Design v5 | Fluent UI v9 | Material UI v5/v6 | None | Chakra UI v3 | Mantine v7 |
| Date library | dayjs | - | - | Native | Native | Native |
| Bundle size | Includes antd | Includes Fluent | Includes MUI | Minimal | Includes Chakra | Includes Mantine |
| Styling | antd tokens | Fluent tokens | MUI theme | Your choice | Chakra tokens | Mantine theme |

## License

MIT
npm package: @formosaic/designer
Description: Visual form builder for @formosaic/core
Author: bghcore
Latest version: 1.0.1

# @formosaic/designer

Visual form builder for `@formosaic/core`. Drag-and-drop fields, configure properties, build rules, and export valid `IFormConfig` v2 JSON.

## Installation

```bash
npm install @formosaic/designer @formosaic/core react react-dom
```

## Usage

```tsx
import { DesignerProvider, FormDesigner } from "@formosaic/designer";
import "@formosaic/designer/dist/styles.css"; // or import in your CSS

function App() {
  return (
    <DesignerProvider>
      <FormDesigner style={{ height: "100vh" }} />
    </DesignerProvider>
  );
}
```

## Features

- **Field Palette** -- drag field types (Textbox, Dropdown, Toggle, etc.) onto the canvas
- **Form Canvas** -- reorder fields via drag-and-drop, select to edit, delete or duplicate
- **Field Config Panel** -- edit label, type, required/hidden/readOnly, default value, options, validation rules, and arbitrary config
- **Rule Builder** -- create declarative rules with the full v2 condition system (15 operators + AND/OR/NOT)
- **Wizard Configurator** -- organize fields into wizard steps with options for linear navigation and validation
- **Config Preview** -- live JSON preview of the current `IFormConfig` with copy button
- **Import / Export** -- paste or upload JSON to import, download as file to export
- **Undo / Redo** -- full undo/redo support for all changes

## Using the exported config

The designer produces a standard `IFormConfig` v2 object:

```tsx
import { useDesigner } from "@formosaic/designer";

function SaveButton() {
  const { exportConfig } = useDesigner();

  const handleSave = () => {
    const config = exportConfig();
    // config is a valid IFormConfig v2 object
    // Send to your API, save to localStorage, etc.
    console.log(JSON.stringify(config, null, 2));
  };

  return <button onClick={handleSave}>Save Form</button>;
}
```

## Customization

All styles use CSS custom properties prefixed with `--designer-`. Override them to match your theme:

```css
:root {
  --designer-primary: #0078d4;
  --designer-bg: #f5f5f5;
  --designer-surface: #ffffff;
  --designer-font-family: "Segoe UI", sans-serif;
}
```

## Components

| Component | Description |
|-----------|-------------|
| `DesignerProvider` | Context provider (wrap your app) |
| `FormDesigner` | Main layout with all tabs |
| `FieldPalette` | Draggable field type grid |
| `FormCanvas` | Drop zone with field cards |
| `FieldConfigPanel` | Property editor for selected field |
| `RuleBuilder` | Rule condition + effect editor |
| `ConfigPreview` | Read-only JSON preview |
| `WizardConfigurator` | Wizard step manager |
| `ImportExport` | JSON import/export |

## Hooks

| Hook | Description |
|------|-------------|
| `useDesigner()` | Access designer state and all action helpers |
npm package: @formosaic/heroui
Description: HeroUI field components for @formosaic/core
Author: bghcore
Latest version: 1.4.1

# @formosaic/heroui

HeroUI field components for [@formosaic/core](https://www.npmjs.com/package/@formosaic/core).

This package provides 27 field types using **HeroUI**-styled semantic HTML components. All fields integrate with `@formosaic/core`'s rules engine and form orchestration.

> **Implementation note:** Field components use semantic HTML elements with appropriate ARIA attributes rather than `@heroui/react` components directly. This ensures compatibility across all environments including SSR and test runners (jsdom). In production, you can wrap the form in a `HeroUIProvider` for theme integration.

## Installation

```bash
npm install @formosaic/heroui @formosaic/core @heroui/react @internationalized/date react react-dom react-hook-form
```

## Quick Start

```tsx
import { Formosaic, RulesEngineProvider, InjectedFieldProvider } from "@formosaic/core";
import { createHeroUIFieldRegistry } from "@formosaic/heroui";

const fields = createHeroUIFieldRegistry();

function App() {
  return (
    <RulesEngineProvider>
      <InjectedFieldProvider fields={fields}>
        <Formosaic
          formConfig={myFormConfig}
          onSave={handleSave}
        />
      </InjectedFieldProvider>
    </RulesEngineProvider>
  );
}
```

## Field Components

### Editable Fields (12)

| Component | HTML Element | Type Key |
|---|---|---|
| `Textbox` | `<input type="text">` | `Textbox` |
| `Number` | `<input type="number">` | `Number` |
| `Toggle` | `<input type="checkbox" role="switch">` | `Toggle` |
| `Dropdown` | `<select>` | `Dropdown` |
| `MultiSelect` | `<select multiple>` | `Multiselect` |
| `DateControl` | `<input type="date">` | `DateControl` |
| `Slider` | `<input type="range">` | `Slider` |
| `RadioGroup` | `<input type="radio">` (group) | `RadioGroup` |
| `CheckboxGroup` | `<input type="checkbox">` (group) | `CheckboxGroup` |
| `Textarea` | `<textarea>` | `Textarea` |
| `DynamicFragment` | `<input type="hidden">` | `DynamicFragment` |

### Read-Only Fields (1)

| Component | Renders | Type Key |
|---|---|---|
| `ReadOnly` | `ReadOnlyText` | `ReadOnly` |

## Custom Fields

You can extend or replace any field in the registry:

```tsx
import { createHeroUIFieldRegistry } from "@formosaic/heroui";

const fields = createHeroUIFieldRegistry();

// Replace the textbox with your own component
fields["Textbox"] = <MyCustomTextbox />;

// Add a brand new field type
fields["PhoneNumber"] = <MyPhoneInput />;
```

## Compared to Other Adapters

| Feature | `heroui` | `fluent` | `mui` | `headless` | `antd` | `chakra` | `mantine` |
|---|---|---|---|---|---|---|---|
| UI framework | HeroUI v2 | Fluent UI v9 | Material UI v5/v6 | None | Ant Design v5 | Chakra UI v3 | Mantine v7 |
| Date library | Native | - | - | Native | dayjs | Native | Native |
| Bundle size | Minimal | Includes Fluent | Includes MUI | Minimal | Includes antd | Includes Chakra | Includes Mantine |
| Styling | Your choice | Fluent tokens | MUI theme | Your choice | antd tokens | Chakra tokens | Mantine theme |

## License

MIT
npm package: @formosaic/mantine
Description: Mantine v7 field components for @formosaic/core
Author: bghcore
Latest version: 1.4.1

# @formosaic/mantine

Mantine v7 field components for [@formosaic/core](https://www.npmjs.com/package/@formosaic/core).

This package provides 27 field types using **Mantine v7** components. Includes 17 native Mantine components (Rating, Autocomplete, DateTimePicker, FileInput, ColorInput for Tier 2) and 10 semantic HTML fallbacks.

## Installation

```bash
npm install @formosaic/mantine @formosaic/core @mantine/core @mantine/dates react react-dom react-hook-form
```

## Quick Start

```tsx
import { Formosaic, RulesEngineProvider, InjectedFieldProvider } from "@formosaic/core";
import { createMantineFieldRegistry } from "@formosaic/mantine";

// Required: import Mantine's core styles
import "@mantine/core/styles.css";

const fields = createMantineFieldRegistry();

function App() {
  return (
    <RulesEngineProvider>
      <InjectedFieldProvider fields={fields}>
        <Formosaic
          formConfig={myFormConfig}
          onSave={handleSave}
        />
      </InjectedFieldProvider>
    </RulesEngineProvider>
  );
}
```

## Field Components

### Editable Fields (12)

| Component | Mantine Component | Type Key |
|---|---|---|
| `Textbox` | `TextInput` | `Textbox` |
| `Number` | `NumberInput` | `Number` |
| `Toggle` | `Switch` | `Toggle` |
| `Dropdown` | `Select` | `Dropdown` |
| `MultiSelect` | `MultiSelect` | `Multiselect` |
| `DateControl` | Native `<input type="date">` | `DateControl` |
| `Slider` | `Slider` | `Slider` |
| `RadioGroup` | `Radio.Group` + `Radio` | `RadioGroup` |
| `CheckboxGroup` | `Checkbox.Group` + `Checkbox` | `CheckboxGroup` |
| `Textarea` | `Textarea` | `Textarea` |
| `DynamicFragment` | `<input type="hidden">` | `DynamicFragment` |

### Read-Only Fields (1)

| Component | Renders | Type Key |
|---|---|---|
| `ReadOnly` | `ReadOnlyText` | `ReadOnly` |

## Custom Fields

You can extend or replace any field in the registry:

```tsx
import { createMantineFieldRegistry } from "@formosaic/mantine";

const fields = createMantineFieldRegistry();

// Replace the textbox with your own component
fields["Textbox"] = <MyCustomTextbox />;

// Add a brand new field type
fields["PhoneNumber"] = <MyPhoneInput />;
```

## Compared to Other Adapters

| Feature | `mantine` | `fluent` | `mui` | `headless` | `antd` | `chakra` |
|---|---|---|---|---|---|---|
| UI framework | Mantine v7 | Fluent UI v9 | Material UI v5/v6 | None | Ant Design v5 | Chakra UI v3 |
| Date library | Native | - | - | Native | dayjs | Native |
| Bundle size | Includes Mantine | Includes Fluent | Includes MUI | Minimal | Includes antd | Includes Chakra |
| Styling | Mantine theme | Fluent tokens | MUI theme | Your choice | antd tokens | Chakra tokens |

## License

MIT
npm package: @formosaic/radix
Description: Radix UI primitives field components for @formosaic/core
Author: bghcore
Latest version: 1.4.1

# @formosaic/radix

Radix UI primitives adapter for `@formosaic/core`. Provides 28 accessible, unstyled field components using [Radix UI](https://www.radix-ui.com/) primitives (6 native) and semantic HTML (22 fallbacks). Ideal for Tailwind CSS and shadcn/ui projects.

## Installation

```bash
npm install @formosaic/radix @formosaic/core react react-dom react-hook-form \
  @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-select \
  @radix-ui/react-slider @radix-ui/react-switch
```

## Quick Start

```tsx
import { Formosaic, RulesEngineProvider, InjectedFieldProvider } from "@formosaic/core";
import { createRadixFieldRegistry } from "@formosaic/radix";

const fields = createRadixFieldRegistry();

function App() {
  return (
    <RulesEngineProvider>
      <InjectedFieldProvider fields={fields}>
        <Formosaic config={formConfig} />
      </InjectedFieldProvider>
    </RulesEngineProvider>
  );
}
```

## Field Implementations

| Field | Implementation |
|-------|---------------|
| Textbox | `<input type="text">` (semantic HTML) |
| Number | `<input type="number">` (semantic HTML) |
| Toggle | `@radix-ui/react-switch` |
| Dropdown | `@radix-ui/react-select` |
| MultiSelect | `<select multiple>` (semantic HTML) |
| DateControl | `<input type="date">` (semantic HTML) |
| Slider | `@radix-ui/react-slider` |
| RadioGroup | `@radix-ui/react-radio-group` |
| CheckboxGroup | `@radix-ui/react-checkbox` |
| Textarea | `<textarea>` (semantic HTML) |
| DynamicFragment | `<input type="hidden">` |
| ReadOnly | `<span>` |

## Styling

This adapter ships with **no styles**. Radix primitives expose `data-state` attributes and CSS class names for custom styling. Use Tailwind CSS, CSS modules, or plain CSS to style components.

All fields emit `data-field-type` and `data-field-state` attributes for targeted styling:

```css
[data-field-type="Toggle"] { /* ... */ }
[data-field-state="error"] { /* ... */ }
```

## shadcn/ui Integration

This adapter is the recommended base for shadcn/ui projects. See the [shadcn integration guide](https://bghcore.github.io/formosaic/adapters/shadcn) for details.

## License

MIT
npm package: @formql/core
Description: FormQL - A framework for building dynamic forms
Author: Juan Stoppa
Latest version: 0.5.0

<p align="center"><a href="https://formql.io"><img src="https://formql.io/assets/formql-logo-github.png" alt="FormQL - A framework for bulding dynamic forms" style="height:200px"></a></p>

FormQL is a framework for building dynamic forms in Angular. It comes with an editor that offers a drag and drop functionality to make it easier for non technical users to maintain the forms as well as  extensible APIs for allowing developers to extend the functionality with custom components. 

FormQL comes with the following features: 

- **CSS grid templating**: define the structure of your form with CSS grid standards.
- **Dynamic validation**: add rules to dynamically make fields mandatory, read only or hidden.
- **Calculated fields**: add logic to perform calculation based on the values in other fields.
- **Field formatting with Text-Mask**: includes the ability to format fields such as currencies and dates.
- **Extensible**: ability to extend the forms with your own custom components.

# Demo
- Formql.io: https://formql.io/example/#/form/contactInfo/edit
- Stackblitz: https://stackblitz.com/edit/formql-example-material

# Documentation
https://github.com/formql/formql/wiki

# How to install it in your project?
```bash
npm install @formql/core --save
```

## Contact us
- Website - [https://formql.io](https://formql.io/)
- Twitter - [@formql_io](https://twitter.com/formql_io)

## License
FormQL is [MIT licensed](LICENSE).
npm package: @formql/editor
Description: FormQL - A framework for building dynamic forms
Author: Juan Stoppa
Latest version: 0.5.0

<p align="center"><a href="https://formql.io"><img src="https://formql.io/assets/formql-logo-github.png" alt="FormQL - A framework for bulding dynamic forms" style="height:200px"></a></p>

FormQL is a framework for building dynamic forms in Angular. It comes with an editor that offers a drag and drop functionality to make it easier for non technical users to maintain the forms as well as  extensible APIs for allowing developers to extend the functionality with custom components. 

FormQL comes with the following features: 

- **CSS grid templating**: define the structure of your form with CSS grid standards.
- **Dynamic validation**: add rules to dynamically make fields mandatory, read only or hidden.
- **Calculated fields**: add logic to perform calculation based on the values in other fields.
- **Field formatting with Text-Mask**: includes the ability to format fields such as currencies and dates.
- **Extensible**: ability to extend the forms with your own custom components.

# Demo
- Formql.io: https://formql.io/example/#/form/contactInfo/edit
- Stackblitz: https://stackblitz.com/edit/formql-example-material

# Documentation
https://github.com/formql/formql/wiki

# Getting Started
```bash
npm install @formql/editor --save
```

## Contact us
- Website - [https://formql.io](https://formql.io/)
- Twitter - [@formql_io](https://twitter.com/formql_io)

## License
FormQL is [MIT licensed](LICENSE).
npm package: @formrelay/nuxt
Description: Nuxt module for [FormRelay](https://formrelay.app) — auto-imported composable and component with SSR schema fetching.
Latest version: 0.3.0

# @formrelay/nuxt

Nuxt module for [FormRelay](https://formrelay.app) — auto-imported composable and component with SSR schema fetching.

## Install

```bash
npm install @formrelay/nuxt
```

## Setup

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@formrelay/nuxt"],
  formrelay: {
    publicKey: "pk_fr_...",
  },
});
```

## Usage

`useFormRelay` and `<FormRelay>` are auto-imported — no import statements needed.

```vue
<script setup>
const { fields, values, errors, submit, submitted, canSubmit } = await useFormRelay({
  formId: "your-form-id",
});
</script>

<template>
  <div v-if="submitted">Thanks!</div>

  <form v-else @submit.prevent="submit">
    <div v-for="field in fields" :key="field.name">
      <label>{{ field.label }}</label>
      <input :type="field.htmlInputType" v-model="values[field.name]" />
      <span v-if="errors[field.name]">{{ errors[field.name][0] }}</span>
    </div>
    <button type="submit" :disabled="!canSubmit">Send</button>
  </form>
</template>
```

The schema is fetched server-side during SSR and hydrated to the client — no loading flash.

## Documentation

[formrelay.app/docs/integration-nuxt-sdk](https://formrelay.app/docs/integration-nuxt-sdk)

## License

MIT
npm package: @formrelay/vue
Description: Vue 3 composable and renderless component for [FormRelay](https://formrelay.app).
Latest version: 0.3.0

# @formrelay/vue

Vue 3 composable and renderless component for [FormRelay](https://formrelay.app).

## Install

```bash
npm install @formrelay/vue @formrelay/core
```

## Quick start

```vue
<script setup>
import { useFormRelay } from "@formrelay/vue";

const { fields, values, errors, submit, submitting, submitted, canSubmit } = useFormRelay({
  formId: "your-form-id",
  publicKey: "pk_fr_...",
});
</script>

<template>
  <div v-if="submitted">Thanks!</div>

  <form v-else @submit.prevent="submit">
    <div v-for="field in fields" :key="field.name">
      <label>{{ field.label }}</label>
      <input :type="field.htmlInputType" v-model="values[field.name]" />
      <span v-if="errors[field.name]">{{ errors[field.name][0] }}</span>
    </div>
    <button type="submit" :disabled="!canSubmit">Send</button>
  </form>
</template>
```

## Renderless component

```vue
<template>
  <FormRelay
    form-id="your-form-id"
    public-key="pk_fr_..."
    v-slot="{ fields, values, errors, submit, canSubmit }"
  >
    <!-- Your markup here -->
  </FormRelay>
</template>
```

## Using with Nuxt?

Use [`@formrelay/nuxt`](https://www.npmjs.com/package/@formrelay/nuxt) instead for auto-imports and SSR support.

## Documentation

[formrelay.app/docs/integration-vue-sdk](https://formrelay.app/docs/integration-vue-sdk)

## License

MIT
npm package: @formsignals/dev-tools-react
Description: React dev tool component for the @formsignals/form-react library
Author: joshua.gawenda
Latest version: 0.4.7

<img src="https://github.com/gutentag2012/form-signals/raw/main/assets/repo-banner-light.svg" alt="Signal Form Banner" width="100%">

[![dev-tools-react-version](https://img.shields.io/npm/v/%40formsignals%2Fdev-tools-react?style=for-the-badge&logo=npm&label=dev-tools-react)](https://www.npmjs.com/package/@formsignals/dev-tools-react)
![dev-tools-react-bundle](https://img.shields.io/bundlephobia/minzip/%40formsignals%2Fdev-tools-react?style=for-the-badge&label=dev-tools-react-size)

A React component containing the dev tools for the React binding of Form Signals.

## Features

- **TypeScript** - Written in TypeScript with full type support for optimal DX.
- **Reactivity** - Reactivity without abstractions thanks to Preact Signals.
- **Validation** - Built-in validation support, including adapters for validation schema libraries.
- **Transformations** - Transform values for the specific needs of your input fields.
- **Field Groups** - Group fields together to manage parts of a form independently.
- **Async Data** - Easily manage async initialisation, validation and submission.
- **Arrays + Dynamic Objects** - Utilize arrays and dynamic objects within your forms.
- **React** - React bindings for easy integration with React.
- **Dev Tools** - Offers a dev tools component to debug your forms.

## Install

```bash
npm install @formsignals/dev-tools-react
```

If you have not installed the React bindings of the form library, check out [@formsignals/form-react](https://github.com/gutentag2012/form-signals/blob/main/packages/form-react/README.md#install) installation.

## Quickstart

Just add the `FormDevTools` component to your React app within the `FormProvider` you want to debug.

```tsx
import { useForm } from '@formsignals/form-react';
import { FormDevTools } from '@formsignals/dev-tools-react';

export default function App() {
  const form = useForm()

  return (
    <form.FormProvider>
      <FormDevTools />
      {/* Your app here */}
    </form.FormProvider>
  );
}
```

## Preview

<img src="https://github.com/gutentag2012/form-signals/raw/main/assets/dev-tool-screenshot.png" alt="Form Signals Dev Tools" width="635">
npm package: @formsignals/form-core
Description: Core package for Signal Form including the form state and validation logic as well as the api
Author: joshua.gawenda
Latest version: 0.4.7

<img src="https://github.com/gutentag2012/form-signals/raw/main/assets/repo-banner-light.svg" alt="Signal Form Banner" width="100%">

[![form-core-version](https://img.shields.io/npm/v/%40formsignals%2Fform-core?style=for-the-badge&logo=npm&label=form-core)](https://www.npmjs.com/package/@formsignals/form-core)
![form-core-bundle](https://img.shields.io/bundlephobia/minzip/%40formsignals%2Fform-core?style=for-the-badge&label=form-core-size)

The core library for managing forms with Preact Signals.

## Features

- **TypeScript** - Written in TypeScript with full type support for optimal DX.
- **Reactivity** - Reactivity without abstractions thanks to Preact Signals.
- **Validation** - Built-in validation support, including adapters for validation schema libraries.
- **Transformations** - Transform values for the specific needs of your input fields.
- **Field Groups** - Group fields together to manage parts of a form independently.
- **Async Data** - Easily manage async initialisation, validation and submission.
- **Arrays + Dynamic Objects** - Utilize arrays and dynamic objects within your forms.

## Install

```bash
npm install @formsignals/form-core
```

If you have not installed signals, you will need to install it as well:

```bash
npm install @preact/signals-core
```

## Quickstart

Create a new form instance:

```ts
const form = new FormLogic({
  defaultValues: {
    name: '',
    email: '',
  },
});
```

Then get a field instance from the form and configure it:

```ts
const nameField = form.getOrCreateField('name', {
  validate: (value) => {
    if (!value) {
      return 'Name is required';
    }
  },
});
```

Now you can interact with the field:

```ts
nameField.handleChange('John Smith');
```

You can also access the underlying signal directly:

```ts
const nameLength = computed(() => nameField.value.length);
```
npm package: @formsignals/validation-adapter-zod
Description: Validation adapter for zod enabling the usage of zod schemas with signal forms
Author: joshua.gawenda
Latest version: 0.4.7

<img src="https://github.com/gutentag2012/form-signals/raw/main/assets/repo-banner-light.svg" alt="Signal Form Banner" width="100%">

[![validation-adapter-zod-version](https://img.shields.io/npm/v/%40formsignals%2Fvalidation-adapter-zod?style=for-the-badge&logo=npm&label=validation-adapter-zod)](https://www.npmjs.com/package/@formsignals/validation-adapter-zod) <br/>
![validation-adapter-zod-bundle](https://img.shields.io/bundlephobia/minzip/%40formsignals%2Fvalidation-adapter-zod?style=for-the-badge&label=validation-adapter-zod-size) <br/>

The zod validation adapter for form management with Preact Signals.

## Features

- **TypeScript** - Written in TypeScript with full type support for optimal DX.
- **Reactivity** - Reactivity without abstractions thanks to Preact Signals.
- **Validation** - Built-in validation support, including adapters for validation schema libraries.
- **Transformations** - Transform values for the specific needs of your input fields.
- **Async Data** - Easily manage async initialisation, validation and submission.
- **Arrays + Dynamic Objects** - Utilize arrays and dynamic objects within your forms.

## Install

```bash
npm install @formsignals/validation-adapter-zod
```

If you have not installed zod yet, you will need to install it as well:

```bash
npm install zod
```

## Quickstart

A form or field needs to receive a validation adapter during configuration to be able to use zod schemas.

```ts
const form = new FormLogic({
  defaultValues: {
    name: '',
    email: '',
  },
  validationAdapter: ZodAdapter,
});
```

Then you can create a field instance and configure it with a zod schema:

```ts
const nameField = form.getOrCreateField('name', {
  validate: Zod.string().min(3),
});
```
npm package: @formsnip/embed
Description: React component for embedding FormSnip forms
Latest version: 1.1.1

# @formsnip/embed

React component for embedding FormSnip forms in your React applications.

## Installation

```bash
npm install @formsnip/embed
# or
yarn add @formsnip/embed
# or
pnpm add @formsnip/embed
```

## Usage

### Basic Example

```tsx
import { FormSnip } from '@formsnip/embed';

function App() {
  return (
    <div>
      <FormSnip formId="your-form-id" />
    </div>
  );
}
```

### With Custom Base URL

```tsx
import { FormSnip } from '@formsnip/embed';

function App() {
  return (
    <FormSnip
      formId="your-form-id"
      baseUrl="https://api.formsnip.com"
      onSuccess={(data) => {
        console.log('Form submitted successfully!', data);
      }}
      onError={(error) => {
        console.error('Form submission error:', error);
      }}
      className="my-custom-class"
    />
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `formId` | `string` | Yes | - | The ID of the form to embed |
| `baseUrl` | `string` | No | `'https://api.formsnip.com'` | The base URL of the FormSnip API |
| `onSuccess` | `(data: any) => void` | No | - | Callback fired when form is submitted successfully |
| `onError` | `(error: string) => void` | No | - | Callback fired when an error occurs |
| `className` | `string` | No | `''` | Additional CSS class names for the form container |
| `prefill` | `Record<string, string>` | No | - | Prefill values keyed by each field's prefill parameter |

After a **successful** server submission, the component pushes `{ event: 'formsnip_submission_success', formsnipFormId, formsnipFormName? }` to `dataLayer` (for GTM Custom Event triggers). No field values are included.

## Features

- ✅ Full form rendering with all field types
- ✅ File upload support (images, PDFs, videos, audio)
- ✅ Custom styling support (via embed styles from form settings)
- ✅ TypeScript support
- ✅ Error handling
- ✅ Loading states

## Requirements

- React >= 16.8.0
- React DOM >= 16.8.0

## License

MIT
npm package: @formsort/constants
Description: Constants used across Formsort projects. Not intended to be used directly
Author: Formsort Engineering
Latest version: 1.15.1

# @formsort/constants

Constants used across Formsort projects.

Not intended to be used directly. You're probably looking for:

- [@formsort/custom-question-api](../custom-question-api) if you want to build custom questions.
- [@formsort/web-embed-api](../web-embed-api) if you want to embed Formsort within another webpage.
npm package: @formsort/embed-messaging-manager
Description: Utility package used across Formsort projects. Not intended to be used directly
Author: Formsort Engineering
Latest version: 0.3.0

# @formsort/embed-messaging-manager

This package is used internally by Formsort to manage messaging between the embed and the parent page or application.

Not intended to be used directly. You're probably looking for:

- [@formsort/web-embed-api](../web-embed-api) if you want to embed Formsort in a web page.
- [@formsort/react-embed](../web-embed-api) if you want to embed Formsort embed in a react application.
npm package: @formspark/formson
Description: FormData to JSON converter
Author: Bjorn Krols
Latest version: 0.1.1

# Formson

Formson is a FormData to JSON converter.

It supports:

- Dot notation for (nested) objects
- Square brackets for arrays

## Sponsor

Sponsored by <a href="https://formspark.io">Formspark</a>, the simple & powerful form solution for developers.

## License

[MIT](https://opensource.org/licenses/MIT)
npm package: @formspark/use-formspark
Description: React hooks for Formspark
Author: Bjorn Krols
Latest version: 0.1.42

<p align="center">
    <a href="https://formspark.io">
        <img width="64" src="https://cdn.formspark.io/images/formspark/logos/formspark.svg" alt="Formspark logo">
    </a>
</p>

<h1 align="center">use-formspark</h1>

<p align="center">
    React hooks for <a href="https://formspark.io">Formspark</a>.
</p>

<p align="center">
    Works with React and React Native.
</p>

[![Continuous deployment](https://github.com/formspark/use-formspark/workflows/Continuous%20deployment/badge.svg)](https://github.com/formspark/use-formspark/actions?query=workflow%3A%22Continuous+deployment%22)

## Installation

```bash
# NPM
npm install @formspark/use-formspark

# Yarn 
yarn add @formspark/use-formspark
```

## Usage

```tsx
import React, { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";

const ContactForm = () => {
  const [submit, submitting] = useFormspark({
    formId: "your-form-id"
  });
  const [message, setMessage] = useState("");
  return (
    <form onSubmit={async (e) => {
        e.preventDefault();
        await submit({ message })
    }}>
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit" disabled={submitting}>Send</button>
    </form>
  );
};
```

**Note:** do not mistake action url (e.g. `https://submit-form.com/capybara`) and form id (e.g. `capybara`), this package only uses the latter.

## License

[MIT](https://opensource.org/licenses/MIT)
npm package: @formspark/vue-use-formspark
Description: Vue composition API functions for Formspark
Author: Bjorn Krols
Latest version: 0.1.7

<p align="center">
    <a href="https://formspark.io">
        <img width="64" src="https://cdn.formspark.io/images/formspark/logos/formspark.svg" alt="Formspark logo">
    </a>
</p>

<h1 align="center">vue-use-formspark</h1>

<p align="center">
    Vue composition API functions for <a href="https://formspark.io">Formspark</a>.
</p> 

[![Continuous deployment](https://github.com/formspark/vue-use-formspark/workflows/Continuous%20deployment/badge.svg)](https://github.com/formspark/vue-use-formspark/actions?query=workflow%3A%22Continuous+deployment%22)

## Installation

```bash
# NPM
npm install @formspark/vue-use-formspark

# Yarn 
yarn add @formspark/vue-use-formspark
```

## Usage

```vue
<template>
  <form @submit="onSubmit">
    <textarea v-model="message" @input="onInput"/>
    <button type="submit" :disabled="submitting">Send</button>
  </form>
</template>

<script>
import { ref } from "vue";
import { useFormspark } from "@formspark/vue-use-formspark";
export default {
  setup() {
    const message = ref("");
    
    const [submit, submitting] = useFormspark({
      formId: "your-form-id"
    });

    const onInput = e => {
      message.value = e.target.value;
    };
    
    const onSubmit = async e => {
      e.preventDefault();
      await submit({ message: message.value })
      message.value = "";
    };
    
    return {
      message,
      onInput,
      onSubmit,
      submitting,
    };
  }
};
</script>
```

**Note:** do not mistake action url (e.g. `https://submit-form.com/capybara`) and form id (e.g. `capybara`), this
package only uses the latter.

## License

[MIT](https://opensource.org/licenses/MIT)
npm package: @formspec/analysis
Description: Shared comment-tag analysis utilities for FormSpec tooling
Latest version: 0.1.0-alpha.38

# @formspec/analysis

Shared comment-tag analysis utilities for FormSpec tooling.

This package centralizes:

- FormSpec tag registry metadata
- shared metadata analysis over caller-owned TypeScript programs
- hover/completion-facing tag documentation
- target-centric constraint-site resolution
- semantic validation for resolved constraint targets

## Install

```bash
pnpm add @formspec/analysis
```

This package is primarily for tooling authors. Most app code should consume higher-level packages such as `@formspec/ts-plugin` or `@formspec/language-server`.

## Entry Points

| Entry point                   | Purpose                                               |
| ----------------------------- | ----------------------------------------------------- |
| `@formspec/analysis`          | Stable protocol types and runtime helpers             |
| `@formspec/analysis/internal` | Unstable lower-level parsing, registry, and IPC APIs  |

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspec/cli
Description: CLI tool for generating JSON Schema and FormSpec from TypeScript classes
Latest version: 0.1.0-alpha.40

# @formspec/cli

CLI for generating schemas and canonical IR from TypeScript source files.

## Install

```bash
pnpm add -D @formspec/cli
```

The package installs a `formspec` binary.

## Commands

### Generate Schemas

```bash
formspec generate ./src/forms.ts UserForm -o ./generated
```

`generate` also accepts the legacy `analyze` alias for backwards compatibility.

### Generate From Chain DSL Exports

```bash
formspec generate ./src/forms.ts -o ./generated
```

### Emit Canonical IR

```bash
formspec generate ./src/forms.ts UserForm --emit-ir -o ./generated
```

### Validate Only

```bash
formspec generate ./src/forms.ts UserForm --validate-only
```

### Dry Run

```bash
formspec generate ./src/forms.ts UserForm --dry-run -o ./generated
```

### Use An Explicit Compiled JS Entry

```bash
formspec generate ./src/forms.ts --compiled ./dist/forms.js -o ./generated
```

## Notes

- Static analysis covers classes, interfaces, and type aliases using the TypeScript compiler directly.
- Chain DSL export generation requires compiled JavaScript that the CLI can load.
- `--compiled` / `-c` overrides the auto-detected compiled JavaScript path for chain DSL loading.
- `--validate-only` exercises the same validation path used by schema generation.
- `--emit-ir` writes canonical IR as `<name>.ir.json` alongside generated schema files.

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspec/constraints
Description: Constraint validation for FormSpec - restrict features based on target environment capabilities
Latest version: 0.1.0-alpha.33

# @formspec/constraints

Constraint configuration and validation for FormSpec DSL usage.

Use this package when you want project-level rules such as:

- disallowing certain field types
- limiting layout nesting
- restricting selected field options
- validating `.formspec.yml`-driven capability policies

## Install

```bash
pnpm add @formspec/constraints
```

## `.formspec.yml`

```yaml
constraints:
  fieldTypes:
    dynamicEnum: warn
    dynamicSchema: error

  layout:
    conditionals: off
    maxNestingDepth: 2

  fieldOptions:
    placeholder: off
    minItems: warn
```

## Programmatic Use

```ts
import { loadConfig, mergeWithDefaults, validateFormSpecElements } from "@formspec/constraints";
import { field, formspec } from "@formspec/dsl";

const { config } = await loadConfig();
const resolved = mergeWithDefaults(config.constraints);

const form = formspec(field.text("name"), field.dynamicEnum("country", "countries"));
const result = validateFormSpecElements(form.elements, { constraints: resolved });
```

## Browser Entry Point

Use `@formspec/constraints/browser` when you need validation in browser code and do not want the file-based config loader:

```ts
import { loadConfigFromString, validateFormSpec } from "@formspec/constraints/browser";
```

## Main Exports

- `loadConfig`
- `loadConfigFromString`
- `defineConstraints`
- `mergeWithDefaults`
- `validateFormSpecElements`
- `validateFormSpec`

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspec/core
Description: Core utilities for formspec
Latest version: 0.1.0-alpha.33

# @formspec/core

Shared types, canonical IR nodes, and extension registration APIs for FormSpec.

## Install

```bash
pnpm add @formspec/core
```

Most app code should prefer `formspec` unless you are building tooling, extensions, or lower-level integrations.

## Main Responsibilities

- Form element and state types
- Canonical IR types used by the build pipeline
- Constraint-definition metadata
- Extension registration helpers for custom types, constraints, and annotations
- Shared type guards

## Example

```ts
import type { FormElement, FormIR } from "@formspec/core";
import { defineConstraint, defineCustomType, defineExtension } from "@formspec/core";

function isFieldElement(element: FormElement): boolean {
  return element._type === "field";
}

const decimalType = defineCustomType({
  typeName: "Decimal",
  tsTypeNames: ["Decimal"],
  toJsonSchema: (_payload, vendorPrefix) => ({
    type: "string",
    [`${vendorPrefix}-decimal`]: true,
  }),
});

const extension = defineExtension({
  extensionId: "x-example/decimal",
  types: [decimalType],
  constraints: [],
  annotations: [],
});
```

## Key Exports

### Form Types

- `FormSpec`
- `FormElement`
- `AnyField`
- `Group`
- `Conditional`
- `FieldState`
- `FormState`

### IR Types

- `FormIR`
- `FieldNode`
- `LayoutNode`
- `TypeNode`
- `ConstraintNode`
- `AnnotationNode`
- `Provenance`

### Extension API

- `defineExtension`
- `defineConstraint`
- `defineConstraintTag`
- `defineAnnotation`
- `defineCustomType`

### Utilities

- `normalizeConstraintTagName`
- `createInitialFieldState`
- `IR_VERSION`
- field and layout type guards

## Entry Points

| Entry point               | Purpose                                |
| ------------------------- | -------------------------------------- |
| `@formspec/core`          | Stable public types and extension APIs |
| `@formspec/core/internals` | Unstable low-level internal types      |

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspec/dsl
Description: DSL functions for defining FormSpec forms
Latest version: 0.1.0-alpha.33

# @formspec/dsl

Chain DSL for defining FormSpec forms with TypeScript inference.

## Install

```bash
pnpm add @formspec/dsl @formspec/build
```

Or use the umbrella package:

```bash
pnpm add formspec
```

## Quick Start

```ts
import { field, formspec, group, is, type InferFormSchema, when } from "@formspec/dsl";
import { buildFormSchemas } from "@formspec/build";

const ProfileForm = formspec(
  group(
    "Profile",
    field.text("displayName", { required: true }),
    field.enum("role", ["admin", "member"] as const, { required: true })
  ),
  when(is("role", "admin"), field.boolean("superUser"))
);

type ProfileData = InferFormSchema<typeof ProfileForm>;

const { jsonSchema, uiSchema } = buildFormSchemas(ProfileForm);
```

## Main Builders

- `formspec(...elements)`
- `field.text(name, config?)`
- `field.number(name, config?)`
- `field.boolean(name, config?)`
- `field.enum(name, options, config?)`
- `field.dynamicEnum(name, source, config?)`
- `field.dynamicSchema(name, schemaSource, config?)`
- `field.array(name, ...elements)`
- `field.arrayWithConfig(name, config, ...elements)`
- `field.object(name, ...elements)`
- `field.objectWithConfig(name, config, ...elements)`
- `group(label, ...elements)`
- `when(predicate, ...elements)`
- `is(fieldName, value)`
- `validateForm(elements)`
- `logValidationIssues(result)`

## Notes

- Use `as const` for enum option arrays when you want literal inference from variables.
- `group()` is layout-only; it does not change the data shape.
- `when()` affects UI behavior, not whether a field exists in the JSON Schema.

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspec/language-server
Description: Language server for FormSpec — completions, hover, and go-to-definition for JSDoc constraint tags
Latest version: 0.1.0-alpha.38

# @formspec/language-server

Language-server support for FormSpec TSDoc tags.

The packaged server is a reference implementation built on top of the
composable completion, hover, and diagnostics helpers exported by this package.
Downstream tools can reuse those helpers directly and own the final publishing
and presentation behavior themselves.

## Install

```bash
pnpm add @formspec/language-server
```

## Features

- completion items for FormSpec tags
- hover documentation for recognized tags
- go-to-definition support for known tags
- optional plugin-backed diagnostics publishing

Diagnostics are off by default. When enabled, the packaged server consumes
canonical FormSpec diagnostics from `@formspec/ts-plugin` and converts them to
LSP diagnostics using the same exported helpers that downstream consumers can
call directly.

## Usage

```ts
import {
  createServer,
  getDefinition,
  getCompletionItems,
  getHoverForTag,
  getPluginDiagnosticsForDocument,
  toLspDiagnostics,
} from "@formspec/language-server";

const server = createServer();
const completions = getCompletionItems();
const hover = getHoverForTag("minimum");
```

To enable packaged diagnostics publishing:

```ts
const server = createServer({
  diagnosticsMode: "plugin",
  diagnosticSource: "formspec",
});
```

For full white-label control, bypass `createServer()` and use:

- `getPluginDiagnosticsForDocument(...)`
- `toLspDiagnostics(...)`
- `getDefinition(...)`

or map canonical FormSpec diagnostics to your own editor/UI model directly.

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspec/ts-plugin
Description: TypeScript language service plugin for FormSpec semantic comment analysis
Latest version: 0.1.0-alpha.38

# @formspec/ts-plugin

TypeScript language service plugin for FormSpec semantic comment analysis.

This package serves two roles:

- a turnkey `tsserver` plugin via `init()`
- a composable in-process semantic API for downstream TypeScript hosts

The shipped plugin is the reference implementation. Downstream tools that
already own their own TypeScript plugin/runtime can use
`FormSpecSemanticService` and `createLanguageServiceProxy(...)` directly while
reusing the same host `Program`.

## Install

```bash
pnpm add -D @formspec/ts-plugin
```

## `tsconfig.json` Setup

```json
{
  "compilerOptions": {
    "plugins": [{ "name": "@formspec/ts-plugin" }]
  }
}
```

## Public Composition APIs

```ts
import { FormSpecSemanticService, createLanguageServiceProxy } from "@formspec/ts-plugin";
```

`FormSpecSemanticService` provides:

- `getFileSnapshot(filePath)`
- `getCompletionContext(filePath, offset)`
- `getHover(filePath, offset)`
- `getDiagnostics(filePath)`
- `scheduleSnapshotRefresh(filePath)`
- `getStats()`

`FormSpecPluginService` wraps the same semantic service with the manifest + IPC
transport used by the packaged language server.

## Reference Host Example

The shipped FormSpec `tsserver` plugin is only one reference implementation.
Downstream tools that already own a TypeScript `Program` can build their own
feedback layer directly on top of `FormSpecSemanticService`.

See:

- [reference-host-example.ts](https://github.com/mike-north/formspec/blob/main/packages/ts-plugin/src/reference-host-example.ts)
- [downstream-authoring-host.test.ts](https://github.com/mike-north/formspec/blob/main/packages/ts-plugin/src/__tests__/downstream-authoring-host.test.ts)

These source-repository references intentionally show a downstream host that
renders diagnostics from `code` + `data` instead of reusing FormSpec's default
message text.

## White-Label Diagnostics

Diagnostics returned by the semantic service and plugin transport include:

- stable machine-readable `code`
- structured `category`
- raw diagnostic `data`
- optional `relatedLocations`
- default human-readable `message`

Downstream tools can ignore `message` and render from `code` + `data` if they
want full control over presentation.

## Profiling

Set `FORMSPEC_PLUGIN_PROFILE=1` to enable semantic query hotspot logging.

Set `FORMSPEC_PLUGIN_PROFILE_THRESHOLD_MS=<number>` to raise or lower the
minimum total query duration required before a profiling summary is logged.
Empty or non-finite values are ignored.

## License

This package is part of the FormSpec monorepo and is released under the MIT License. See [LICENSE](./LICENSE) for details.
npm package: @formspree/cli
Description: The Formspree command line interface
Author: Derrick Reimer
Latest version: 0.9.6

# Formspree CLI

The command line interface for [Formspree](https://formspree.io).

## Installation

Run the following to install on your machine:

```bash
npm i -g @formspree/cli
```

## Releasing

Run the following to publish a new version:

```bash
npm run release
```
npm package: @formspree/react
Description: The React component library for Formspree
Latest version: 3.0.0

# Formspree React

The React component library for [Formspree](https://formspree.io).

## Help and Support

For help and support please see [the Formspree React docs](https://help.formspree.io/hc/en-us/articles/360055613373).
npm package: @formswizard/config
Description: Wrapper for config of FormsWizard
Latest version: 0.2.1

# @formswizard/config

This npm-package wraps all runtime `config` options used by other FormsWizard frontend packages.
It provides typescript types and default values.

## Implementation

For now the config is statically build from environment-variables at compile time (of the next or vite application requiring this package).

In future the mechanism of [`swlkup`](https://github.com/johannesloetzsch/swlkup/blob/master/frontend/config.ts) might be used, for loading configuration at runtime.

It would also be nice to do runtime type validation using a JsonSchema.