@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/ui/field/field-legend.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, variant = "legend", children, ...restProps } = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn(
+		'mb-3 font-medium',
+		'data-[variant=legend]:text-base',
+		'data-[variant=label]:text-sm',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>

package/dist/lib/components/ui/field/field-legend.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+    variant?: 'legend' | 'label';
+};
+declare const FieldLegend: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type FieldLegend = ReturnType<typeof FieldLegend>;
+export default FieldLegend;

package/dist/lib/components/ui/field/field-separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { Separator } from "../separator/index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
+	{...restProps}
+>
+	<Separator class="absolute inset-0 top-1/2" />
+	{#if children}
+		<span
+			class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+			data-slot="field-separator-content"
+		>
+			{@render children()}
+		</span>
+	{/if}
+</div>

package/dist/lib/components/ui/field/field-separator.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    children?: Snippet;
+};
+declare const FieldSeparator: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type FieldSeparator = ReturnType<typeof FieldSeparator>;
+export default FieldSeparator;

package/dist/lib/components/ui/field/field-set.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<fieldset
+	bind:this={ref}
+	data-slot="field-set"
+	class={cn(
+		'flex flex-col gap-6',
+		'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>

package/dist/lib/components/ui/field/field-set.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+declare const FieldSet: import("svelte").Component<WithElementRef<HTMLFieldsetAttributes>, {}, "ref">;
+type FieldSet = ReturnType<typeof FieldSet>;
+export default FieldSet;

package/dist/lib/components/ui/field/field-title.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-title"
+	class={cn(
+		'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/field/field-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const FieldTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type FieldTitle = ReturnType<typeof FieldTitle>;
+export default FieldTitle;

package/dist/lib/components/ui/field/field.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>import { tv } from "tailwind-variants";
+export const fieldVariants = tv({
+	base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+	variants: { orientation: {
+		vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+		horizontal: [
+			"flex-row items-center",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
+		],
+		responsive: [
+			"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+</script>
+
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, orientation = "vertical", children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/field/field.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const fieldVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
+        horizontal: string[];
+        responsive: string[];
+    };
+}, undefined, "group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
+    orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
+        horizontal: string[];
+        responsive: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
+        horizontal: string[];
+        responsive: string[];
+    };
+}, undefined>>;
+export type FieldOrientation = VariantProps<typeof fieldVariants>['orientation'];
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: FieldOrientation;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/lib/components/ui/field/index.d.ts

@@ -0,0 +1,11 @@
+import Field from './field.svelte';
+import Set from './field-set.svelte';
+import Legend from './field-legend.svelte';
+import Group from './field-group.svelte';
+import Content from './field-content.svelte';
+import Label from './field-label.svelte';
+import Title from './field-title.svelte';
+import Description from './field-description.svelte';
+import Separator from './field-separator.svelte';
+import Error from './field-error.svelte';
+export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError };

package/dist/lib/components/ui/field/index.js

@@ -0,0 +1,13 @@
+import Field from './field.svelte';
+import Set from './field-set.svelte';
+import Legend from './field-legend.svelte';
+import Group from './field-group.svelte';
+import Content from './field-content.svelte';
+import Label from './field-label.svelte';
+import Title from './field-title.svelte';
+import Description from './field-description.svelte';
+import Separator from './field-separator.svelte';
+import Error from './field-error.svelte';
+export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, 
+//
+Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError };

package/dist/lib/components/ui/focus-trap/FocusTrap.svelte

@@ -0,0 +1,174 @@
+<script lang="ts" module>/**
+* The active traps of each document in activation order. Only the innermost
+* trap handles Tab, Escape and outside clicks, so nested traps act as layers:
+* a trap holding another active trap defers to it, and among independent
+* traps the latest activation wins.
+*/
+const activeTraps = new WeakMap();
+function enterTrap(doc, entry) {
+	const stack = activeTraps.get(doc) ?? [];
+	stack.push(entry);
+	activeTraps.set(doc, stack);
+}
+function leaveTrap(doc, trap) {
+	const stack = activeTraps.get(doc);
+	if (!stack) return;
+	const index = stack.findIndex((entry) => entry.trap === trap);
+	if (index >= 0) stack.splice(index, 1);
+	if (stack.length === 0) activeTraps.delete(doc);
+}
+function isInnermostTrap(doc, trap) {
+	const stack = activeTraps.get(doc) ?? [];
+	for (let index = stack.length - 1; index >= 0; index -= 1) {
+		const entry = stack[index];
+		const holdsAnother = stack.some((other) => other !== entry && entry.container.contains(other.container));
+		if (!holdsAnother) return entry.trap === trap;
+	}
+	return false;
+}
+</script>
+
+<script lang="ts">import { untrack } from "svelte";
+let { active = true, onEscape, onClickOutside, initialFocus, restoreFocus = true, children } = $props();
+let containerElement = $state(null);
+const trap = Symbol("focus-trap");
+// Focusable elements selector
+const FOCUSABLE_ELEMENTS = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"details > summary:first-of-type"
+].join(", ");
+/** Rendered and not `visibility: hidden`; a `display: none` ancestor leaves no client rects. */
+function isVisible(element) {
+	if (element.getClientRects().length === 0) return false;
+	return element.ownerDocument.defaultView?.getComputedStyle(element).visibility !== "hidden";
+}
+function getFocusableElements(container) {
+	return Array.from(container.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(isVisible);
+}
+function handleKeyDown(event) {
+	const container = containerElement;
+	if (!active || !container || !isInnermostTrap(container.ownerDocument, trap)) return;
+	// Handle Escape key
+	if (event.key === "Escape" && onEscape) {
+		event.preventDefault();
+		onEscape();
+		return;
+	}
+	// Handle Tab key for focus trapping
+	if (event.key !== "Tab") return;
+	const focusableElements = getFocusableElements(container);
+	const firstElement = focusableElements.at(0);
+	const lastElement = focusableElements.at(-1);
+	if (!firstElement || !lastElement) {
+		// Nothing to tab to: keep focus on the trap itself.
+		event.preventDefault();
+		container.focus();
+		return;
+	}
+	const activeElement = container.ownerDocument.activeElement;
+	const focusInside = activeElement !== null && activeElement !== container && container.contains(activeElement);
+	// Focus on the trap itself or outside it re-enters at the edge Tab moves toward.
+	if (!focusInside) {
+		event.preventDefault();
+		(event.shiftKey ? lastElement : firstElement).focus();
+	} else if (event.shiftKey && activeElement === firstElement) {
+		event.preventDefault();
+		lastElement.focus();
+	} else if (!event.shiftKey && activeElement === lastElement) {
+		event.preventDefault();
+		firstElement.focus();
+	}
+}
+function handleClick(event) {
+	const container = containerElement;
+	if (!active || !onClickOutside || !container) return;
+	if (!isInnermostTrap(container.ownerDocument, trap)) return;
+	// Check if click is outside the container
+	const target = event.target;
+	if (target instanceof Node && container.contains(target)) return;
+	onClickOutside();
+}
+function setInitialFocus() {
+	const container = containerElement;
+	if (!active || !container) return;
+	// If initialFocus is specified, use it
+	if (initialFocus instanceof HTMLElement) {
+		initialFocus.focus();
+		return;
+	}
+	if (initialFocus) {
+		container.querySelector(initialFocus)?.focus();
+		return;
+	}
+	// Otherwise, focus the first focusable element or the container itself
+	const [firstElement] = getFocusableElements(container);
+	if (!firstElement) {
+		container.focus();
+		return;
+	}
+	// Don't steal focus if something inside is already focused
+	if (!container.contains(container.ownerDocument.activeElement)) firstElement.focus();
+}
+// One activation: listen, take focus once, and on deactivation or unmount
+// stop listening, cancel the pending focus and return focus where it was.
+$effect(() => {
+	const container = containerElement;
+	if (!active || !container) return;
+	const doc = container.ownerDocument;
+	const restoreTarget = untrack(() => restoreFocus) ? doc.activeElement : null;
+	enterTrap(doc, {
+		trap,
+		container
+	});
+	doc.addEventListener("keydown", handleKeyDown, true);
+	doc.addEventListener("click", handleClick, true);
+	// Focus after the children have rendered.
+	const initialFocusTimer = setTimeout(setInitialFocus, 0);
+	return () => {
+		clearTimeout(initialFocusTimer);
+		doc.removeEventListener("keydown", handleKeyDown, true);
+		doc.removeEventListener("click", handleClick, true);
+		leaveTrap(doc, trap);
+		if (restoreTarget instanceof HTMLElement && restoreTarget.isConnected) restoreTarget.focus();
+	};
+});
+</script>
+
+<div
+	bind:this={containerElement}
+	tabindex="-1"
+	class="focus-trap-container outline-none"
+	data-focus-trap={active ? 'active' : 'inactive'}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.focus-trap-container {
+		/* Ensure the container can receive focus but doesn't show outline */
+		outline: none;
+	}
+
+	.focus-trap-container:focus {
+		outline: none;
+	}
+
+	/* Ensure focusable children maintain their focus styles.
+	   `--ring` is an oklch color, so `hsl(var(--ring))` was invalid and both
+	   declarations were dropped — a focus trap that drew no focus ring. */
+	:global(.focus-trap-container *:focus) {
+		outline: 2px solid var(--ring, #2563eb);
+		outline-offset: 2px;
+	}
+
+	:global(.focus-trap-container *:focus-visible) {
+		outline: 2px solid var(--ring, #2563eb);
+		outline-offset: 2px;
+	}
+</style>

package/dist/lib/components/ui/focus-trap/FocusTrap.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+/**
+ * Props for the FocusTrap component
+ */
+interface Props {
+    /** Whether the focus trap is active */
+    active?: boolean;
+    /** Callback when user presses Escape */
+    onEscape?: () => void;
+    /** Callback when user clicks outside */
+    onClickOutside?: () => void;
+    /** Initial element to focus when trap activates */
+    initialFocus?: HTMLElement | string;
+    /** Return focus to the element focused at activation when the trap deactivates or unmounts */
+    restoreFocus?: boolean;
+    /** Children content */
+    children?: Snippet;
+}
+declare const FocusTrap: import("svelte").Component<Props, {}, "">;
+type FocusTrap = ReturnType<typeof FocusTrap>;
+export default FocusTrap;

package/dist/lib/components/ui/focus-trap/index.d.ts

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

package/dist/lib/components/ui/focus-trap/index.js

@@ -0,0 +1,2 @@
+// Focus trap component for accessibility
+export { default as FocusTrap } from './FocusTrap.svelte';

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

@@ -0,0 +1,5 @@
+<script lang="ts">import { Button } from "../button/index.js";
+let { ref = $bindable(null), ...restProps } = $props();
+</script>
+
+<Button bind:ref type="submit" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { type ButtonProps } from '../button/index.js';
+declare const FormButton: import("svelte").Component<ButtonProps, {}, "ref">;
+type FormButton = ReturnType<typeof FormButton>;
+export default FormButton;

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

@@ -0,0 +1,11 @@
+<script lang="ts">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<FormPrimitive.Description
+	bind:ref
+	data-slot="form-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import * as FormPrimitive from 'formsnap';
+declare const FormDescription: import("svelte").Component<Omit<FormPrimitive.DescriptionProps, "child">, {}, "ref">;
+type FormDescription = ReturnType<typeof FormDescription>;
+export default FormDescription;

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

@@ -0,0 +1,12 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, form, name, children: childrenProp, ...restProps } = $props();
+</script>
+
+<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/lib/components/ui/form/form-element-field.svelte.d.ts

@@ -0,0 +1,28 @@
+import * as FormPrimitive from 'formsnap';
+import type { FormPathLeaves } from 'sveltekit-superforms';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare function $$render<T extends Record<string, unknown>, U extends FormPathLeaves<T>>(): {
+    props: Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children"> & FormPrimitive.ElementFieldProps<T, U, any>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPathLeaves<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['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']>>): 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']> & {}): 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>>;
+export default FormElementField;

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

@@ -0,0 +1,20 @@
+<script lang="ts">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, errorClasses, children: childrenProp, ...restProps } = $props();
+</script>
+
+<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 (error)}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
+</FormPrimitive.FieldErrors>

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

@@ -0,0 +1,8 @@
+import * as FormPrimitive from 'formsnap';
+import { type WithoutChild } from '../../../utils.js';
+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;

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

@@ -0,0 +1,12 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, form, name, children: childrenProp, ...restProps } = $props();
+</script>
+
+<FormPrimitive.Field {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} data-slot="form-item" class={cn('space-y-2', className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.Field>

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

@@ -0,0 +1,28 @@
+import * as FormPrimitive from 'formsnap';
+import type { FormPath } from 'sveltekit-superforms';
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: FormPrimitive.FieldProps<T, U, any> & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<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 FormPath<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 FormField: $$IsomorphicComponent;
+type FormField<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormField<T, U>>;
+export default FormField;

package/dist/lib/components/ui/form/form-fieldset.svelte

@@ -0,0 +1,6 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, form, name, ...restProps } = $props();
+</script>
+
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn('space-y-2', className)} {...restProps} />

package/dist/lib/components/ui/form/form-fieldset.svelte.d.ts

@@ -0,0 +1,27 @@
+import * as FormPrimitive from 'formsnap';
+import type { FormPath } from 'sveltekit-superforms';
+import { type WithoutChild } from '../../../utils.js';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: WithoutChild<FormPrimitive.FieldsetProps<T, U>>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<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 FormPath<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 FormFieldset: $$IsomorphicComponent;
+type FormFieldset<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormFieldset<T, U>>;
+export default FormFieldset;

package/dist/lib/components/ui/form/form-label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import * as FormPrimitive from "formsnap";
+import { Label } from "../label/index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), children, class: className, ...restProps } = $props();
+</script>
+
+<FormPrimitive.Label {...restProps} bind:ref>
+	{#snippet child({ props })}
+		<Label
+			{...props}
+			data-slot="form-label"
+			class={cn('data-[fs-error]:text-destructive', className)}
+		>
+			{@render children?.()}
+		</Label>
+	{/snippet}
+</FormPrimitive.Label>

package/dist/lib/components/ui/form/form-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import * as FormPrimitive from 'formsnap';
+declare const FormLabel: import("svelte").Component<Omit<FormPrimitive.LabelProps, "child">, {}, "ref">;
+type FormLabel = ReturnType<typeof FormLabel>;
+export default FormLabel;

package/dist/lib/components/ui/form/form-legend.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<FormPrimitive.Legend
+	bind:ref
+	class={cn('text-sm leading-none font-medium data-[fs-error]:text-destructive', className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/form/form-legend.svelte.d.ts

@@ -0,0 +1,4 @@
+import * as FormPrimitive from 'formsnap';
+declare const FormLegend: import("svelte").Component<Omit<FormPrimitive.LegendProps, "child">, {}, "ref">;
+type FormLegend = ReturnType<typeof FormLegend>;
+export default FormLegend;