svelte-ag 1.0.5 → 1.0.7

package/dist/lib/api/form.svelte.d.ts

@@ -1,6 +1,5 @@
-import { type SuperForm, type SuperValidated } from 'sveltekit-superforms';
-import type { ApiRequestFunction, HTTPMethod, ApiEndpoints, ApiInput, ApiSuccessBody, ApiErrorBody } from 'ts-ag';
-import type * as v from 'valibot';
+import { superForm, type SuperForm, type SuperValidated } from 'sveltekit-superforms';
+import type { ApiRequestFunction, HTTPMethod, ApiEndpoints, ApiInput, ApiSuccessBody, ApiErrorBody, ApiSchema } from 'ts-ag';
 type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<ApiInput<E, P, M>>;
 export type ApiRequestForm<API extends ApiEndpoints> = <Path extends API['path'], Method extends Extract<API, {
     path: Path;
@@ -12,7 +11,8 @@ export type ApiRequestForm<API extends ApiEndpoints> = <Path extends API['path']
         onFail?: (form: SuperValidated<ValidInput<API, Path, Method>>, response: ApiErrorBody<API, Path, Method>) => void | Promise<void>;
     };
     defaultValue?: Partial<ApiInput<API, Path, Method>>;
+    formProps?: Parameters<typeof superForm<ValidInput<API, Path, Method>>>[1];
 }) => SuperForm<ValidInput<API, Path, Method>>;
-export declare function createFormFunction<API extends ApiEndpoints>(schemas: Record<API['path'], Record<HTTPMethod, v.GenericSchema>>, request: ApiRequestFunction<API>): ApiRequestForm<API>;
+export declare function createFormFunction<API extends ApiEndpoints>(schemas: Partial<Record<API['path'], Partial<Record<HTTPMethod, ApiSchema>>>>, request: ApiRequestFunction<API>): ApiRequestForm<API>;
 export {};
 //# sourceMappingURL=form.svelte.d.ts.map

package/dist/lib/api/form.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/api/form.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtH,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAClH,OAAO,KAAK,KAAK,CAAC,MAAM,SAAS,CAAC;AAElC,KAAK,UAAU,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAErH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,YAAY,IAAI,CACrD,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,EACrD,CAAC,EAAE;IACH,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACxC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,CAAC,EAAE,CACP,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACtC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;CACrD,KAAK,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/C,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,YAAY,EACzD,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,EACjE,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC/B,cAAc,CAAC,GAAG,CAAC,CAyCrB"}
+{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/api/form.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtH,OAAO,KAAK,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,KAAK,UAAU,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAErH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,YAAY,IAAI,CACrD,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,EACrD,CAAC,EAAE;IACH,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACxC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,CAAC,EAAE,CACP,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACtC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5E,KAAK,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/C,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,YAAY,EACzD,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAC7E,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC/B,cAAc,CAAC,GAAG,CAAC,CA4CrB"}

package/dist/lib/api/form.svelte.js

@@ -1,7 +1,7 @@
 import { superForm, defaults, setError, setMessage } from 'sveltekit-superforms';
 import { valibot } from 'sveltekit-superforms/adapters';
 export function createFormFunction(schemas, request) {
-    return ({ path, method, actions, defaultValue }) => {
+    return ({ path, method, actions, defaultValue, formProps }) => {
         const schema = schemas[path]?.[method];
         if (schema === undefined)
             throw new Error('Invalid schema for form');
@@ -20,8 +20,10 @@ export function createFormFunction(schemas, request) {
                 const res = await request(path, method, form.data);
                 if (res.ok === false) {
                     const body = await res.json();
+                    // TODO set some kind of overall form error if there is no field
                     if (!body.field) {
-                        setError(form, '', body.message);
+                        setMessage(form, body.message);
+                        // setError(form, '', body.message);
                     }
                     else {
                         setError(form, body.field.name, body.field.value, { status: res.status });
@@ -37,7 +39,8 @@ export function createFormFunction(schemas, request) {
                         await actions.onSuccess(form, body);
                     }
                 }
-            }
+            },
+            ...formProps
         });
     };
 }

