Upgraded shadcn

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/badge/badge.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		base: "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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
 		variants: {
 			variant: {
 				default:

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/button-group/button-group-separator.svelte

@@ -4,13 +4,15 @@
 	import { Separator } from "$comp/ui/separator/index.js";
 
 	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)}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/button-group/button-group-text.svelte

@@ -1,33 +1,30 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/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}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/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 "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/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}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/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: {
@@ -23,20 +23,22 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/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}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/input-group/input-group-button.svelte

@@ -25,6 +25,7 @@
 	import { Button } from "$comp/ui/button/index.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		type = "button",
@@ -37,6 +38,7 @@
 </script>
 
 <Button
+	bind:ref
 	{type}
 	data-size={size}
 	{variant}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/input-group/input-group-input.svelte

@@ -4,13 +4,15 @@
 	import { Input } from "$comp/ui/input/index.js";
 
 	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",

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/input-group/input-group-text.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/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:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
 		className

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/input-group/input-group-textarea.svelte

@@ -4,13 +4,15 @@
 	import type { ComponentProps } from "svelte";
 
 	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",

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/kbd/kbd-group.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/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>