svelteuidev · BeeMargarida · Nov 12, 2024 · Nov 12, 2024 · Nov 12, 2024 · Nov 24, 2024
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -12,7 +12,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
 
       - name: Install dependencies

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -9,7 +9,7 @@ jobs:
     name: Actions
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     runs-on: ubuntu-latest
     container:
       image: node:${{ matrix.node-version }}

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -14,13 +14,14 @@
 		"radix-icons-svelte": "1.2.1"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "2.0.2",
-		"@sveltejs/kit": "1.16.3",
-		"mdsvex": "0.10.6",
-		"svelte": "3.59.1",
-		"svelte-check": "3.3.2",
+		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"mdsvex": "0.12.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tslib": "2.5.0",
-		"typescript": "5.0.4",
-		"vite": "4.3.5"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	}
 }
diff --git a/apps/docs/src/app.html b/apps/docs/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/apps/docs/src/lib/components/Banner.svelte b/apps/docs/src/lib/components/Banner.svelte
@@ -1,70 +1,95 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	// @ts-nocheck
-	import { createStyles, Paper, Text } from '@svelteuidev/core';
+	import { createStyles, Paper, Text, type SvelteUITheme } from '@svelteuidev/core';
 	import { onMount } from 'svelte';
 	import { ArrowRight } from 'radix-icons-svelte';
 
