Update shadcn-svelte components

Author: hhvrc

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,35 +1,40 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
 	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		checked = $bindable(false),
+		indeterminate = $bindable(false),
 		class: className,
 		children: childrenProp,
 		...restProps
-	}: WithoutChild<DropdownMenuPrimitive.CheckboxItemProps> = $props();
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
 	bind:ref
 	bind:checked
+	bind:indeterminate
 	class={cn(
 		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked })}
+	{#snippet children({ checked, indeterminate })}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
-			{#if checked === "indeterminate"}
+			{#if indeterminate}
 				<Minus class="size-4" />
 			{:else}
 				<Check class={cn("size-4", !checked && "text-transparent")} />
 			{/if}
 		</span>
-		{@render childrenProp?.({ checked })}
+		{@render childrenProp?.()}
 	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>

src/lib/components/ui/menubar/menubar-checkbox-item.svelte

@@ -1,35 +1,40 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChild } from "bits-ui";
+	import { Menubar as MenubarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
 	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
+		indeterminate = $bindable(false),
 		children: childrenProp,
 		...restProps
-	}: WithoutChild<MenubarPrimitive.CheckboxItemProps> = $props();
+	}: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <MenubarPrimitive.CheckboxItem
 	bind:ref
 	bind:checked
+	bind:indeterminate
 	class={cn(
 		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked })}
+	{#snippet children({ checked, indeterminate })}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
-			{#if checked === "indeterminate"}
+			{#if indeterminate}
 				<Minus class="size-4" />
 			{:else}
 				<Check class={cn("size-4", !checked && "text-transparent")} />
 			{/if}
 		</span>
-		{@render childrenProp?.({ checked })}
+		{@render childrenProp?.()}
 	{/snippet}
 </MenubarPrimitive.CheckboxItem>

src/lib/components/ui/menubar/menubar.svelte

@@ -11,6 +11,6 @@
 
 <MenubarPrimitive.Root
 	bind:ref
-	class={cn("bg-background flex h-16 items-center space-x-1 rounded-md border p-1", className)}
+	class={cn("bg-background flex h-10 items-center space-x-1 rounded-md border p-1", className)}
 	{...restProps}
 />

src/lib/components/ui/sonner/sonner.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
-  import { ColorSchemeStore } from '$lib/stores/ColorSchemeStore';
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { ColorSchemeStore } from '$lib/stores/ColorSchemeStore';
 
-  let restProps: SonnerProps = $props();
+	let restProps: SonnerProps = $props();
 </script>
 
 <Sonner
-  theme={$ColorSchemeStore}
-  class="toaster group"
-  toastOptions={{
-    classes: {
-      toast:
-        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-      description: 'group-[.toast]:text-muted-foreground',
-      actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-      cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-    },
-  }}
-  {...restProps}
+	theme={$ColorSchemeStore}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...restProps}
 />

src/lib/components/ui/table/table-footer.svelte

@@ -11,10 +11,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tfoot
-	bind:this={ref}
-	class={cn("bg-muted/50 text-primary-foreground font-medium", className)}
-	{...restProps}
->
+<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
 	{@render children?.()}
 </tfoot>

src/lib/hooks/is-mobile.svelte.ts

@@ -3,25 +3,25 @@ import { untrack } from "svelte";
 const MOBILE_BREAKPOINT = 768;
 
 export class IsMobile {
-  #current = $state<boolean>(false);
+	#current = $state<boolean>(false);
 
-  constructor() {
-    $effect(() => {
-      return untrack(() => {
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = () => {
-          this.#current = window.innerWidth < MOBILE_BREAKPOINT;
-        };
-        mql.addEventListener("change", onChange);
-        onChange();
-        return () => {
-          mql.removeEventListener("change", onChange);
-        };
-      });
-    });
-  }
+	constructor() {
+		$effect(() => {
+			return untrack(() => {
+				const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+				const onChange = () => {
+					this.#current = window.innerWidth < MOBILE_BREAKPOINT;
+				};
+				mql.addEventListener("change", onChange);
+				onChange();
+				return () => {
+					mql.removeEventListener("change", onChange);
+				};
+			});
+		});
+	}
 
-  get current() {
-    return this.#current;
-  }
+	get current() {
+		return this.#current;
+	}
 }