@kayord/ui 1.1.17 → 1.1.19

package/dist/components/custom/action/Actions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as DropdownMenu from "../../ui/dropdown-menu";
-	import { Button } from "../../ui/button";
+	import { Button, buttonVariants } from "../../ui/button";
 	import EllipsisVerticalIcon from "@lucide/svelte/icons/ellipsis-vertical";
 	import { isActionGroup, isActionType, type ActionsType } from "./types";
 	import Action from "./Action.svelte";
@@ -14,15 +14,13 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger>
-		<Button {variant} {size} class={cn(className)}>
-			{#if ActionIcon}
-				<ActionIcon />
-			{:else}
-				<EllipsisVerticalIcon class="h-4 w-4" />
-			{/if}
-			{text}
-		</Button>
+	<DropdownMenu.Trigger class={cn(buttonVariants({ variant, size }), className)}>
+		{#if ActionIcon}
+			<ActionIcon />
+		{:else}
+			<EllipsisVerticalIcon class="h-4 w-4" />
+		{/if}
+		{text}
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
 		{#each actions as action}

package/dist/components/custom/data-table/VisibilitySelect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
 	import * as DropdownMenu from "../../ui/dropdown-menu";
-	import { Button } from "../../ui/button";
+	import { Button, buttonVariants } from "../../ui/button";
 	import { Settings2Icon } from "@lucide/svelte";
 	import type { Table } from "@tanstack/table-core";
 
@@ -12,10 +12,8 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger>
-		<Button variant="outline" size="sm">
-			<Settings2Icon class="mr-2 h-4 w-4" /> View
-		</Button>
+	<DropdownMenu.Trigger class={buttonVariants({ variant: "outline", size: "sm" })}>
+		<Settings2Icon /> View
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
 		<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>

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

@@ -21,6 +21,8 @@
 				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
 				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
 				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
 			},
 		},
 		defaultVariants: {

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

@@ -15,6 +15,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
@@ -30,6 +32,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -45,6 +49,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+        "icon-lg": string;
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];

package/dist/components/ui/button-group/button-group-separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Separator } from "../separator/index.js";
+
+	let { class: className, orientation = "vertical", ...restProps }: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className)}
+	{...restProps}
+/>

package/dist/components/ui/button-group/button-group-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "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").SeparatorRootPropsWithoutHTML>, {}, "">;
+type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
+export default ButtonGroupSeparator;

package/dist/components/ui/button-group/button-group-text.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		class: className,
+		child,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const classes = $derived(
+		cn(
+			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+			className
+		)
+	);
+
+	const mergedProps = $derived({
+		...restProps,
+		class: classes,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/dist/components/ui/button-group/button-group-text.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const ButtonGroupText: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonGroupText = ReturnType<typeof ButtonGroupText>;
+export default ButtonGroupText;

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

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	const buttonGroupVariants = tv({
+		base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		variants: {
+			orientation: {
+				horizontal:
+					"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+				vertical:
+					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	});
+
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		children,
+		orientation = "horizontal",
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		orientation?: ButtonGroupOrientation;
+	} = $props();
+</script>
+
+<div
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,25 @@
+import { type VariantProps } from "tailwind-variants";
+declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
+export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    orientation?: ButtonGroupOrientation;
+};
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/ui/button-group/index.d.ts

@@ -0,0 +1,4 @@
+import Root from "./button-group.svelte";
+import Text from "./button-group-text.svelte";
+import Separator from "./button-group-separator.svelte";
+export { Root, Text, Separator, Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator, };

package/dist/components/ui/button-group/index.js

@@ -0,0 +1,6 @@
+import Root from "./button-group.svelte";
+import Text from "./button-group-text.svelte";
+import Separator from "./button-group-separator.svelte";
+export { Root, Text, Separator, 
+//
+Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator, };

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+<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 { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	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,25 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const emptyMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+    };
+}, undefined, "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+    };
+}, undefined, "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: EmptyMediaVariant;
+};
+declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyMedia = ReturnType<typeof EmptyMedia>;
+export default EmptyMedia;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div 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,4 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const EmptyTitle: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type EmptyTitle = ReturnType<typeof EmptyTitle>;
+export default EmptyTitle;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.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 Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.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,14 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	data-slot="field-content"
+	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

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

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

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

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors) 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
+		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,11 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    errors?: {
+        message?: string;
+    }[];
+};
+declare const FieldError: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldError = ReturnType<typeof FieldError>;
+export default FieldError;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	data-slot="field-group"
+	class={cn(
+		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label } from "../label/index.js";
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+		"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>

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

@@ -0,0 +1,10 @@
+declare const FieldLabel: import("svelte").Component<Omit<{}, "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").BitsPrimitiveLabelAttributes, import("bits-ui").LabelRootPropsWithoutHTML>, {}, "ref">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		variant = "legend",
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLLegendElement> & {
+		variant?: "legend" | "label";
+	} = $props();
+</script>
+
+<legend
+	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>