-	export let href = undefined;
-	export let color = 'white';
-	export let align = 'center';
-	export let icon = ArrowRight;
-	export let iconProps = {};
-	export let themeColors = true;
+	interface Props {
+		href?: any;
+		color?: string;
+		align?: string;
+		icon?: any;
+		iconProps?: any;
+		themeColors?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	type BannerStyleParams = {
+		align: string;
+		themeColors: boolean;
+	};
+
+	let {
+		href = undefined,
+		color = 'white',
+		align = 'center',
+		icon = ArrowRight,
+		iconProps = {},
+		themeColors = true,
+		children
+	}: Props = $props();
 
-	let element;
+	let element: HTMLDivElement | undefined = $state(undefined);
 	const override = { bc: '$dark700' };
 
-	$: onMount(() => {
-		const container = document.querySelector('.container .title');
+	onMount(() => {
+		const container = document.querySelector('.container .title') as HTMLElement;
+		if (!container) return;
 		container.style.paddingTop = '4rem';
 	});
 
-	const useStyles = createStyles((_, { align, themeColors }) => ({
-		root: {
-			position: 'absolute',
-			top: 60,
-			left: 0,
-			right: 0,
-			width: '100vw',
-			textAlign: align
-		},
-		wrapper: {
-			display: 'flex',
-			alignItems: 'center',
-			justifyContent: 'center',
-			gap: '$5',
-			color: themeColors ? `$${color}` : color
-		},
-		title: {
-			color: themeColors ? `$${color}` : color
-		},
-		icon: {
-			width: '$10',
-			height: '$10'
-		}
-	}));
+	const useStyles = createStyles(
+		(_theme: SvelteUITheme, { align, themeColors }: BannerStyleParams) => ({
+			root: {
+				position: 'absolute',
+				top: 60,
+				left: 0,
+				right: 0,
+				width: '100vw',
+				textAlign: align
+			},
+			wrapper: {
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				gap: '$5',
+				color: themeColors ? `$${color}` : color
+			},
+			title: {
+				color: themeColors ? `$${color}` : color
+			},
+			icon: {
+				width: '$10',
+				height: '$10'
+			}
+		})
+	);
 
-	$: ({ classes } = useStyles({ align, themeColors }));
+	let { classes } = $derived(useStyles({ align, themeColors }));
 </script>
 
 {#if href}
 	<a {href}>
 		<Paper bind:element class={classes.root} {override} radius="xs">
+			{@const IconHref = icon}
 			<div class={classes.wrapper}>
 				<Text class={classes.title} weight="bold" tracking="tight" size="lg">
-					<slot />
+					{@render children?.()}
 				</Text>
-				<svelte:component this={icon} class={classes.icon} {...iconProps} />
+				<IconHref class={classes.icon} {...iconProps} />
 			</div>
 		</Paper>
 	</a>
 {:else}
 	<Paper bind:element class={classes.root} {override} radius="xs">
+		{@const Icon = icon}
 		<div class={classes.wrapper}>
 			<Text class={classes.title} weight="bold" tracking="tight" size="lg">
-				<slot />
+				{@render children?.()}
 			</Text>
-			<svelte:component this={icon} class={classes.icon} {...iconProps} />
+			<Icon class={classes.icon} {...iconProps} />
 		</div>
 	</Paper>
 {/if}
diff --git a/apps/docs/src/lib/components/BottomNav.svelte b/apps/docs/src/lib/components/BottomNav.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Sibling } from '@ui';
 	import { Group, Divider, Stack } from '@svelteuidev/core';
 	import { useViewportSize } from '@svelteuidev/composables';
@@ -8,23 +10,32 @@
 		next: string;
 	};
 
-	export let slug: DataType,
-		title: DataType,
-		group: DataType,
-		both = false,
-		type = 'next';
+	interface Props {
+		slug: DataType;
+		title: DataType;
+		group: DataType;
+		both?: boolean;
+		type?: string;
+	}
+
+	let { slug, title, group, both = false, type = 'next' }: Props = $props();
 
 	const data = { slug, title, package: group };
 	const viewport = useViewportSize();
-	let dataLeft, dataRight;
+	let dataLeft = $state(),
+		dataRight = $state();
 
-	$: isObj = typeof slug === 'object' && typeof title === 'object' && typeof group === 'object';
+	let isObj = $derived(
+		typeof slug === 'object' && typeof title === 'object' && typeof group === 'object'
+	);
 
-	$: if (isObj && both) {
-		dataLeft = { slug: slug.prev, title: title.prev, package: group.prev };
-		dataRight = { slug: slug.next, title: title.next, package: group.next };
-	}
-	$: ({ width } = $viewport);
+	run(() => {
+		if (isObj && both) {
+			dataLeft = { slug: slug.prev, title: title.prev, package: group.prev };
+			dataRight = { slug: slug.next, title: title.next, package: group.next };
+		}
+	});
+	let { width } = $derived($viewport);
 </script>
 
 <Divider size="lg" override={{ mt: '$20 !important' }} />

diff --git a/apps/docs/src/lib/components/CodeBlock.svelte b/apps/docs/src/lib/components/CodeBlock.svelte
@@ -2,10 +2,15 @@
 	import { Box, Button } from '@svelteuidev/core';
 	import { clipboard } from '@svelteuidev/composables';
 
-	export let message = '';
-	export let copy = false;
+	interface Props {
+		message?: string;
+		copy?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { message = '', copy = false, children }: Props = $props();
 
-	let copied = false;
+	let copied = $state(false);
 
 	function isCopied() {
 		copied = true;
@@ -16,7 +21,13 @@
 </script>
 
 <Box css={{ position: 'relative', mx: 0, my: '25px' }} root="pre">
-	<code><slot>Code</slot></code>
+	<code>
+		{#if children}
+			{@render children()}
+		{:else}
+			Code
+		{/if}
+	</code>
 	{#if copy}
 		<Button
 			variant="default"

diff --git a/apps/docs/src/lib/components/Device.svelte b/apps/docs/src/lib/components/Device.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { writable, derived } from 'svelte/store';
 
 	/**
@@ -36,13 +36,13 @@
 	 */
 	export const mouse = writable({ x: 0, y: 0 });
 
-	const mouseMove = (e) => {
+	const mouseMove = (e: MouseEvent) => {
 		mouse.update(() => ({ x: e.clientX, y: e.clientY }));
 	};
 </script>
 
 <svelte:window
-	on:mousemove={(e) => mouseMove(e)}
+	onmousemove={(e) => mouseMove(e)}
 	bind:innerHeight={$screenH}
 	bind:innerWidth={$screenW}
 	bind:scrollY={$scrollY}

diff --git a/apps/docs/src/lib/components/Heading.svelte b/apps/docs/src/lib/components/Heading.svelte
@@ -4,12 +4,23 @@
 	import { GithubLogo, Pencil1, Cube } from 'radix-icons-svelte';
 	import { screenW } from '$lib/components';
 
-	export let title: string,
+	interface Props {
+		title: string;
+		description?: boolean;
+		docs?: boolean;
+		importCode?: string;
+		source?: boolean;
+		packageGroup?: boolean;
+	}
+
+	let {
+		title,
 		description = false,
 		docs = false,
 		importCode = '',
 		source = false,
-		packageGroup = false;
+		packageGroup = false
+	}: Props = $props();
 	const links = {
 		github: 'https://github.com/svelteuidev/svelteui/blob/main/packages/',
 		docs: 'https://github.com/svelteuidev/svelteui/blob/main/apps/docs/src/routes/',
@@ -26,7 +37,7 @@
 		'@md': { code: { fontSize: '$md' } }
 	};
 
-	let copied = false;
+	let copied = $state(false);
 	function onCopy() {
 		copied = true;
 		setTimeout(() => (copied = false), 1000);
@@ -55,11 +66,11 @@
 				closeDelay={200}
 				withArrow
 				position={$screenW < 500 ? 'top' : 'right'}
-				label={copied ? 'Copied' : 'Copy'}
+				labelComponent={copied ? 'Copied' : 'Copy'}
 				color={copied ? 'green' : 'gray'}
 			>
 				<Box css={importStyles}>
-					<code use:clipboard={importCode} on:copy={onCopy}>
+					<code use:clipboard={importCode} oncopy={onCopy}>
 						{importCode}
 					</code>
 				</Box>

diff --git a/apps/docs/src/lib/components/MinorHeading.svelte b/apps/docs/src/lib/components/MinorHeading.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let title = 'Title';
-	export let date: string;
 	import { colorScheme, Stack, Text, Group, Center } from '@svelteuidev/core';
 	import { Calendar } from 'radix-icons-svelte';
+	interface Props {
+		title?: string;
+		date: string;
+	}
+
+	let { title = 'Title', date }: Props = $props();
 </script>
 
 <Stack

diff --git a/apps/docs/src/lib/components/NavigationTitle.svelte b/apps/docs/src/lib/components/NavigationTitle.svelte
@@ -1,5 +1,10 @@
-<script>
+<script lang="ts">
 	import { UnstyledButton, createStyles } from '@svelteuidev/core';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
 	const useStyles = createStyles(() => ({
 		root: {
@@ -14,11 +19,15 @@
 		}
 	}));
 
-	$: ({ classes } = useStyles());
+	let { classes } = $derived(useStyles());
 </script>
 
 <UnstyledButton class={classes.root} on:click>
 	<span class={classes.title}>
-		<slot>Title Here</slot>
+		{#if children}
+			{@render children()}
+		{:else}
+			Title Here
+		{/if}
 	</span>
 </UnstyledButton>