@kayord/ui 0.4.5 → 0.5.1

package/dist/components/custom/data-table/DataTableCheckbox.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: Omit<import("bits-ui/dist/bits/checkbox/types").Props, "checked"> & {
+        checked: Writable<boolean>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DataTableCheckboxProps_ = typeof __propDef.props;
+export { DataTableCheckboxProps_ as DataTableCheckboxProps };
+export type DataTableCheckboxEvents = typeof __propDef.events;
+export type DataTableCheckboxSlots = typeof __propDef.slots;
+export default class DataTableCheckbox extends SvelteComponent<DataTableCheckboxProps_, DataTableCheckboxEvents, DataTableCheckboxSlots> {
+}

package/dist/components/ui/accordion/accordion-trigger.svelte

@@ -1,5 +1,5 @@
 <script>import { Accordion as AccordionPrimitive } from "bits-ui";
-import { ChevronDown } from "lucide-svelte";
+import ChevronDown from "lucide-svelte/icons/chevron-down";
 import { cn } from "../../../utils";
 let className = void 0;
 export let level = 3;

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -13,7 +13,7 @@ export { className as class };
 		{transition}
 		{transitionConfig}
 		class={cn(
-			"fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
 			className
 		)}
 		{...$$restProps}

package/dist/components/ui/calendar/calendar-cell.svelte

@@ -8,7 +8,7 @@ export { className as class };
 <CalendarPrimitive.Cell
 	{date}
 	class={cn(
-		"h-9 w-9 text-center text-sm p-0 relative [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+		"relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
 		className
 	)}
 	{...$$restProps}

package/dist/components/ui/calendar/calendar-day.svelte

@@ -16,13 +16,13 @@ export { className as class };
 		"h-9 w-9 p-0 font-normal ",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
 		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
 		// Disabled
 		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
-		"data-[unavailable]:line-through data-[unavailable]:text-destructive-foreground",
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
 		// Outside months
-		"data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30 data-[outside-month]:pointer-events-none",
+		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
 		className
 	)}
 	{...$$restProps}

package/dist/components/ui/calendar/calendar-head-cell.svelte

@@ -5,7 +5,7 @@ export { className as class };
 </script>
 
 <CalendarPrimitive.HeadCell
-	class={cn("text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", className)}
+	class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
 	{...$$restProps}
 >
 	<slot />

package/dist/components/ui/calendar/calendar-header.svelte

@@ -5,7 +5,7 @@ export { className as class };
 </script>
 
 <CalendarPrimitive.Header
-	class={cn("flex justify-between pt-1 relative items-center w-full", className)}
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
 	{...$$restProps}
 >
 	<slot />

package/dist/components/ui/calendar/calendar-months.svelte

@@ -3,6 +3,6 @@ let className = void 0;
 export { className as class };
 </script>
 
-<div class={cn("flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 mt-4", className)} {...$$restProps}>
+<div class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)} {...$$restProps}>
 	<slot />
 </div>

package/dist/components/ui/calendar/calendar-next-button.svelte

@@ -1,5 +1,5 @@
 <script>import { Calendar as CalendarPrimitive } from "bits-ui";
-import { ChevronRight } from "lucide-svelte";
+import ChevronRight from "lucide-svelte/icons/chevron-right";
 import { buttonVariants } from "../button";
 import { cn } from "../../../utils";
 let className = void 0;

package/dist/components/ui/calendar/calendar-prev-button.svelte

@@ -1,5 +1,5 @@
 <script>import { Calendar as CalendarPrimitive } from "bits-ui";
-import { ChevronLeft } from "lucide-svelte";
+import ChevronLeft from "lucide-svelte/icons/chevron-left";
 import { buttonVariants } from "../button";
 import { cn } from "../../../utils";
 let className = void 0;

package/dist/components/ui/calendar/calendar.svelte

@@ -37,7 +37,7 @@ export { className as class };
 				</Calendar.GridHead>
 				<Calendar.GridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="w-full mt-2">
