@kayord/ui 2.0.3 → 2.0.4

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

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

package/dist/components/ui/input-group/input-group-addon.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
-	const inputGroupAddonVariants = tv({
+	export const inputGroupAddonVariants = tv({
 		base: "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
 		variants: {
 			align: {
@@ -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,
 		align = "inline-start",
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		align?: InputGroupAddonAlign;
 	} = $props();
 </script>
 
 <div
+	bind:this={ref}
 	role="group"
 	data-slot="input-group-addon"
 	data-align={align}

package/dist/components/ui/input-group/input-group-addon.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
     align: {
         "inline-start": string;
         "inline-end": string;
@@ -22,10 +22,11 @@ declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<
     };
 }, undefined, "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
 export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     align?: InputGroupAddonAlign;
 };
-declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
 export default InputGroupAddon;

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

@@ -25,6 +25,7 @@
 	import { Button } from "../button/index.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		type = "button",
@@ -36,6 +37,13 @@
 	} = $props();
 </script>
 
-<Button {type} data-size={size} {variant} class={cn(inputGroupButtonVariants({ size }), className)} {...restProps}>
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
 	{@render children?.()}
 </Button>

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

@@ -27,6 +27,6 @@ import { Button } from "../button/index.js";
 type $$ComponentProps = Omit<ComponentProps<typeof Button>, "href" | "size"> & {
     size?: InputGroupButtonSize;
 };
-declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type InputGroupButton = ReturnType<typeof InputGroupButton>;
 export default InputGroupButton;

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

@@ -3,10 +3,16 @@
 	import type { ComponentProps } from "svelte";
 	import { Input } from "../input/index.js";
 
-	let { value = $bindable(), class: className, ...props }: ComponentProps<typeof Input> = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
 </script>
 
 <Input
+	bind:ref
 	data-slot="input-group-control"
 	class={cn(
 		"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",

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

@@ -6,6 +6,6 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;
-}, {}, "value">;
+}, {}, "value" | "ref">;
 type InputGroupInput = ReturnType<typeof InputGroupInput>;
 export default InputGroupInput;

package/dist/components/ui/input-group/input-group-text.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<HTMLSpanElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
+	bind:this={ref}
 	class={cn(
 		"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
 		className

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

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

package/dist/components/ui/input-group/input-group-textarea.svelte

@@ -3,10 +3,16 @@
 	import { Textarea } from "../textarea/index.js";
 	import type { ComponentProps } from "svelte";
 
-	let { value = $bindable(), class: className, ...props }: ComponentProps<typeof Textarea> = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
 </script>
 
 <Textarea
+	bind:ref
 	data-slot="input-group-control"
 	class={cn(
 		"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",

package/dist/components/ui/input-group/input-group-textarea.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value">;
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
 type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
 export default InputGroupTextarea;

package/dist/components/ui/input-group/input-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, ...props }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="input-group"
 	role="group"
 	class={cn(

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

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

package/dist/components/ui/item/item-actions.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="item-actions" class={cn("flex items-center gap-2", className)} {...restProps}>
+<div bind:this={ref} data-slot="item-actions" class={cn("flex items-center gap-2", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/item/item-actions.svelte.d.ts

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

package/dist/components/ui/item/item-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="item-content"
 	class={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
 	{...restProps}

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

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

package/dist/components/ui/item/item-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="item-description"
 	class={cn(
 		"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",

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

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

package/dist/components/ui/item/item-footer.svelte

@@ -1,10 +1,20 @@
 <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="item-footer" class={cn("flex basis-full items-center justify-between gap-2", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="item-footer"
+	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/item/item-footer.svelte.d.ts

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

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

@@ -1,10 +1,21 @@
 <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 role="list" data-slot="item-group" class={cn("group/item-group flex flex-col", className)} {...restProps}>
+<div
+	bind:this={ref}
+	role="list"
+	data-slot="item-group"
+	class={cn("group/item-group flex flex-col", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

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

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

@@ -1,10 +1,20 @@
 <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="item-header" class={cn("flex basis-full items-center justify-between gap-2", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="item-header"
+	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	const itemMediaVariants = tv({
+	export const itemMediaVariants = tv({
 		base: "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
 		variants: {
 			variant: {
@@ -19,17 +19,24 @@
 </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?: ItemMediaVariant } = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
 </script>
 
-<div data-slot="item-media" data-variant={variant} class={cn(itemMediaVariants({ variant }), className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="item-media"
+	data-variant={variant}
+	class={cn(itemMediaVariants({ variant }), className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
+export declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         icon: string;
@@ -19,10 +19,11 @@ declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", unknown, unknown, undefined>>;
 export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: ItemMediaVariant;
 };
-declare const ItemMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ItemMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ItemMedia = ReturnType<typeof ItemMedia>;
 export default ItemMedia;

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

@@ -3,7 +3,7 @@
 	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
 
-	let { class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
 </script>
 
-<Separator data-slot="item-separator" orientation="horizontal" class={cn("my-0", className)} {...restProps} />
+<Separator bind:ref data-slot="item-separator" orientation="horizontal" class={cn("my-0", className)} {...restProps} />

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

@@ -8,6 +8,6 @@ declare const ItemSeparator: 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 ItemSeparator = ReturnType<typeof ItemSeparator>;
 export default ItemSeparator;

package/dist/components/ui/item/item-title.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="item-title"
 	class={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
 	{...restProps}

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

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

package/dist/components/ui/item/item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	const itemVariants = tv({
+	export const itemVariants = tv({
 		base: "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
 		variants: {
 			variant: {
@@ -25,26 +25,25 @@
 </script>
 
 <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,
 		variant,
 		size,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
 		variant?: ItemVariant;
 		size?: ItemSize;
 	} = $props();
 
-	const classes = $derived(cn(itemVariants({ variant, size }), className));
-
 	const mergedProps = $derived({
-		class: classes,
+		class: cn(itemVariants({ variant, size }), className),
 		"data-slot": "item",
 		"data-variant": variant,
 		"data-size": size,
@@ -55,7 +54,7 @@
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<div {...mergedProps}>
+	<div bind:this={ref} {...mergedProps}>
 		{@render mergedProps.children?.()}
 	</div>
 {/if}

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-declare const itemVariants: import("tailwind-variants").TVReturnType<{
+export declare const itemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         outline: string;
@@ -32,15 +32,16 @@ declare const itemVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]", unknown, unknown, undefined>>;
 export type ItemSize = VariantProps<typeof itemVariants>["size"];
 export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+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>;
     }]>;
     variant?: ItemVariant;
     size?: ItemSize;
 };
-declare const Item: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Item: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Item = ReturnType<typeof Item>;
 export default Item;

package/dist/components/ui/kbd/kbd-group.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<HTMLElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<kbd data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
+<kbd bind:this={ref} data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
 	{@render children?.()}
 </kbd>

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

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