@kayord/ui 0.11.0 → 0.12.0

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,35 +1,30 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui";
 	import Circle from "lucide-svelte/icons/circle";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = DropdownMenuPrimitive.RadioItemProps;
-	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
 </script>
 
 <DropdownMenuPrimitive.RadioItem
+	bind:ref
 	class={cn(
 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		className
 	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.RadioIndicator>
-			<Circle class="h-2 w-2 fill-current" />
-		</DropdownMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
 </DropdownMenuPrimitive.RadioItem>

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte.d.ts

@@ -1,26 +1,3 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const DropdownMenuRadioItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<DropdownMenuPrimitive.RadioItemProps, {
-    default: {};
-}>, DropdownMenuPrimitive.RadioItemEvents, {
-    default: {};
-}, {}, string>;
-type DropdownMenuRadioItem = InstanceType<typeof DropdownMenuRadioItem>;
+declare const DropdownMenuRadioItem: import("svelte").Component<Omit<DropdownMenuPrimitive.RadioItemProps, "child">, {}, "ref">;
 export default DropdownMenuRadioItem;

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -2,10 +2,7 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = DropdownMenuPrimitive.SeparatorProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
 </script>
 
-<DropdownMenuPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<DropdownMenuPrimitive.Separator bind:ref class={cn("-mx-1 my-1 h-px bg-muted", className)} {...restProps} />

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte.d.ts

@@ -1,19 +1,3 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DropdownMenuSeparator: $$__sveltets_2_IsomorphicComponent<DropdownMenuPrimitive.SeparatorProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DropdownMenuSeparator = InstanceType<typeof DropdownMenuSeparator>;
+declare const DropdownMenuSeparator: import("svelte").Component<DropdownMenuPrimitive.SeparatorProps, {}, "ref">;
 export default DropdownMenuSeparator;

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import { type WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
-	<slot />
+<span bind:this={ref} class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...restProps}>
+	{@render children?.()}
 </span>

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte.d.ts

@@ -1,28 +1,4 @@
 import type { HTMLAttributes } from "svelte/elements";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const DropdownMenuShortcut: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLSpanElement>, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type DropdownMenuShortcut = InstanceType<typeof DropdownMenuShortcut>;
+import { type WithElementRef } from "bits-ui";
+declare const DropdownMenuShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 export default DropdownMenuShortcut;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,30 +1,15 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 
-	type $$Props = DropdownMenuPrimitive.SubContentProps;
-	type $$Events = DropdownMenuPrimitive.SubContentEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		x: -10,
-		y: 0,
-	};
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
 </script>
 
 <DropdownMenuPrimitive.SubContent
-	{transition}
-	{transitionConfig}
+	bind:ref
 	class={cn(
 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
 		className
 	)}
-	{...$$restProps}
-	on:keydown
-	on:focusout
-	on:pointermove
->
-	<slot />
-</DropdownMenuPrimitive.SubContent>
+	{...restProps}
+/>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -1,26 +1,3 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const DropdownMenuSubContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<DropdownMenuPrimitive.ContentProps, {
-    default: {};
-}>, DropdownMenuPrimitive.SubContentEvents, {
-    default: {};
-}, {}, string>;
-type DropdownMenuSubContent = InstanceType<typeof DropdownMenuSubContent>;
+declare const DropdownMenuSubContent: import("svelte").Component<DropdownMenuPrimitive.SubContentProps, {}, "ref">;
 export default DropdownMenuSubContent;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -3,30 +3,26 @@
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
-	};
-	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
+	bind:ref
 	class={cn(
 		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
 		inset && "pl-8",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
+	{@render children?.()}
+	<ChevronRight class="ml-auto size-4" />
 </DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -1,32 +1,17 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const DropdownMenuSubTrigger: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    disabled?: boolean | undefined;
-    asChild?: boolean | undefined;
-    el?: HTMLDivElement | undefined;
-} & import("bits-ui/dist/internal").HTMLDivAttributes & {
+declare const DropdownMenuSubTrigger: import("svelte").Component<Omit<{
+    disabled?: boolean;
+    textValue?: string;
+    onSelect?: (event: Event) => void;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ContextMenuItemPropsWithoutHTML<{
+    _default: never;
+}>> & {
     inset?: boolean;
-}, {
-    default: {};
-}>, DropdownMenuPrimitive.SubTriggerEvents, {
-    default: {};
-}, {}, string>;
-type DropdownMenuSubTrigger = InstanceType<typeof DropdownMenuSubTrigger>;
+}, {}, "ref">;
 export default DropdownMenuSubTrigger;

package/dist/components/ui/dropdown-menu/index.js

@@ -1,18 +1,17 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
 import Item from "./dropdown-menu-item.svelte";
 import Label from "./dropdown-menu-label.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
 import RadioItem from "./dropdown-menu-radio-item.svelte";
 import Separator from "./dropdown-menu-separator.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
 const Trigger = DropdownMenuPrimitive.Trigger;
 const Group = DropdownMenuPrimitive.Group;
-export { Sub, Root, Item, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
-//
-Root as DropdownMenu, Sub as DropdownMenuSub, Item as DropdownMenuItem, Label as DropdownMenuLabel, Group as DropdownMenuGroup, Content as DropdownMenuContent, Trigger as DropdownMenuTrigger, Shortcut as DropdownMenuShortcut, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, RadioGroup as DropdownMenuRadioGroup, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, CheckboxItem as DropdownMenuCheckboxItem, };
+const RadioGroup = DropdownMenuPrimitive.RadioGroup;
+export { CheckboxItem, Content, Root as DropdownMenu, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Group as DropdownMenuGroup, GroupHeading as DropdownMenuGroupHeading, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };

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

@@ -1,10 +1,7 @@
 <script lang="ts">
 	import * as Button from "../button/index.js";
 
-	type $$Props = Button.Props;
-	type $$Events = Button.Events;
+	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
 </script>
 
-<Button.Root type="submit" on:click on:keydown {...$$restProps}>
-	<slot />
-</Button.Root>
+<Button.Root bind:ref type="submit" {...restProps} />

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

@@ -1,26 +1,3 @@
 import * as Button from "../button/index.js";
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FormButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Button.Props, {
-    default: {};
-}>, import("bits-ui").ButtonEvents, {
-    default: {};
-}, {}, string>;
-type FormButton = InstanceType<typeof FormButton>;
+declare const FormButton: import("svelte").Component<Button.Props, {}, "ref">;
 export default FormButton;

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import * as FormPrimitive from "formsnap";
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithoutChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.DescriptionProps> = $props();
 </script>
 
-<FormPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps} let:descriptionAttrs>
-	<slot {descriptionAttrs} />
-</FormPrimitive.Description>
+<FormPrimitive.Description bind:ref class={cn("text-sm text-muted-foreground", className)} {...restProps} />

package/dist/components/ui/form/form-description.svelte.d.ts

@@ -1,40 +1,3 @@
-import type { HTMLAttributes } from "svelte/elements";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FormDescription: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLSpanElement>, {
-    default: {
-        descriptionAttrs: {
-            id: string;
-            'data-fs-error': string | undefined;
-            'data-fs-description': string;
-        };
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        descriptionAttrs: {
-            id: string;
-            'data-fs-error': string | undefined;
-            'data-fs-description': string;
-        };
-    };
-}, {}, string>;
-type FormDescription = InstanceType<typeof FormDescription>;
+import * as FormPrimitive from "formsnap";
+declare const FormDescription: import("svelte").Component<Omit<FormPrimitive.DescriptionProps, "child">, {}, "ref">;
 export default FormDescription;

package/dist/components/ui/form/form-element-field.svelte

@@ -1,25 +1,29 @@
-<script lang="ts" context="module">
-	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
+<script lang="ts" module>
+	import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms";
 	type T = Record<string, unknown>;
-	type U = FormPathLeaves<T>;
+	type U = _FormPathLeaves<T>;
 </script>
 
-<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-	import type { HTMLAttributes } from "svelte/elements";
+<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T>">
 	import * as FormPrimitive from "formsnap";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLElement>;
-
-	export let form: SuperForm<T>;
-	export let name: U;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & FormPrimitive.ElementFieldProps<T, U> = $props();
 </script>
 
-<FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
-	<div class={cn("space-y-2", className)}>
-		<slot {constraints} {errors} {tainted} {value} />
-	</div>
+<FormPrimitive.ElementField {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
 </FormPrimitive.ElementField>

package/dist/components/ui/form/form-element-field.svelte.d.ts

@@ -1,35 +1,21 @@
-import type { FormPathLeaves } from "sveltekit-superforms";
-import type { HTMLAttributes } from "svelte/elements";
+import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms";
 import * as FormPrimitive from "formsnap";
-declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPathLeaves<T>> {
-    props(): FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLElement>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
-            constraints: Partial<{}> | undefined;
-            errors: string[];
-            tainted: boolean;
-            value: never;
-        };
-    };
-    bindings(): string;
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithElementRef } from "bits-ui";
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPathLeaves<T>> {
+    props(): Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children"> & FormPrimitive.ElementFieldProps<T, U, any>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']> & {
-        children?: any;
-    }>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+    new <T extends Record<string, unknown>, U extends _FormPathLeaves<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
     } & ReturnType<__sveltets_Render<T, U>['exports']>;