package/dist/lib/components/breakpoint-badge/BreakpointBadge.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+  export type SvelteBreakpointBadgeProps = { dev: boolean };
+</script>
+
+<script lang="ts">
+  const { dev = true }: SvelteBreakpointBadgeProps = $props();
+
+  const breakpoints = [
+    {
+      name: 'default',
+      bgClass: 'bg-red-100',
+      borderClass: 'border-red-300',
+      textClass: 'text-red-600',
+      hideClass: 'sm:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: 'sm',
+      bgClass: 'bg-blue-100',
+      borderClass: 'border-blue-300',
+      textClass: 'text-blue-600',
+      hideClass: 'hidden sm:block md:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: 'md',
+      bgClass: 'bg-purple-100',
+      borderClass: 'border-purple-300',
+      textClass: 'text-purple-600',
+      hideClass: 'hidden md:block lg:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: 'lg',
+      bgClass: 'bg-green-100',
+      borderClass: 'border-green-300',
+      textClass: 'text-green-800',
+      hideClass: 'hidden lg:block xl:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: 'xl',
+      bgClass: 'bg-orange-100',
+      borderClass: 'border-orange-300',
+      textClass: 'text-orange-600',
+      hideClass: 'hidden xl:block 2xl:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: '2xl',
+      bgClass: 'bg-yellow-100',
+      borderClass: 'border-yellow-300',
+      textClass: 'text-yellow-600',
+      hideClass: 'hidden 2xl:block 3xl:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: '3xl',
+      bgClass: 'bg-blue-100',
+      borderClass: 'border-blue-300',
+      textClass: 'text-blue-600',
+      hideClass: 'hidden 3xl:block 4xl:hidden',
+      rounded: 'rounded-md'
+    },
+    {
+      name: '4xl',
+      bgClass: 'bg-red-100',
+      borderClass: 'border-red-300',
+      textClass: 'text-red-600',
+      hideClass: 'hidden 4xl:block 5xl:hidden',
+      rounded: 'rounded-md'
+    }
+  ];
+</script>
+
+{#if dev}
+  <div class="w-fit">
+    {#each breakpoints as bp (bp.name)}
+      <div
+        class="{bp.rounded} {bp.bgClass} {bp.hideClass} border {bp.borderClass} px-2 text-xs font-bold {bp.textClass}"
+      >
+        {bp.name}
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/lib/components/breakpoint-badge/BreakpointBadge.svelte.d.ts

@@ -0,0 +1,7 @@
+export type SvelteBreakpointBadgeProps = {
+    dev: boolean;
+};
+declare const BreakpointBadge: import("svelte").Component<SvelteBreakpointBadgeProps, {}, "">;
+type BreakpointBadge = ReturnType<typeof BreakpointBadge>;
+export default BreakpointBadge;
+//# sourceMappingURL=BreakpointBadge.svelte.d.ts.map

package/dist/lib/components/breakpoint-badge/BreakpointBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreakpointBadge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/breakpoint-badge/BreakpointBadge.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,0BAA0B,GAAG;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC;AAuF5D,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/breakpoint-badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BreakpointBadge } from './BreakpointBadge.svelte';
+export * from './BreakpointBadge.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/breakpoint-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/breakpoint-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,0BAA0B,CAAC"}

package/dist/lib/components/breakpoint-badge/index.js

@@ -0,0 +1,2 @@
+export { default as BreakpointBadge } from './BreakpointBadge.svelte';
+export * from './BreakpointBadge.svelte';

package/dist/lib/components/carousel/carousel-content.svelte

@@ -2,7 +2,7 @@
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { getEmblaContext } from './context.js';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
 
   let {
     ref = $bindable(null),

package/dist/lib/components/carousel/carousel-dots.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { WithoutChildren } from 'bits-ui';
   import { getEmblaContext } from './context.js';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
   import { Button, type Props } from '$shadcn/button/index.js';
 
   let {

package/dist/lib/components/carousel/carousel-item.svelte

@@ -2,7 +2,7 @@
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { getEmblaContext } from './context.js';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
 
   let {
     ref = $bindable(null),

package/dist/lib/components/carousel/carousel-next.svelte

@@ -2,7 +2,7 @@
   import ArrowRight from '@lucide/svelte/icons/arrow-right';
   import type { WithoutChildren } from 'bits-ui';
   import { getEmblaContext } from './context.js';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
   import { Button, type Props } from '$shadcn/button/index.js';
   import { tv, type VariantProps } from 'tailwind-variants';
 

package/dist/lib/components/carousel/carousel-previous.svelte

@@ -2,7 +2,7 @@
   import ArrowLeft from '@lucide/svelte/icons/arrow-left';
   import type { WithoutChildren } from 'bits-ui';
   import { getEmblaContext } from './context.js';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
   import { Button, type Props } from '$shadcn/button/index.js';
   import { type VariantProps, tv } from 'tailwind-variants';
 

package/dist/lib/components/carousel/carousel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
   import emblaCarouselSvelte from 'embla-carousel-svelte';
 
   let {

package/dist/lib/components/dnd/dnd-sortable-context.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte';
 
   export type SortableContextProps = {
-    items: string[];
+    items: string[] | number[];
     children: Snippet<[]>;
   };
 </script>

package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 export type SortableContextProps = {
-    items: string[];
+    items: string[] | number[];
     children: Snippet<[]>;
 };
 import type { HTMLDivAttributes } from '../../utils/bits.js';

package/dist/lib/components/dnd/dnd-sortable-context.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dnd-sortable-context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/dnd-sortable-context.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;CACvB,CAAC;AAQJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,oBAAoB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CAAE,CAAC;AAyBjH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"dnd-sortable-context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/dnd-sortable-context.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;CACvB,CAAC;AAQJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,oBAAoB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CAAE,CAAC;AAyBjH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/lib/components/dnd/dnd-sortable-item.svelte

@@ -50,7 +50,7 @@
 
   const { attributes, listeners, node, activatorNode, transform, transition, isDragging, isSorting, isOver } =
     useSortable({
-      id: () => item.id,
+      id: () => ('id' in item ? item.id : item.idx),
       data: () => ({
         type: box.with(
           () => type,

package/dist/lib/components/dnd/sortable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sortable.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/sortable.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAO3E;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,cAAc,QAKnD;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,YAAY,QAoC5D;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,aAAa,QAkC9D;;;;;;AAED,wBAIE"}
+{"version":3,"file":"sortable.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/sortable.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAO3E;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,cAAc,QAKnD;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,YAAY,QAkD5D;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,aAAa,QAqC9D;;;;;;AAED,wBAIE"}

package/dist/lib/components/dnd/sortable.svelte.js

@@ -20,14 +20,24 @@ export function onDragEnd({ active, over, dnd }) {
     const activeData = data(active);
     const overData = data(over);
     // Add this in as well accepts.includes(activeType)
+    // console.log('Acitve/over', $state.snapshot(activeData), $state.snapshot(overData));
+    const usesId = 'id' in activeData.item.current;
     if (activeData.type.current === overData.type.current) {
         if (dnd.activeParent.id === overData.parent.current.id) {
             // Same containing list reorder
-            const oldIndex = dnd.activeParent.children.findIndex((item) => item.id === active.id);
-            const newIndex = overData.parent.current.children.findIndex((item) => item.id === over.id);
-            // console.log('Drag end reorder', oldIndex, newIndex);
+            const oldIndex = usesId
+                ? dnd.activeParent.children.findIndex((item) => item.id === active.id)
+                : activeData.item.current.idx;
+            const newIndex = usesId
+                ? overData.parent.current.children.findIndex((item) => item.id === over.id)
+                : overData.item.current.idx;
+            console.log('Drag end reorder', oldIndex, newIndex);
             if (oldIndex !== newIndex)
                 moveIndex(dnd.activeParent.children, oldIndex, newIndex);
+            // const arr = $state.snapshot(dnd.activeParent.children);
+            // const [item] = arr.splice(oldIndex, 1);
+            // arr.splice(newIndex, 0, item);
+            // activeData.parent.current.setChildren(arr);
         }
         else {
             // Move between containing lists
@@ -53,8 +63,9 @@ export function onDragOver({ active, over, dnd }) {
         throw new Error('No active parent found');
     const activeData = data(active);
     const overData = data(over);
+    const usesId = 'id' in activeData.item.current;
     // add this accepts.includes(activeType)
-    if (activeData.item.current.id === overData.item.current.id)
+    if (usesId && activeData.item.current.id === overData.item.current.id)
         return;
     if (activeData.type.current === overData.type.current) {
         if (dnd.activeParent.id === overData.parent.current.id) {

package/dist/lib/components/dnd/utils.svelte.d.ts

@@ -13,20 +13,26 @@ export type DataType = {
     type: WritableBox<string>;
     item: WritableBox<{
         id: string;
+    } | {
+        idx: number;
     }>;
     parent: WritableBox<{
         id: string;
         children: any[];
+        setChildren: (i: any[]) => void;
     }>;
 };
 export type DataInputType = {
     type: string;
     item: {
         id: string;
+    } | {
+        idx: number;
     };
     parent: {
         id: string;
         children: any[];
+        setChildren: (i: any[]) => void;
     };
 };
 export declare function data(input: {

package/dist/lib/components/dnd/utils.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/utils.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;;;;EAK3D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAKrE;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAA;KAAE,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACrB,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAA;KAAE,CAAC;CACzC,CAAC;AAGF,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,QAAQ,CAWpD"}
+{"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/utils.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;;;;EAK3D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAKrE;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,MAAM,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QAAC,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;KAAE,CAAC,CAAC;CACvF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QAAC,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;KAAE,CAAC;CAC1E,CAAC;AAGF,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,QAAQ,CAWpD"}

package/dist/lib/components/form/form-button.svelte

@@ -1,9 +1,13 @@
-<script lang="ts">
+<script module lang="ts">
   import * as Button from '$shadcn/button/index.js';
+  export type FormButtonProps = Button.Props;
+</script>
+
+<script lang="ts">
   import { cn, flyAndScale } from '../../utils/utils.js';
   import { getFormContext } from './form.svelte';
 
-  let { ref = $bindable(null), children, class: className, ...restProps }: Button.Props = $props();
+  let { ref = $bindable(null), children, class: className, ...restProps }: FormButtonProps = $props();
 
   const form = getFormContext();
   const { submitting, delayed } = form;

package/dist/lib/components/form/form-button.svelte.d.ts

@@ -1,4 +1,5 @@
 import * as Button from '$shadcn/button/index.js';
+export type FormButtonProps = Button.Props;
 declare const FormButton: import("svelte").Component<Button.Props, {}, "ref">;
 type FormButton = ReturnType<typeof FormButton>;
 export default FormButton;

package/dist/lib/components/form/form-button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AA2BlD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"form-button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-button.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC;AA8B7C,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/lib/components/form/form-control.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import type { ControlAttrs, ControlProps } from 'formsnap';
+  export type FormControlProps = ControlProps;
+</script>
+
+<script lang="ts">
+  import { Control } from 'formsnap';
+  import { getFormContext, type FormContext } from './form.svelte';
+  import type { Snippet } from 'svelte';
+  import type { Expand } from 'svelte-toolbelt';
+
+  let {
+    children: childrenProp,
+    ...restProps
+  }: Omit<FormControlProps, 'children'> & {
+    children?: Snippet<
+      [
+        {
+          props: Expand<ControlAttrs>;
+          formData: FormContext<any, any>['form'];
+        }
+      ]
+    >;
+  } = $props();
+
+  const formData = getFormContext().form;
+</script>
+
+<Control {...restProps}>
+  {#snippet children({ props })}
+    {@render childrenProp?.({ props, formData })}
+  {/snippet}
+</Control>

package/dist/lib/components/form/form-control.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ControlAttrs, ControlProps } from 'formsnap';
+export type FormControlProps = ControlProps;
+import { type FormContext } from './form.svelte';
+import type { Snippet } from 'svelte';
+import type { Expand } from 'svelte-toolbelt';
+type $$ComponentProps = Omit<FormControlProps, 'children'> & {
+    children?: Snippet<[
+        {
+            props: Expand<ControlAttrs>;
+            formData: FormContext<any, any>['form'];
+        }
+    ]>;
+};
+declare const FormControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormControl = ReturnType<typeof FormControl>;
+export default FormControl;
+//# sourceMappingURL=form-control.svelte.d.ts.map

package/dist/lib/components/form/form-control.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-control.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC3D,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC;AAI9C,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE7C,KAAK,gBAAgB,GAAI,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAChB;QACE;YACE,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;YAC5B,QAAQ,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;SACzC;KACF,CACF,CAAC;CACH,CAAC;AAyBJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/lib/components/form/form-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
-  import { cn } from '$shadcn/utils.js';
+  import { cn } from '../../utils/utils.js';
   import type { WithoutChild } from 'svelte-toolbelt';
 
   let {

package/dist/lib/components/form/form-field-errors.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
-  import { cn, type WithoutChild } from '$shadcn/utils.js';
+  import { cn } from '$shadcn/utils.js';
+  import type { WithoutChild } from 'svelte-toolbelt';
 
   let {
     ref = $bindable(null),

package/dist/lib/components/form/form-field-errors.svelte.d.ts

@@ -1,4 +1,9 @@
-declare const FormFieldErrors: import("svelte").Component<any, {}, "ref">;
+import * as FormPrimitive from 'formsnap';
+import type { WithoutChild } from 'svelte-toolbelt';
+type $$ComponentProps = WithoutChild<FormPrimitive.FieldErrorsProps> & {
+    errorClasses?: string | undefined | null;
+};
+declare const FormFieldErrors: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type FormFieldErrors = ReturnType<typeof FormFieldErrors>;
 export default FormFieldErrors;
 //# sourceMappingURL=form-field-errors.svelte.d.ts.map

package/dist/lib/components/form/form-field-errors.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-errors.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-errors.svelte.ts"],"names":[],"mappings":"AAoCA,QAAA,MAAM,eAAe,4CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"form-field-errors.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-errors.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,aAAa,MAAM,UAAU,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEnD,KAAK,gBAAgB,GAAI,YAAY,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;CAC1C,CAAC;AA6BJ,QAAA,MAAM,eAAe,yDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/form/form-field-full.svelte

@@ -1,30 +1,38 @@
+<script module lang="ts">
+  export type FormFullFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = FormFieldProps<T, U> & {
+    label: string;
+    description?: string;
+    inputProps: HTMLInputAttributes;
+  } & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;
+</script>
+
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-  import Field from './form-field.svelte';
+  import Field, { type FormFieldProps } from './form-field.svelte';
   import Label from './form-label.svelte';
   import Description from './form-description.svelte';
   import FieldErrors from './form-field-errors.svelte';
   import { Input } from '$shadcn/input/index.js';
   import * as Form from 'formsnap';
-  import type { FormPath } from 'sveltekit-superforms';
+  import { type FormPath } from 'sveltekit-superforms';
+  import { get, set } from 'radash';
   import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
   import { cn } from '../../utils/index.js';
   import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
   import { mergeProps } from 'svelte-toolbelt';
+  import { getFormContext } from './form.svelte';
 
   let {
     ref = $bindable(null),
     class: className,
-    form,
+    form = getFormContext<T, U>(),
     name,
     label,
     description = '',
     inputProps,
     ...restProps
-  }: Form.FieldProps<T, U> & { label: string; description?: string; inputProps: HTMLInputAttributes } & WithoutChildren<
-      WithElementRef<HTMLAttributes<HTMLDivElement>>
-    > = $props();
+  }: FormFullFieldProps<T, U> = $props();
 
-  const { form: formData } = form;
+  const formData = $derived(form.form);
 </script>
 
 <Field {form} {name} class={cn(className)} {...restProps}>
@@ -32,7 +40,9 @@
     {#snippet children({ props })}
       {@const inProps = mergeProps({ ...inputProps, ...props }) as typeof props}
       <Label>{label}</Label>
-      <Input {...inProps} bind:value={$formData[name]} />
+
+      <!-- get and set because we need to dynamically index $formData -->
+      <Input {...inProps} bind:value={() => get($formData, name), (v) => ($formData = set($formData, name, v))} />
     {/snippet}
   </Form.Control>
 

package/dist/lib/components/form/form-field-full.svelte.d.ts

@@ -1,13 +1,14 @@
-import * as Form from 'formsnap';
-import type { FormPath } from 'sveltekit-superforms';
-import { type WithElementRef } from 'svelte-toolbelt';
+export type FormFullFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = FormFieldProps<T, U> & {
+    label: string;
+    description?: string;
+    inputProps: HTMLInputAttributes;
+} & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;
+import { type FormFieldProps } from './form-field.svelte';
+import { type FormPath } from 'sveltekit-superforms';
+import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
-    props(): Form.FieldProps<T, U, any> & {
-        label: string;
-        description?: string;
-        inputProps: HTMLInputAttributes;
-    } & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;
+    props(): FormFullFieldProps<T, U>;
     events(): {};
     slots(): {};
     bindings(): "ref";

package/dist/lib/components/form/form-field-full.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-full.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-full.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAwB,MAAM,iBAAiB,CAAC;AAE5E,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AA+C3E,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC3E,KAAK;eAlCoD,MAAM;sBAAgB,MAAM;oBAAc,mBAAmB;;IAqCtH,MAAM;IAGN,KAAK;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9b,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACrL,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC;AACxH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"form-field-full.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-full.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAChH,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,mBAAmB,CAAC;CACjC,GAAG,eAAe,CAAC,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAGtE,OAAc,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAMjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE5E,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAoD3E,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC3E,KAAK;IAGL,MAAM;IAGN,KAAK;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9b,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACrL,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC;AACxH,eAAe,aAAa,CAAC"}

package/dist/lib/components/form/form-field.svelte

@@ -1,18 +1,28 @@
+<script module lang="ts">
+  export type FormFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<
+    FormPrimitive.FieldProps<T, U>,
+    'form'
+  > & { form?: FormPrimitive.FieldProps<T, U>['form'] } & WithoutChildren<
+      WithElementRef<HTMLAttributes<HTMLDivElement>>
+    >;
+</script>
+
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
   import * as FormPrimitive from 'formsnap';
   import type { FormPath } from 'sveltekit-superforms';
   import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
   import { cn } from '../../utils/index.js';
   import type { HTMLAttributes } from 'svelte/elements';
+  import { getFormContext } from './form.svelte';
 
   let {
     ref = $bindable(null),
     class: className,
-    form,
+    form = getFormContext<T, U>(),
     name,
     children: childrenProp,
     ...restProps
-  }: FormPrimitive.FieldProps<T, U> & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+  }: FormFieldProps<T, U> = $props();
 </script>
 
 <FormPrimitive.Field {form} {name}>

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

@@ -1,9 +1,12 @@
+export type FormFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<FormPrimitive.FieldProps<T, U>, 'form'> & {
+    form?: FormPrimitive.FieldProps<T, U>['form'];
+} & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;
 import * as FormPrimitive from 'formsnap';
 import type { FormPath } from 'sveltekit-superforms';
-import { type WithElementRef } from 'svelte-toolbelt';
+import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
 import type { HTMLAttributes } from 'svelte/elements';
 declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
-    props(): FormPrimitive.FieldProps<T, U, any> & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;
+    props(): FormFieldProps<T, U>;
     events(): {};
     slots(): {};
     bindings(): "ref";