Chore extend svelte element on components and use clsx on class names (#63)

* update components

* update storybook, it was broken

* update components

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

* unused

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/TextInput.svelte

@@ -38,7 +38,7 @@
 <label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
 	<div class="label">
 		<span
-			class="label-text"
+			class="label-text flex items-center gap-2"
 			class:text-primary={color === 'primary'}
 			class:text-secondary={color === 'secondary'}
 			class:text-accent={color === 'accent'}

src/lib/components/DataInput/Textarea.svelte

@@ -1,25 +1,34 @@
 <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;
-		placeholder?: string;
+		resizable?: boolean | 'yes' | 'no' | 'x' | 'y';
 		size?: DaisySize;
-	};
-	let { bordered, color, error, label, size, ...props }: Props = $props();
+	} & SvelteHTMLElements['textarea'];
+	let {
+		bordered,
+		class: className,
+		color,
+		error,
+		label,
+		resizable,
+		size,
+		...props
+	}: Props = $props();
 </script>
 
 <label class="form-control w-full max-w-lg">
 	<div class="label">
 		<span
-			class="label-text"
+			class="label-text flex items-center gap-2"
 			class:text-primary={color === 'primary'}
 			class:text-secondary={color === 'secondary'}
 			class:text-accent={color === 'accent'}
@@ -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

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import type { DaisyColor } 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 = {
 		children?: Snippet;
 		icon?: Snippet;
 		status?: Extract<DaisyColor, 'info' | 'success' | 'warning' | 'error'>;
-	};
+	} & SvelteHTMLElements['div'];
 
-	let { children, icon, status: color }: Props = $props();
+	let { children, class: className, icon, status: color, ...props }: Props = $props();
 </script>
 
 <div
+	{...props}
 	role="alert"
-	class="alert"
+	class={twMerge('alert', clsx(className))}
 	class:alert-info={color === 'info'}
 	class:alert-success={color === 'success'}
 	class:alert-warning={color === 'warning'}

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';
-	};
-	let { color, size = 'md', variant = 'spinner' }: Props = $props();
+	} & Pick<SvelteHTMLElements['span'], 'class'>;
+	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 = {
-		children?: Snippet;
-	} & SvelteHTMLElements['div'];
+	type Props = 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}
-	{...props}>{@render children?.()}</a
+	class:link-hover={hover}>{@render children?.()}</a
 >

src/lib/server/crypto/encryption.ts

@@ -21,7 +21,6 @@ export function encrypt(value: string): string {
 	const key = scryptSync(password, salt, 32);
 	const iv = randomBytes(8);
 
-	// @ts-expect-error Bun typing mismatch, but it still works!
 	const cipher = createCipheriv(algorithm, key, iv);
 	const encrypted = cipher.update(value, 'utf-8', 'hex') + cipher.final('hex');
 	const authTag = cipher.getAuthTag();
@@ -33,9 +32,7 @@ export function decrypt(value: string): string {
 	const key = scryptSync(password, salt, 32);
 	const [iv, text, authTag] = deconstruct(value, iv_position);
 
-	// @ts-expect-error Bun typing mismatch, but it still works!
 	const decipher = createDecipheriv(algorithm, key, iv);
-	// @ts-expect-error Bun typing mismatch, but it still works!
 	decipher.setAuthTag(authTag);
 
 	return decipher.update(text, 'hex', 'utf-8') + decipher.final('utf-8');

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">