-    <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T, U>['events']>;
-        $$slots?: ReturnType<__sveltets_Render<T, U>['slots']>;
-        children?: any;
-    }): ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends _FormPathLeaves<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const FormElementField: $$IsomorphicComponent;
-type FormElementField<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = InstanceType<typeof FormElementField<T, U>>;
+type FormElementField<T extends Record<string, unknown>, U extends _FormPathLeaves<T>> = InstanceType<typeof FormElementField<T, U>>;
 export default FormElementField;

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

@@ -1,26 +1,27 @@
 <script lang="ts">
 	import * as FormPrimitive from "formsnap";
+	import type { WithoutChild } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = FormPrimitive.FieldErrorsProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		errorClasses,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldErrorsProps> & {
 		errorClasses?: string | undefined | null;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let errorClasses: $$Props["class"] = undefined;
+	} = $props();
 </script>
 
-<FormPrimitive.FieldErrors
-	class={cn("text-sm font-medium text-destructive", className)}
-	{...$$restProps}
-	let:errors
-	let:fieldErrorsAttrs
-	let:errorAttrs
->
-	<slot {errors} {fieldErrorsAttrs} {errorAttrs}>
-		{#each errors as error}
-			<div {...errorAttrs} class={cn(errorClasses)}>{error}</div>
-		{/each}
-	</slot>
+<FormPrimitive.FieldErrors bind:ref class={cn("text-sm font-medium text-destructive", className)} {...restProps}>
+	{#snippet children({ errors, errorProps })}
+		{#if childrenProp}
+			{@render childrenProp({ errors, errorProps })}
+		{:else}
+			{#each errors as error}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
 </FormPrimitive.FieldErrors>