+						<Calendar.GridRow class="mt-2 w-full">
 							{#each weekDates as date}
 								<Calendar.Cell {date}>
 									<Calendar.Day {date} month={month.value} />

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

@@ -1,6 +1,6 @@
 <script>import { Button, buttonVariants } from "../button/index.js";
 import { cn } from "../../../utils";
-import { ArrowRight } from "lucide-svelte";
+import ArrowRight from "lucide-svelte/icons/arrow-right";
 import { getEmblaContext } from "./context.js";
 let className = void 0;
 export { className as class };
@@ -13,7 +13,7 @@ const { orientation, canScrollNext, scrollNext, handleKeyDown } = getEmblaContex
 	{variant}
 	{size}
 	class={cn(
-		"absolute h-8 w-8 rounded-full touch-manipulation",
+		"absolute h-8 w-8 touch-manipulation rounded-full",
 		$orientation === "horizontal"
 			? "-right-12 top-1/2 -translate-y-1/2"
 			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",

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

@@ -1,6 +1,6 @@
 <script>import { Button, buttonVariants } from "../button/index.js";
 import { cn } from "../../../utils.js";
-import { ArrowLeft } from "lucide-svelte";
+import ArrowLeft from "lucide-svelte/icons/arrow-left";
 import { getEmblaContext } from "./context.js";
 let className = void 0;
 export { className as class };
@@ -13,7 +13,7 @@ const { orientation, canScrollPrev, scrollPrev, handleKeyDown } = getEmblaContex
 	{variant}
 	{size}
 	class={cn(
-		"absolute h-8 w-8 rounded-full touch-manipulation",
+		"absolute h-8 w-8 touch-manipulation rounded-full",
 		$orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
 		className
 	)}

package/dist/components/ui/carousel/carousel.svelte.d.ts

@@ -16,5 +16,5 @@ type CarouselProps_ = typeof __propDef.props;
 export { CarouselProps_ as CarouselProps };
 export type CarouselEvents = typeof __propDef.events;
 export type CarouselSlots = typeof __propDef.slots;
-export default class Carousel extends SvelteComponent<CarouselProps, CarouselEvents, CarouselSlots> {
+export default class Carousel extends SvelteComponent<CarouselProps_, CarouselEvents, CarouselSlots> {
 }

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,5 +1,6 @@
 <script>import { Checkbox as CheckboxPrimitive } from "bits-ui";
-import { Check, Minus } from "lucide-svelte";
+import Check from "lucide-svelte/icons/check";
+import Minus from "lucide-svelte/icons/minus";
 import { cn } from "../../../utils";
 let className = void 0;
 export let checked = false;
@@ -8,7 +9,7 @@ export { className as class };
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked
@@ -16,7 +17,7 @@ export { className as class };
 	on:click
 >
 	<CheckboxPrimitive.Indicator
-		class={cn("flex items-center justify-center text-current h-4 w-4")}
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
 		let:isChecked
 		let:isIndeterminate
 	>

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
-        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
+        onOutsideClick?: ((event: MouseEvent | TouchEvent | PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("bits-ui/dist/internal").OnChangeFn<boolean> | undefined;

package/dist/components/ui/command/command-input.svelte

@@ -1,5 +1,5 @@
 <script>import { Command as CommandPrimitive } from "cmdk-sv";
-import { Search } from "lucide-svelte";
+import Search from "lucide-svelte/icons/search";
 import { cn } from "../../../utils";
 let className = void 0;
 export { className as class };

package/dist/components/ui/command/command.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Command as CommandPrimitive } from "cmdk-sv";
+declare const __propDef: {
+    props: CommandPrimitive.CommandProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type CommandProps_ = typeof __propDef.props;
+export { CommandProps_ as CommandProps };
+export type CommandEvents = typeof __propDef.events;
+export type CommandSlots = typeof __propDef.slots;
+export default class Command extends SvelteComponent<CommandProps_, CommandEvents, CommandSlots> {
+}

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,6 +1,6 @@
 <script>import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import Check from "lucide-svelte/icons/check";
 import { cn } from "../../../utils";
-import { Check } from "lucide-svelte";
 let className = void 0;
 export let checked = void 0;
 export { className as class };
@@ -9,7 +9,7 @@ export { className as class };
 <ContextMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"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
 	)}
 	{...$$restProps}

package/dist/components/ui/context-menu/context-menu-item.svelte

@@ -7,7 +7,7 @@ export { className as class };
 
 <ContextMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}

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

@@ -1,6 +1,6 @@
 <script>import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import Circle from "lucide-svelte/icons/circle";
 import { cn } from "../../../utils";
-import { Circle } from "lucide-svelte";
 let className = void 0;
 export let value;
 export { className as class };
@@ -8,7 +8,7 @@ export { className as class };
 
 <ContextMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"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}

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

@@ -1,6 +1,6 @@
 <script>import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import ChevronRight from "lucide-svelte/icons/chevron-right";
 import { cn } from "../../../utils";
-import { ChevronRight } from "lucide-svelte";
 let className = void 0;
 export let inset = void 0;
 export { className as class };
@@ -8,7 +8,7 @@ export { className as class };
 
 <ContextMenuPrimitive.SubTrigger
 	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-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+		"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
 	)}

package/dist/components/ui/dialog/dialog-content.svelte

@@ -1,7 +1,7 @@
 <script>import { Dialog as DialogPrimitive } from "bits-ui";
+import X from "lucide-svelte/icons/x";
 import * as Dialog from ".";
 import { cn, flyAndScale } from "../../../utils";
-import { X } from "lucide-svelte";
 let className = void 0;
 export let transition = flyAndScale;
 export let transitionConfig = {

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

@@ -1,6 +1,6 @@
 <script>import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Check from "lucide-svelte/icons/check";
 import { cn } from "../../../utils";
-import { Check } from "lucide-svelte";
 let className = void 0;
 export let checked = void 0;
 export { className as class };
@@ -9,7 +9,7 @@ export { className as class };
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"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
 	)}
 	{...$$restProps}

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

