update components

use clsx on classnames and extend HTML element where it makes sense

src/lib/components/Actions/Button.svelte

@@ -24,7 +24,6 @@
 		children,
 		class: className,
 		color,
-		disabled,
 		full = false,
 		glass = false,
 		shape,
@@ -37,7 +36,6 @@
 
 <button
 	{...props}
-	{disabled}
 	class={twMerge('btn', clsx(className))}
 	class:btn-active={active}
 	class:no-animation={!animation}
@@ -51,7 +49,7 @@
 	class:btn-success={color === 'success'}
 	class:btn-warning={color === 'warning'}
 	class:btn-error={color === 'error'}
-	class:btn-disabled={disabled}
+	class:btn-disabled={props.disabled}
 	class:w-full={full}
 	class:glass
 	class:btn-circle={shape === 'circle'}

src/lib/components/DataInput/Textarea.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
 	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
 		bordered?: boolean;
 		color?: Omit<DaisyColor, 'neutral'>;
-		disabled?: boolean;
 		error?: string | Snippet;
-		form?: string;
 		label?: string | Snippet;
-		name?: string;
+		resizable?: boolean | 'yes' | 'no' | 'x' | 'y';
-		placeholder?: string;
 		size?: DaisySize;
-	};
+	} & SvelteHTMLElements['textarea'];
-	let { bordered, color, error, label, size, ...props }: Props = $props();
+	let {
+		bordered,
+		class: className,
+		color,
+		error,
+		label,
+		resizable,
+		size,
+		...props
+	}: Props = $props();
 </script>
 
 <label class="form-control w-full max-w-lg">
@@ -43,7 +52,8 @@
 		</span>
 	</div>
 	<textarea
-		class="textarea"
+		{...props}
+		class={twMerge('textarea', clsx(className))}
 		class:textarea-bordered={bordered}
 		class:textarea-xs={size === 'xs'}
 		class:textarea-sm={size === 'sm'}
@@ -56,6 +66,9 @@
 		class:textarea-success={color === 'success'}
 		class:textarea-warning={color === 'warning'}
 		class:textarea-error={color === 'error' || error}
-		{...props}
+		class:resize={resizable === true || resizable === 'yes'}
+		class:resize-x={resizable === 'x'}
+		class:resize-y={resizable === 'y'}
+		class:resize-none={resizable === false || resizable === 'no'}
 	></textarea>
 </label>

src/lib/components/Feedback/Alert.svelte

@@ -15,13 +15,13 @@
 </script>
 
 <div
+	{...props}
 	role="alert"
 	class={twMerge('alert', clsx(className))}
 	class:alert-info={color === 'info'}
 	class:alert-success={color === 'success'}
 	class:alert-warning={color === 'warning'}
 	class:alert-error={color === 'error'}
-	{...props}
 >
 	{@render icon?.()}
 	{@render children?.()}

src/lib/components/Feedback/Loading.svelte

@@ -1,16 +1,19 @@
 <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';
 
 	type Props = {
 		color?: Exclude<DaisyColor, 'ghost'>;
 		size?: DaisySize | 'md';
 		variant?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
-	};
+	} & Pick<SvelteHTMLElements['span'], 'class'>;
-	let { color, size = 'md', variant = 'spinner' }: Props = $props();
+	let { class: className, color, size = 'md', variant = 'spinner' }: Props = $props();
 </script>
 
 <span
-	class="loading"
+	class={twMerge('loading', clsx(className))}
 	class:text-primary={color === 'primary'}
 	class:text-secondary={color === 'secondary'}
 	class:text-accent={color === 'accent'}

src/lib/components/Feedback/Progress.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <progress
+	{...props}
 	class={twMerge('progress', clsx(className))}
 	class:progress-primary={color === 'primary'}
 	class:progress-secondary={color === 'secondary'}
@@ -19,7 +20,6 @@
 	class:progress-success={color === 'success'}
 	class:progress-warning={color === 'warning'}
 	class:progress-error={color === 'error'}
-	{...props}
 >
 	{@render children?.()}
 </progress>

src/lib/components/Feedback/Skeleton.svelte

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

src/lib/components/Feedback/Tooltip.svelte

@@ -14,6 +14,7 @@
 </script>
 
 <div
+	{...props}
 	class={twMerge('tooltip', clsx(className))}
 	class:tooltip-primary={color === 'primary'}
 	class:tooltip-secondary={color === 'secondary'}
@@ -28,7 +29,6 @@
 	class:tooltip-left={position === 'left'}
 	class:tooltip-right={position === 'right'}
 	data-tip={tip}
-	{...props}
 >
 	{@render children?.()}
 </div>

src/lib/components/Layout/Divider.svelte

@@ -13,6 +13,7 @@
 </script>
 
 <div
+	{...props}
 	class={twMerge('divider', clsx(className))}
 	class:divider-neutral={color === 'neutral'}
 	class:divider-primary={color === 'primary'}
@@ -26,7 +27,6 @@
 	class:divider-vertical={direction === 'vertical'}
 	class:divider-start={variant === 'start'}
 	class:divider-end={variant === 'end'}
-	{...props}
 >
 	{@render children?.()}
 </div>

src/lib/components/Navigation/Link.svelte

@@ -10,6 +10,7 @@
 </script>
 
 <a
+	{...props}
 	class={twMerge('link', clsx(className))}
 	class:link-primary={color === 'primary'}
 	class:link-secondary={color === 'secondary'}
@@ -19,6 +20,5 @@
 	class:link-success={color === 'success'}
 	class:link-warning={color === 'warning'}
 	class:link-error={color === 'error'}
-	class:link-hover={hover}
+	class:link-hover={hover}>{@render children?.()}</a
-	{...props}>{@render children?.()}</a
 >

src/routes/app/sms/+page.svelte

@@ -68,6 +68,7 @@
 					name="message"
 					placeholder="..."
 					form="sms"
+					resizable={false}
 				/>
 			</div>
 			<div class="card-actions justify-center px-8 pb-4">