@orochibraru/ui 0.0.0-stage → 0.0.0

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+declare const DropdownMenuSeparator: import("svelte").Component<DropdownMenuPrimitive.SeparatorProps, {}, "ref">;
+type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
+export default DropdownMenuSeparator;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn(
+		"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "start",
+		alignOffset = -3,
+		portalProps,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<
+			ComponentProps<typeof DropdownMenuPortal>
+		>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.SubContent
+		bind:ref
+		data-slot="dropdown-menu-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-24 rounded-md p-1 shadow-lg ring-1 duration-100 z-50 origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden",
+			className,
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>

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

@@ -0,0 +1,10 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import type { ComponentProps } from "svelte";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+type $$ComponentProps = DropdownMenuPrimitive.SubContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+};
+declare const DropdownMenuSubContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
+export default DropdownMenuSubContent;

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="cn-rtl-flip ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>

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

@@ -0,0 +1,7 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+type $$ComponentProps = DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+};
+declare const DropdownMenuSubTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;
+export default DropdownMenuSubTrigger;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		...restProps
+	}: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const DropdownMenuSub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
+type DropdownMenuSub = ReturnType<typeof DropdownMenuSub>;
+export default DropdownMenuSub;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+	bind:ref
+	data-slot="dropdown-menu-trigger"
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+declare const DropdownMenuTrigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
+type DropdownMenuTrigger = ReturnType<typeof DropdownMenuTrigger>;
+export default DropdownMenuTrigger;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		...restProps
+	}: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const DropdownMenu: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -0,0 +1,18 @@
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.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 Sub from "./dropdown-menu-sub.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import Root from "./dropdown-menu.svelte";
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, 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, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };

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

@@ -0,0 +1,18 @@
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.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 Sub from "./dropdown-menu-sub.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import Root from "./dropdown-menu.svelte";
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, 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, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-content"
+	class={cn(
+		"gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-content.svelte.d.ts

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

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-description"
+	class={cn(
+		"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn("gap-2 flex max-w-sm flex-col items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-header.svelte.d.ts

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

package/dist/components/ui/empty/empty-media.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const emptyMediaVariants = tv({
+		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type EmptyMediaVariant = VariantProps<
+		typeof emptyMediaVariants
+	>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: EmptyMediaVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-media.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const emptyMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-transparent";
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6";
+    };
+}, undefined, "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: "bg-transparent";
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-transparent";
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6";
+    };
+}, undefined>>;
+export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: EmptyMediaVariant;
+};
+declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type EmptyMedia = ReturnType<typeof EmptyMedia>;
+export default EmptyMedia;

package/dist/components/ui/empty/empty-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn("text-lg font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-title.svelte.d.ts

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

package/dist/components/ui/empty/empty.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn(
+		"gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/components/ui/empty/index.d.ts

@@ -0,0 +1,7 @@
+import Content from "./empty-content.svelte";
+import Description from "./empty-description.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Root from "./empty.svelte";
+export { Root, Header, Media, Title, Description, Content, Root as Empty, Header as EmptyHeader, Media as EmptyMedia, Title as EmptyTitle, Description as EmptyDescription, Content as EmptyContent, };

package/dist/components/ui/empty/index.js

@@ -0,0 +1,9 @@
+import Content from "./empty-content.svelte";
+import Description from "./empty-description.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Root from "./empty.svelte";
+export { Root, Header, Media, Title, Description, Content, 
+//
+Root as Empty, Header as EmptyHeader, Media as EmptyMedia, Title as EmptyTitle, Description as EmptyDescription, Content as EmptyContent, };

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-content"
+	class={cn(
+		"gap-1 group/field-content flex flex-1 flex-col leading-snug",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="field-description"
+	class={cn(
+		"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+		"last:mt-0 nth-last-2:-mt-1",
+		"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

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

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

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors || errors.length === 0) return false;
+
+		// has an error but no message
+		if (errors.length === 1 && !errors[0]?.message) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const isMultipleErrors = $derived(errors && errors.length > 1);
+	const singleErrorMessage = $derived(
+		errors && errors.length === 1 && errors[0]?.message,
+	);
+</script>
+
+{#if hasContent}
+	<div
+		bind:this={ref}
+		role="alert"
+		data-slot="field-error"
+		class={cn("text-destructive text-sm font-normal", className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else if singleErrorMessage}
+			{singleErrorMessage}
+		{:else if isMultipleErrors}
+			<ul class="ml-4 flex list-disc flex-col gap-1">
+				{#each errors ?? [] as error, index (index)}
+					{#if error?.message}
+						<li>{error.message}</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}

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

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