Bug: use clsx on svelte element classNames (#60)

use clsx on svelte element classNames

package.json

@@ -74,6 +74,7 @@
 		"@prisma/client": "6.0.1",
 		"@tailwindcss/typography": "^0.5.15",
 		"clerk-sveltekit": "https://pkg.pr.new/wobsoriano/clerk-sveltekit@ca15d4e",
+		"clsx": "^2.1.1",
 		"dayjs": "^1.11.13",
 		"eslint_d": "^14.3.0",
 		"graphql": "^16.9.0",

src/lib/components/Actions/Button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
@@ -37,7 +38,7 @@
 <button
 	{...props}
 	{disabled}
-	class={twMerge('btn', className)}
+	class={twMerge('btn', clsx(className))}
 	class:btn-active={active}
 	class:no-animation={!animation}
 	class:btn-block={block}

src/lib/components/DataInput/TextInput.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
 	import { fade as fadeTransition } from 'svelte/transition';
+	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
 		bordered?: boolean;
@@ -21,17 +23,14 @@
 
 	let {
 		bordered = false,
+		class: className,
 		color,
-		disabled,
 		error,
 		fade,
 		start,
 		end,
 		label,
-		name,
-		placeholder,
 		size,
-		type = 'text',
 		...props
 	}: Props = $props();
 </script>
@@ -82,7 +81,7 @@
 		{:else}
 			{@render start?.()}
 		{/if}
-		<input {...props} {disabled} {name} {placeholder} {type} class="grow" />
+		<input {...props} class={twMerge('grow', clsx(className))} />
 		{#if typeof end === 'string'}
 			{end}
 		{:else}
@@ -90,6 +89,3 @@
 		{/if}
 	</div>
 </label>
-
-<style>
-</style>

src/lib/components/Feedback/Progress.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import clsx from 'clsx';
 	import type { DaisyColor } from '$lib/types';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
@@ -10,7 +11,7 @@
 </script>
 
 <progress
-	class={twMerge(className, 'progress')}
+	class={twMerge('progress', clsx(className))}
 	class:progress-primary={color === 'primary'}
 	class:progress-secondary={color === 'secondary'}
 	class:progress-accent={color === 'accent'}

src/lib/components/Feedback/Skeleton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import clsx from 'clsx';
 	import type { Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
@@ -9,4 +10,4 @@
 	let { children, class: className, ...props }: Props = $props();
 </script>
 
-<div {...props} class={twMerge('skeleton', className)}>{@render children?.()}</div>
+<div {...props} class={twMerge('skeleton', clsx(className))}>{@render children?.()}</div>

src/lib/components/Feedback/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
@@ -13,7 +14,7 @@
 </script>
 
 <div
-	class={twMerge('tooltip', className)}
+	class={twMerge('tooltip', clsx(className))}
 	class:tooltip-primary={color === 'primary'}
 	class:tooltip-secondary={color === 'secondary'}
 	class:tooltip-accent={color === 'accent'}

src/lib/components/Layout/Divider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
@@ -12,7 +13,7 @@
 </script>
 
 <div
-	class={twMerge('divider', className)}
+	class={twMerge('divider', clsx(className))}
 	class:divider-neutral={color === 'neutral'}
 	class:divider-primary={color === 'primary'}
 	class:divider-secondary={color === 'secondary'}

src/lib/components/Navigation/Link.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
@@ -9,7 +10,7 @@
 </script>
 
 <a
-	class={twMerge(className, 'link')}
+	class={twMerge('link', clsx(className))}
 	class:link-primary={color === 'primary'}
 	class:link-secondary={color === 'secondary'}
 	class:link-accent={color === 'accent'}