Update shadcn-ui

Author: hhvrc

src/lib/components/ui/README.md

@@ -28,6 +28,11 @@ Now it should be easier to see what the CLI actually changed, and we can now pro
    * Update it to use our own `ColorSchemeStore` implementation instead of the one from the `svelte-sonner` package.
    * Remove `svelte-sonner` from `package.json`
 
+3. **Update `slider` component if modified**
+
+   If the `slider` component was modified by the CLI, it most likely removed the `cursor-w-resize` tailwind class.
+   * Revert the change before committing.
+
 3. **Run code formatting again**
 
    Now we need to run the code formatting again to ensure everything is consistent after the changes made in steps 1 and 2.

src/lib/components/ui/command/command-input.svelte

@@ -11,7 +11,7 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
+<div class="flex h-9 items-center gap-2 border-b pl-3 pr-8" data-slot="command-input-wrapper">
 	<SearchIcon class="size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		data-slot="command-input"

src/lib/components/ui/data-table/data-table.svelte.ts

@@ -114,6 +114,7 @@ export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
 		},
 
 		ownKeys(): (string | symbol)[] {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
 			const all = new Set<string | symbol>();
 			for (const s of sources) {
 				const obj = resolve(s);

src/lib/components/ui/data-table/flex-render.svelte

@@ -4,6 +4,7 @@
 >
 	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
 	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	import type { Attachment } from "svelte/attachments";
 	type Props = {
 		/** The cell or header field of the current cell's column definition. */
 		content?: TContext extends HeaderContext<TData, TValue>
@@ -13,9 +14,12 @@
 				: never;
 		/** The result of the `getContext()` function of the header or cell */
 		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
 	};
 
-	let { content, context }: Props = $props();
+	let { content, context, attach }: Props = $props();
 </script>
 
 {#if typeof content === "string"}
@@ -26,10 +30,10 @@
 	{@const result = content(context as any)}
 	{#if result instanceof RenderComponentConfig}
 		{@const { component: Component, props } = result}
-		<Component {...props} />
+		<Component {...props} {attach} />
 	{:else if result instanceof RenderSnippetConfig}
 		{@const { snippet, params } = result}
-		{@render snippet(params)}
+		{@render snippet({ ...params, attach })}
 	{:else}
 		{result}
 	{/if}

src/lib/components/ui/dialog/dialog-content.svelte

@@ -33,7 +33,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>

src/lib/components/ui/form/form-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button/index.js";
+	import { Button, type ButtonProps } from "$lib/components/ui/button/index.js";
 
-	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
+	let { ref = $bindable(null), ...restProps }: ButtonProps = $props();
 </script>
 
-<Button.Root bind:ref type="submit" {...restProps} />
+<Button bind:ref type="submit" {...restProps} />

src/lib/components/ui/input/input.svelte

@@ -15,16 +15,17 @@
 		type,
 		files = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 </script>
 
 {#if type === "file"}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
@@ -37,7 +38,7 @@
 {:else}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
 			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",

src/lib/components/ui/separator/separator.svelte

@@ -5,13 +5,14 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		"data-slot": dataSlot = "separator",
 		...restProps
 	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
 	bind:ref
-	data-slot="separator"
+	data-slot={dataSlot}
 	class={cn(
 		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
 		className