@pindoba/svelte-tanstack-form 0.0.0-alpha-20260617191010

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/dist/demos/basic.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { z } from "zod";
+  import { createForm, FormInput, FormSubmit } from "../index.js";
+  import { stack } from "@pindoba/styled-system/patterns";
+
+  const schema = z.object({
+    name: z.string().min(2, "Use at least 2 characters."),
+    email: z.string().email("Enter a valid email address."),
+  });
+
+  let submitted = $state<string | null>(null);
+
+  const form = createForm(() => ({
+    defaultValues: { name: "", email: "" },
+    validators: { onChange: schema },
+    onSubmit: async ({ value }) => {
+      submitted = JSON.stringify(value);
+    },
+  }));
+</script>
+
+<form
+  onsubmit={(event) => {
+    event.preventDefault();
+    form.handleSubmit();
+  }}
+>
+  <div class={stack({ gap: "md", direction: "column" })}>
+    <FormInput {form} name="name" label="Name" required />
+    <FormInput
+      {form}
+      name="email"
+      label="Email"
+      type="email"
+      required
+      labelTooltip="We email your receipt here."
+    />
+    <FormSubmit {form}>Create account</FormSubmit>
+    {#if submitted}<p>Submitted: {submitted}</p>{/if}
+  </div>
+</form>

package/dist/demos/basic.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Basic: import("svelte").Component<Record<string, never>, {}, "">;
+type Basic = ReturnType<typeof Basic>;
+export default Basic;

package/dist/demos/generic-field.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { z } from "zod";
+  import { createForm, FormField } from "../index.js";
+  import { InputRoot, InputField } from "@pindoba/svelte-input";
+  import Affix from "@pindoba/svelte-affix";
+  import { stack } from "@pindoba/styled-system/patterns";
+
+  const schema = z.object({
+    handle: z
+      .string()
+      .regex(/^@?[a-z0-9_]{2,}$/i, "Letters, numbers and underscores only."),
+  });
+
+  const form = createForm(() => ({
+    defaultValues: { handle: "" },
+    validators: { onChange: schema },
+    onSubmit: async () => {},
+  }));
+</script>
+
+<!--
+  The generic <FormField> hands you the props bag + the raw TanStack field so
+  you can wire ANY control — here input parts with a leading "@" Affix prefix.
+-->
+<form
+  onsubmit={(event) => {
+    event.preventDefault();
+    form.handleSubmit();
+  }}
+>
+  <div class={stack({ gap: "md", direction: "column" })}>
+    <FormField
+      {form}
+      name="handle"
+      label="Username"
+      description="Your public @handle."
+    >
+      {#snippet control(props, field)}
+        {@const { feedback, ...inputProps } = props}
+        <InputRoot {feedback}>
+          <Affix decorative>@</Affix>
+          <InputField
+            {...inputProps}
+            value={field.state.value}
+            oninput={(event) => field.handleChange(event.currentTarget.value)}
+            onblur={() => field.handleBlur()}
+          />
+        </InputRoot>
+      {/snippet}
+    </FormField>
+  </div>
+</form>

package/dist/demos/generic-field.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GenericField: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GenericField = InstanceType<typeof GenericField>;
+export default GenericField;

package/dist/demos/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Basic } from "./basic.svelte";
+export { default as MixedControls } from "./mixed-controls.svelte";
+export { default as GenericField } from "./generic-field.svelte";

package/dist/demos/index.js

@@ -0,0 +1,3 @@
+export { default as Basic } from "./basic.svelte";
+export { default as MixedControls } from "./mixed-controls.svelte";
+export { default as GenericField } from "./generic-field.svelte";

package/dist/demos/mixed-controls.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { z } from "zod";
+  import {
+    createForm,
+    FormInput,
+    FormSelect,
+    FormCheckbox,
+    FormSubmit,
+  } from "../index.js";
+  import { stack } from "@pindoba/styled-system/patterns";
+
+  const countries = [
+    { id: "br", label: "Brazil" },
+    { id: "us", label: "United States" },
+    { id: "pt", label: "Portugal" },
+  ];
+
+  const schema = z.object({
+    fullName: z.string().min(2, "Use at least 2 characters."),
+    country: z.string().min(1, "Pick a country."),
+    terms: z.literal(true, { message: "You must accept the terms." }),
+  });
+
+  let submitted = $state<string | null>(null);
+
+  const form = createForm(() => ({
+    defaultValues: { fullName: "", country: "", terms: false },
+    validators: { onChange: schema },
+    onSubmit: async ({ value }) => {
+      submitted = JSON.stringify(value);
+    },
+  }));
+</script>
+
+<form
+  onsubmit={(event) => {
+    event.preventDefault();
+    form.handleSubmit();
+  }}
+>
+  <div class={stack({ gap: "md", direction: "column" })}>
+    <FormInput {form} name="fullName" label="Full name" required />
+    <FormSelect
+      {form}
+      name="country"
+      label="Country"
+      items={countries}
+      placeholder="Select a country"
+      required
+    />
+    <FormCheckbox {form} name="terms" label="Agreement" errorMode="submitted">
+      I accept the terms of service
+    </FormCheckbox>
+    <FormSubmit {form}>Continue</FormSubmit>
+    {#if submitted}<p>Submitted: {submitted}</p>{/if}
+  </div>
+</form>

package/dist/demos/mixed-controls.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MixedControls: import("svelte").Component<Record<string, never>, {}, "">;
+type MixedControls = ReturnType<typeof MixedControls>;
+export default MixedControls;

package/dist/field-errors.d.ts

@@ -0,0 +1 @@
+export { getVisibleErrors, normalizeErrors } from "@pindoba/core-tanstack-form";

package/dist/field-errors.js

@@ -0,0 +1,5 @@
+// The error-normalization + visibility logic is framework-agnostic and lives in
+// `@pindoba/core-tanstack-form`, shared with the Astro adapter. Re-exported here
+// so the block's internal imports and public API stay stable. TanStack's Svelte
+// `AnyFieldApi` structurally satisfies the core's `FieldErrorSource`.
+export { getVisibleErrors, normalizeErrors } from "@pindoba/core-tanstack-form";

package/dist/form-checkbox.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import type { FieldSize } from "@pindoba/core-field";
+  import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+
+  export interface FormCheckboxProps extends Omit<FormFieldOwnProps, "size"> {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a boolean key of the form's data). */
+    name: string;
+    /** Inline text/content rendered beside the checkbox. */
+    children?: Snippet;
+    /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */
+    size?: Exclude<FieldSize, "xs">;
+  }
+</script>
+
+<script lang="ts">
+  import FormField from "./form-field.svelte";
+  import Checkbox from "@pindoba/svelte-checkbox";
+
+  let { form, name, children, size, ...fieldProps }: FormCheckboxProps =
+    $props();
+</script>
+
+<FormField {form} {name} {size} {...fieldProps}>
+  {#snippet control(props, field)}
+    <!--
+      Two-way function binding rather than `onchange`: Checkbox forwards consumer
+      rest props onto its root <label>, not the inner <input>, so an `onchange`
+      handler would read `currentTarget.checked` off the label (undefined). The
+      `bind:checked` getter/setter drives the field value directly.
+    -->
+    <Checkbox
+      {...props}
+      {size}
+      bind:checked={
+        () => Boolean(field.state.value), (value) => field.handleChange(value)
+      }
+      onfocusout={() => field.handleBlur()}
+    >
+      {#if children}{@render children()}{/if}
+    </Checkbox>
+  {/snippet}
+</FormField>

package/dist/form-checkbox.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { FieldSize } from "@pindoba/core-field";
+import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+export interface FormCheckboxProps extends Omit<FormFieldOwnProps, "size"> {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a boolean key of the form's data). */
+    name: string;
+    /** Inline text/content rendered beside the checkbox. */
+    children?: Snippet;
+    /** Size variant. Checkbox supports `sm`/`md`/`lg` (no `xs`). */
+    size?: Exclude<FieldSize, "xs">;
+}
+declare const FormCheckbox: import("svelte").Component<FormCheckboxProps, {}, "">;
+type FormCheckbox = ReturnType<typeof FormCheckbox>;
+export default FormCheckbox;

package/dist/form-field.svelte

@@ -0,0 +1,63 @@
+<script module lang="ts">
+  import type { AnyFieldApi } from "@tanstack/svelte-form";
+  import type { FieldControlProps } from "@pindoba/core-field";
+  import type { Snippet } from "svelte";
+  import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+
+  export interface FormFieldProps extends FormFieldOwnProps {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a key of the form's data). */
+    name: string;
+    /**
+     * Render-prop for the control. Receives the props bag to spread onto the
+     * control plus the raw TanStack field API for value/handler binding.
+     */
+    control: Snippet<[FieldControlProps, AnyFieldApi]>;
+  }
+</script>
+
+<script lang="ts">
+  import Field from "@pindoba/svelte-field";
+  import { getVisibleErrors } from "./field-errors.js";
+
+  let {
+    form,
+    name,
+    label,
+    description,
+    required,
+    optionalText,
+    disabled,
+    size,
+    orientation,
+    feedback,
+    labelTooltip,
+    errorMode = "touched",
+    passThrough,
+    control,
+  }: FormFieldProps = $props();
+</script>
+
+<form.Field {name}>
+  {#snippet children(field)}
+    {@const errors = getVisibleErrors(field, errorMode)}
+    {#snippet fieldControl(controlProps: FieldControlProps)}
+      {@render control(controlProps, field)}
+    {/snippet}
+    <Field
+      {label}
+      {description}
+      {required}
+      {optionalText}
+      {disabled}
+      {size}
+      {orientation}
+      {feedback}
+      {labelTooltip}
+      {passThrough}
+      error={errors}
+      control={fieldControl}
+    />
+  {/snippet}
+</form.Field>

package/dist/form-field.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { AnyFieldApi } from "@tanstack/svelte-form";
+import type { FieldControlProps } from "@pindoba/core-field";
+import type { Snippet } from "svelte";
+import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+export interface FormFieldProps extends FormFieldOwnProps {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a key of the form's data). */
+    name: string;
+    /**
+     * Render-prop for the control. Receives the props bag to spread onto the
+     * control plus the raw TanStack field API for value/handler binding.
+     */
+    control: Snippet<[FieldControlProps, AnyFieldApi]>;
+}
+declare const FormField: import("svelte").Component<FormFieldProps, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/form-input.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import type { InputProps } from "@pindoba/svelte-input";
+  import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+
+  export interface FormInputProps extends FormFieldOwnProps {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a key of the form's data). */
+    name: string;
+    /** HTML input type forwarded to the underlying `<Input>`. */
+    type?: InputProps["type"];
+    /** Placeholder forwarded to the underlying `<Input>`. */
+    placeholder?: string;
+  }
+</script>
+
+<script lang="ts">
+  import FormField from "./form-field.svelte";
+  import Input from "@pindoba/svelte-input";
+
+  let {
+    form,
+    name,
+    type = "text",
+    placeholder,
+    size,
+    ...fieldProps
+  }: FormInputProps = $props();
+</script>
+
+<FormField {form} {name} {size} {...fieldProps}>
+  {#snippet control(props, field)}
+    <Input
+      {...props}
+      {size}
+      {type}
+      {placeholder}
+      value={field.state.value}
+      oninput={(event) => field.handleChange(event.currentTarget.value)}
+      onblur={() => field.handleBlur()}
+    />
+  {/snippet}
+</FormField>

package/dist/form-input.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { InputProps } from "@pindoba/svelte-input";
+import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+export interface FormInputProps extends FormFieldOwnProps {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a key of the form's data). */
+    name: string;
+    /** HTML input type forwarded to the underlying `<Input>`. */
+    type?: InputProps["type"];
+    /** Placeholder forwarded to the underlying `<Input>`. */
+    placeholder?: string;
+}
+declare const FormInput: import("svelte").Component<FormInputProps, {}, "">;
+type FormInput = ReturnType<typeof FormInput>;
+export default FormInput;

package/dist/form-select.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">
+  import type { ListBoxNodeInput } from "@pindoba/core-listbox";
+  import type { FieldSize } from "@pindoba/core-field";
+  import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+
+  export interface FormSelectProps extends Omit<FormFieldOwnProps, "size"> {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a key of the form's data holding the selected option key). */
+    name: string;
+    /** Options to choose from. */
+    items: ListBoxNodeInput[];
+    /** Placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */
+    size?: Exclude<FieldSize, "xs">;
+  }
+</script>
+
+<script lang="ts">
+  import FormField from "./form-field.svelte";
+  import Select from "@pindoba/svelte-select";
+
+  let { form, name, items, placeholder, size, ...fieldProps }: FormSelectProps =
+    $props();
+</script>
+
+<FormField {form} {name} {size} {...fieldProps}>
+  {#snippet control(props, field)}
+    <!--
+      Controlled `value`: the field is the single source of truth. Select's
+      `value` is properly controlled (it syncs the prop into its reducer), so a
+      parent re-render no longer drops the selection. `onValueChange` writes the
+      scalar key back to the form (single-select), and `onOpenChange` marks the
+      field touched on dismiss.
+    -->
+    <Select
+      {...props}
+      {size}
+      {items}
+      {placeholder}
+      value={field.state.value || null}
+      onValueChange={(next) => field.handleChange(next ?? "")}
+      onOpenChange={(open) => {
+        // Mark touched when the dropdown closes — whether or not a choice was
+        // made — so `errorMode="touched"` surfaces a required error after the
+        // user opens and dismisses without picking. Select keeps focus on its
+        // trigger (aria-activedescendant), so this fires only on a real close,
+        // not while navigating options.
+        if (!open) field.handleBlur();
+      }}
+    />
+  {/snippet}
+</FormField>

package/dist/form-select.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ListBoxNodeInput } from "@pindoba/core-listbox";
+import type { FieldSize } from "@pindoba/core-field";
+import type { AnyFormApi, FormFieldOwnProps } from "./types.js";
+export interface FormSelectProps extends Omit<FormFieldOwnProps, "size"> {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /** Field name (a key of the form's data holding the selected option key). */
+    name: string;
+    /** Options to choose from. */
+    items: ListBoxNodeInput[];
+    /** Placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Size variant. Select supports `sm`/`md`/`lg` (no `xs`). */
+    size?: Exclude<FieldSize, "xs">;
+}
+declare const FormSelect: import("svelte").Component<FormSelectProps, {}, "">;
+type FormSelect = ReturnType<typeof FormSelect>;
+export default FormSelect;

package/dist/form-submit.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ButtonProps } from "@pindoba/svelte-button";
+  import type { AnyFormApi } from "./types.js";
+
+  export interface FormSubmitProps {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /**
+     * Also disable while the form is invalid (not just while submitting). Off by
+     * default — the button stays clickable so submitting an invalid form surfaces
+     * its errors instead of leaving the user stuck on a disabled control.
+     * @default false
+     */
+    disableWhenInvalid?: boolean;
+    /** Emphasis forwarded to the underlying `<Button>`. */
+    emphasis?: ButtonProps["emphasis"];
+    /** Size forwarded to the underlying `<Button>`. */
+    size?: ButtonProps["size"];
+    /** Button label content. */
+    children?: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Button from "@pindoba/svelte-button";
+  import Loading from "@pindoba/svelte-loading";
+
+  let {
+    form,
+    disableWhenInvalid = false,
+    emphasis = "primary",
+    size,
+    children,
+  }: FormSubmitProps = $props();
+
+  // The form's submit-readiness lives on a derived store that isn't mounted
+  // during SSR, so `state` can be undefined server-side — the selector defaults
+  // to an enabled, not-submitting button until the client hydrates. The form
+  // instance is stable for the component's lifetime, so capture it once
+  // (`untrack`) when wiring the reactive selector subscription.
+  const submitState = untrack(() =>
+    form.useStore((state) => ({
+      canSubmit: state?.canSubmit ?? true,
+      isSubmitting: state?.isSubmitting ?? false,
+    })),
+  );
+</script>
+
+<!--
+  Wrap the button in Loading's `busy` treatment while the onSubmit promise is in
+  flight: it blurs the label and shows a corner spinner (`indicator`). Loading's
+  root is `display:contents`, so it doesn't disturb the button's layout.
+-->
+<Loading loading={submitState.current.isSubmitting} variant="busy" indicator>
+  <Button
+    type="submit"
+    {emphasis}
+    {size}
+    disabled={submitState.current.isSubmitting ||
+      (disableWhenInvalid && !submitState.current.canSubmit)}
+    aria-busy={submitState.current.isSubmitting ? "true" : undefined}
+  >
+    {#if children}{@render children()}{:else}Submit{/if}
+  </Button>
+</Loading>

package/dist/form-submit.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+import type { ButtonProps } from "@pindoba/svelte-button";
+import type { AnyFormApi } from "./types.js";
+export interface FormSubmitProps {
+    /** The TanStack form instance returned by `createForm(...)`. */
+    form: AnyFormApi;
+    /**
+     * Also disable while the form is invalid (not just while submitting). Off by
+     * default — the button stays clickable so submitting an invalid form surfaces
+     * its errors instead of leaving the user stuck on a disabled control.
+     * @default false
+     */
+    disableWhenInvalid?: boolean;
+    /** Emphasis forwarded to the underlying `<Button>`. */
+    emphasis?: ButtonProps["emphasis"];
+    /** Size forwarded to the underlying `<Button>`. */
+    size?: ButtonProps["size"];
+    /** Button label content. */
+    children?: Snippet;
+}
+declare const FormSubmit: import("svelte").Component<FormSubmitProps, {}, "">;
+type FormSubmit = ReturnType<typeof FormSubmit>;
+export default FormSubmit;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { createForm, useStore } from "@tanstack/svelte-form";
+export type { AnyFieldApi } from "@tanstack/svelte-form";
+export { default as FormField } from "./form-field.svelte";
+export * from "./form-field.svelte";
+export { default as FormInput } from "./form-input.svelte";
+export * from "./form-input.svelte";
+export { default as FormSelect } from "./form-select.svelte";
+export * from "./form-select.svelte";
+export { default as FormCheckbox } from "./form-checkbox.svelte";
+export * from "./form-checkbox.svelte";
+export { default as FormSubmit } from "./form-submit.svelte";
+export * from "./form-submit.svelte";
+export { getVisibleErrors, normalizeErrors } from "./field-errors.js";
+export type { AnyFormApi, FormFieldErrorMode, FormFieldOwnProps, } from "./types.js";

package/dist/index.js

@@ -0,0 +1,15 @@
+// Re-export the TanStack Svelte Form runtime so consumers import everything
+// from one place. `createForm` accepts Standard Schema validators natively
+// (Zod 3.24+, Valibot, ArkType): `validators: { onChange: mySchema }`.
+export { createForm, useStore } from "@tanstack/svelte-form";
+export { default as FormField } from "./form-field.svelte";
+export * from "./form-field.svelte";
+export { default as FormInput } from "./form-input.svelte";
+export * from "./form-input.svelte";
+export { default as FormSelect } from "./form-select.svelte";
+export * from "./form-select.svelte";
+export { default as FormCheckbox } from "./form-checkbox.svelte";
+export * from "./form-checkbox.svelte";
+export { default as FormSubmit } from "./form-submit.svelte";
+export * from "./form-submit.svelte";
+export { getVisibleErrors, normalizeErrors } from "./field-errors.js";

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+import type { FieldFeedback, FieldOrientation, FieldSize, FieldPassThrough } from "@pindoba/core-field";
+import type { Snippet } from "svelte";
+import type { SvelteFormApi } from "@tanstack/svelte-form";
+import type { FormFieldErrorMode } from "@pindoba/core-tanstack-form";
+export type { FormFieldErrorMode } from "@pindoba/core-tanstack-form";
+/**
+ * A TanStack Svelte form instance with its generics erased. The adapter only
+ * touches `form.Field` and `form.state`, so the concrete data/validator
+ * generics are irrelevant here — any `createForm(...)` result is assignable.
+ */
+export type AnyFormApi = SvelteFormApi<any, any, any, any, any, any, any, any, any, any, any, any>;
+/**
+ * Field-level presentation props shared by `<FormField>` and every convenience
+ * wrapper (`<FormInput>`, `<FormSelect>`, `<FormCheckbox>`). These mirror the
+ * presentational `<Field>` props; the adapter supplies `error` from TanStack.
+ */
+export interface FormFieldOwnProps {
+    /** Label text shown above (or beside) the control. */
+    label?: string;
+    /** Help text rendered under the control. */
+    description?: string;
+    /** Renders a required `*` after the label. */
+    required?: boolean;
+    /** Optional-hint text after the label when not required. */
+    optionalText?: string;
+    /** Disables the field and forwards `disabled` to the control. */
+    disabled?: boolean;
+    /** Size variant, kept in sync with the control. */
+    size?: FieldSize;
+    /** Label/control layout direction. */
+    orientation?: FieldOrientation;
+    /** Explicit feedback override; defaults to error-derived danger / neutral. */
+    feedback?: FieldFeedback;
+    /** Tooltip attached to an info trigger next to the label. */
+    labelTooltip?: string | Snippet;
+    /** When the field's errors become visible. @default "touched" */
+    errorMode?: FormFieldErrorMode;
+    /** Per-slot escape hatch for styling and attributes. */
+    passThrough?: FieldPassThrough;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@pindoba/svelte-tanstack-form",
+  "version": "0.0.0-alpha-20260617191010",
+  "sideEffects": false,
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./demos": {
+      "types": "./dist/demos/index.d.ts",
+      "svelte": "./dist/demos/index.js",
+      "default": "./dist/demos/index.js"
+    },
+    "./demos/*": {
+      "types": "./dist/demos/*.svelte.d.ts",
+      "svelte": "./dist/demos/*.svelte",
+      "default": "./dist/demos/*.svelte"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "dependencies": {
+    "@tanstack/svelte-form": "^1.33.0",
+    "@pindoba/core-field": "0.0.0-alpha-20260617191010",
+    "@pindoba/core-listbox": "0.0.0-alpha-20260617191010",
+    "@pindoba/core-tanstack-form": "0.0.0-alpha-20260617191010",
+    "@pindoba/styled-system": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-affix": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-button": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-checkbox": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-input": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-field": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-loading": "0.0.0-alpha-20260617191010",
+    "@pindoba/svelte-select": "0.0.0-alpha-20260617191010"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "^2.65.1",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "zod": "^4.4.3"
+  },
+  "default": "./dist/index.js",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "vite build && npm run package",
+    "dev:serve": "vite dev",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "dev": "svelte-kit sync && svelte-package --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "TIMING=1 eslint . --max-warnings 0",
+    "clean": "rm -rf dist && rm -rf .svelte-kit && rm -rf node_modules && rm -rf .turbo",
+    "format": "prettier --check . --ignore-path \"$PRETTIER_IGNORE_PATH\"",
+    "format:fix": "prettier --write . --ignore-path \"$PRETTIER_IGNORE_PATH\""
+  }
+}