@@ -7,7 +7,7 @@ export { className as class };
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}

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

@@ -1,6 +1,6 @@
 <script>import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Circle from "lucide-svelte/icons/circle";
 import { cn } from "../../../utils";
-import { Circle } from "lucide-svelte";
 let className = void 0;
 export let value;
 export { className as class };
@@ -8,7 +8,7 @@ export { className as class };
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"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}

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

@@ -1,6 +1,6 @@
 <script>import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import ChevronRight from "lucide-svelte/icons/chevron-right";
 import { cn } from "../../../utils";
-import { ChevronRight } from "lucide-svelte";
 let className = void 0;
 export let inset = void 0;
 export { className as class };

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

@@ -1,6 +1,6 @@
 <script>import * as Button from "../button";
 </script>
 
-<Button.Root type="submit" {...$$restProps} on:click on:keydown>
+<Button.Root type="submit" {...$$restProps}>
 	<slot />
 </Button.Root>

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

@@ -2,10 +2,12 @@ import { SvelteComponent } from "svelte";
 import * as Button from "../button";
 declare const __propDef: {
     props: Button.Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
     slots: {
         default: {};
     };
-    events: import("bits-ui/dist/bits/button/types").Events;
 };
 export type FormButtonProps = typeof __propDef.props;
 export type FormButtonEvents = typeof __propDef.events;

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

@@ -1,9 +1,9 @@
-<script>import { Form as FormPrimitive } from "formsnap";
+<script>import * as FormPrimitive from "formsnap";
 import { cn } from "../../../utils";
 let className = void 0;
 export { className as class };
 </script>
 
-<FormPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
-	<slot />
+<FormPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps} let:descriptionAttrs>
+	<slot {descriptionAttrs} />
 </FormPrimitive.Description>

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

@@ -6,7 +6,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            descriptionAttrs: {
+                id: string;
+                'data-fs-error': string | undefined;
+                'data-fs-description': string;
+            };
+        };
     };
 };
 export type FormDescriptionProps = typeof __propDef.props;

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

@@ -0,0 +1,15 @@
+<script context="module"></script>
+
+<script generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils";
+export let form;
+export let name;
+let className = void 0;
+export { className as class };
+</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>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { FormPathLeaves } from "sveltekit-superforms";
+import type { HTMLAttributes } from "svelte/elements";
+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;
+        };
+    };
+}
+export type FormElementFieldProps<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = ReturnType<__sveltets_Render<T, U>['props']>;
+export type FormElementFieldEvents<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = ReturnType<__sveltets_Render<T, U>['events']>;
+export type FormElementFieldSlots<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = ReturnType<__sveltets_Render<T, U>['slots']>;
+export default class FormElementField<T extends Record<string, unknown>, U extends FormPathLeaves<T>> extends SvelteComponent<FormElementFieldProps<T, U>, FormElementFieldEvents<T, U>, FormElementFieldSlots<T, U>> {
+}
+export {};

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

