@kayord/ui 2.0.2 → 2.0.4

package/README.md

@@ -2,14 +2,6 @@
 
 The UI components used to build kayord applications.
 
-## Update
-
-```bash
-npx shadcn-svelte@latest
-
-npx shadcn-svelte@latest update -a
-```
-
 ## Installing
 
 Pnpm command to install ui library.
@@ -17,22 +9,14 @@ Pnpm command to install ui library.
 ```bash
 # create a new project in the current directory
 pnpm add -D @kayord/ui
-# install peer dependencies
-pnpm add -D @lucide/svelte zod sveltekit-superforms tailwindcss-animate
-
+# install minimal dependencies
+pnpm add -D @lucide/svelte tw-animate-css
+# install other dependencies as required
+pnpm add -D zod sveltekit-superforms
 # include charts
 pnpm add -D layerchart@next d3-scale d3-shape @types/d3-scale @types/d3-shape
 ```
 
-### Manual Setup New Project
-
-```bash
-# Setup new sveltekit project
-npm create svelte@latest my-app
-npx svelte-add@latest tailwindcss
-pnpm i
-```
-
 ## Peer Dependencies
 
 Kayord UI exports components individually. Some components require additional peer dependencies. Install only those needed for the components you use.
@@ -96,7 +80,8 @@ pnpm add -D svelte-sonner
 
 ```css
 @import "tailwindcss";
-@import "./tailwindcss-animate.css";
+@source "../node_modules/@kayord/ui";
+@import "tw-animate-css";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -264,7 +249,7 @@ pnpm add -D svelte-sonner
 
 ```ts
 // Add to app.d.ts
-import { CustomOptions, CustomColumnMeta } from "@kayord/ui";
+import { CustomOptions, CustomColumnMeta } from "@kayord/ui/data-table";
 
 declare module "@tanstack/table-core" {
  interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}

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

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

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

@@ -8,6 +8,6 @@ declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
     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>, {}, "">;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
 type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
 export default ButtonGroupSeparator;

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

@@ -1,33 +1,30 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		child,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<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,
+		class: 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
+		),
 	});
 </script>
 
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<div {...mergedProps}>
+	<div bind:this={ref} {...mergedProps}>
 		{@render mergedProps.children?.()}
 	</div>
 {/if}

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	const buttonGroupVariants = tv({
+	export 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: {
@@ -20,20 +20,22 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		orientation = "horizontal",
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		orientation?: ButtonGroupOrientation;
 	} = $props();
 </script>
 
 <div
+	bind:this={ref}
 	role="group"
 	data-slot="button-group"
 	data-orientation={orientation}

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: string;
         vertical: string;
@@ -16,10 +16,11 @@ declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
     };
 }, 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 WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     orientation?: ButtonGroupOrientation;
 };
-declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

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

@@ -1,16 +1,22 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	export type CommandRootApi = CommandPrimitive.Root;
 
 	let {
+		api = $bindable(null),
 		ref = $bindable(null),
 		value = $bindable(""),
 		class: className,
 		...restProps
-	}: CommandPrimitive.RootProps = $props();
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
 </script>
 
 <CommandPrimitive.Root
+	bind:this={api}
 	bind:value
 	bind:ref
 	data-slot="command"

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

@@ -1,4 +1,8 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "value" | "ref">;
+export type CommandRootApi = CommandPrimitive.Root;
+type $$ComponentProps = CommandPrimitive.RootProps & {
+    api?: CommandRootApi | null;
+};
+declare const Command: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "api">;
 type Command = ReturnType<typeof Command>;
 export default Command;

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

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	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}

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

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyContent: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+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

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

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

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyDescription: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+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

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

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

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyHeader: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+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

@@ -18,18 +18,20 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		variant = "default",
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & { variant?: EmptyMediaVariant } = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="empty-icon"
 	data-variant={variant}
 	class={cn(emptyMediaVariants({ variant }), className)}

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

@@ -16,10 +16,11 @@ export declare const emptyMediaVariants: import("tailwind-variants").TVReturnTyp
     };
 }, 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 WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: EmptyMediaVariant;
 };
-declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type EmptyMedia = ReturnType<typeof EmptyMedia>;
 export default EmptyMedia;

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

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

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyTitle: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+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

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	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",

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

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

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

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

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

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const FieldContent: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+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

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLParagraphElement> = $props();
+	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-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",

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

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const FieldDescription: import("svelte").Component<HTMLAttributes<HTMLParagraphElement>, {}, "">;
+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

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		errors,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		children?: Snippet;
 		errors?: { message?: string }[];
 	} = $props();
@@ -34,6 +35,7 @@
 
 {#if hasContent}
 	<div
+		bind:this={ref}
 		role="alert"
 		data-slot="field-error"
 		class={cn("text-destructive text-sm font-normal", className)}

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

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

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

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	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",

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

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

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

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

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

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

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

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Separator } from "../separator/index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		children?: Snippet;
 	} = $props();
 
@@ -16,6 +17,7 @@
 </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)}

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

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