@@ -0,0 +1,20 @@
+<script>import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+export let errorClasses = void 0;
+</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>

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        asChild?: boolean | undefined;
+        el?: HTMLDivElement | undefined;
+    } & import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        errorClasses?: string | undefined | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            errors: string[];
+            fieldErrorsAttrs: {
+                id: string;
+                'data-fs-error': string | undefined;
+                'data-fs-field-errors': string;
+                'aria-live': "assertive";
+            };
+            errorAttrs: {
+                'data-fs-field-error': string;
+                'data-fs-error': string | undefined;
+            };
+        };
+    };
+};
+export type FormFieldErrorsProps = typeof __propDef.props;
+export type FormFieldErrorsEvents = typeof __propDef.events;
+export type FormFieldErrorsSlots = typeof __propDef.slots;
+export default class FormFieldErrors extends SvelteComponent<FormFieldErrorsProps, FormFieldErrorsEvents, FormFieldErrorsSlots> {
+}
+export {};

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

@@ -0,0 +1,15 @@
+<script context="module"></script>
+
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils";
+export let form;
+export let name;
+let className = void 0;
+export { className as class };
+</script>
+
+<FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
+	<div class={cn("space-y-2", className)}>
+		<slot {constraints} {errors} {tainted} {value} />
+	</div>
+</FormPrimitive.Field>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { FormPath } from "sveltekit-superforms";
+import type { HTMLAttributes } from "svelte/elements";
+import * as FormPrimitive from "formsnap";
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            constraints: Partial<{}> | undefined;
+            errors: string[];
+            tainted: boolean;
+            value: unknown;
+        };
+    };
+}
+export type FormFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = ReturnType<__sveltets_Render<T, U>['props']>;
+export type FormFieldEvents<T extends Record<string, unknown>, U extends FormPath<T>> = ReturnType<__sveltets_Render<T, U>['events']>;
+export type FormFieldSlots<T extends Record<string, unknown>, U extends FormPath<T>> = ReturnType<__sveltets_Render<T, U>['slots']>;
+export default class FormField<T extends Record<string, unknown>, U extends FormPath<T>> extends SvelteComponent<FormFieldProps<T, U>, FormFieldEvents<T, U>, FormFieldSlots<T, U>> {
+}
+export {};

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

@@ -0,0 +1,21 @@
+<script context="module"></script>
+
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>">import * as FormPrimitive from "formsnap";
+import { cn } from "../../../utils";
+export let form;
+export let name;
+let className = void 0;
+export { className as class };
+</script>
+
+<FormPrimitive.Fieldset
+	{form}
+	{name}
+	let:constraints
+	let:errors
+	let:tainted
+	let:value
+	class={cn("space-y-2", className)}
+>
+	<slot {constraints} {errors} {tainted} {value} />
+</FormPrimitive.Fieldset>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { FormPath } from "sveltekit-superforms";
+import * as FormPrimitive from "formsnap";
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): FormPrimitive.FieldsetProps<T, U>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            constraints: Partial<{}> | undefined;
+            errors: string[];
+            tainted: boolean;
+            value: unknown;
+        };
+    };
+}
+export type FormFieldsetProps<T extends Record<string, unknown>, U extends FormPath<T>> = ReturnType<__sveltets_Render<T, U>['props']>;
+export type FormFieldsetEvents<T extends Record<string, unknown>, U extends FormPath<T>> = ReturnType<__sveltets_Render<T, U>['events']>;
+export type FormFieldsetSlots<T extends Record<string, unknown>, U extends FormPath<T>> = ReturnType<__sveltets_Render<T, U>['slots']>;
+export default class FormFieldset<T extends Record<string, unknown>, U extends FormPath<T>> extends SvelteComponent<FormFieldsetProps<T, U>, FormFieldsetEvents<T, U>, FormFieldsetSlots<T, U>> {
+}
+export {};

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

@@ -1,11 +1,11 @@
-<script>import { getFormField } from "formsnap";
+<script>import { getFormControl } from "formsnap";
 import { cn } from "../../../utils";
 import { Label } from "../label";
 let className = void 0;
 export { className as class };
-const { errors, ids } = getFormField();
+const { labelAttrs } = getFormControl();
 </script>
 
-<Label for={$ids.input} class={cn($errors && "text-destructive", className)} {...$$restProps}>
-	<slot />
+<Label {...$labelAttrs} class={cn("data-[fs-error]:text-destructive", className)} {...$$restProps}>
+	<slot {labelAttrs} />
 </Label>

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

@@ -6,7 +6,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            labelAttrs: import("svelte/store").Writable<import("formsnap").LabelAttrs>;
+        };
     };
 };
 export type FormLabelProps = typeof __propDef.props;