@hyvor/design 0.0.68 → 1.0.3

package/dist/marketing/Footer/Footer.svelte

@@ -1,38 +1,53 @@
-<script>import Container from "../Container/Container.svelte";
-import {
-  IconCopy,
-  IconDiscord,
-  IconEnvelope,
-  IconGithub,
-  IconLinkedin,
-  IconTwitterX,
-  IconYoutube
-} from "@hyvor/icons";
-import Link from "../../components/Link/Link.svelte";
-import IconButton from "../../components/IconButton/IconButton.svelte";
-import Tooltip from "../../components/Tooltip/Tooltip.svelte";
-import LanguageToggle from "../../components/Internationalization/LanguageToggle.svelte";
-const year = (/* @__PURE__ */ new Date()).getFullYear();
-export let email = null;
-export let social = {};
-social = {
-  ...{
-    x: null,
-    discord: "https://discord.com/invite/2WRJxQB",
-    github: "https://github.com/hyvor",
-    youtube: "https://www.youtube.com/@HYVOR",
-    linkedin: "https://www.linkedin.com/company/30240435"
-  },
-  ...social
-};
-export let emailCopied = false;
-function handleCopy() {
-  navigator.clipboard.writeText(email);
-  emailCopied = true;
-  setTimeout(() => {
-    emailCopied = false;
-  }, 1e3);
-}
+<script lang="ts">
+	import Container from '../Container/Container.svelte';
+	import {
+		IconCopy,
+		IconDiscord,
+		IconEnvelope,
+		IconGithub,
+		IconLinkedin,
+		IconTwitterX,
+		IconYoutube
+	} from '@hyvor/icons';
+	import Link from '../../components/Link/Link.svelte';
+	import IconButton from '../../components/IconButton/IconButton.svelte';
+	import Tooltip from '../../components/Tooltip/Tooltip.svelte';
+	import LanguageToggle from '../../components/Internationalization/LanguageToggle.svelte';
+
+	const year = new Date().getFullYear();
+
+	interface Props {
+		email?: string | null;
+		social?: any;
+		emailCopied?: boolean;
+		center?: import('svelte').Snippet;
+	}
+
+	let {
+		email = null,
+		social = $bindable({} as Record<string, string | null>),
+		emailCopied = $bindable(false),
+		center
+	}: Props = $props();
+
+	social = {
+		...{
+			x: null,
+			discord: 'https://discord.com/invite/2WRJxQB',
+			github: 'https://github.com/hyvor',
+			youtube: 'https://www.youtube.com/@HYVOR',
+			linkedin: 'https://www.linkedin.com/company/30240435'
+		},
+		...social
+	};
+
+	function handleCopy() {
+		navigator.clipboard.writeText(email!);
+		emailCopied = true;
+		setTimeout(() => {
+			emailCopied = false;
+		}, 1000);
+	}
 </script>
 
 <footer>
@@ -42,7 +57,9 @@ function handleCopy() {
 				{#if email}
 					<div class="email-wrap">
 						<Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
-							<IconEnvelope slot="start" />
+							{#snippet start()}
+								<IconEnvelope />
+							{/snippet}
 							{email}
 						</Link>
 						<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
@@ -69,7 +86,7 @@ function handleCopy() {
 						<a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
 					{/if}
 					{#if social.youtube}
-						<a href={social.discord} target="_blank" rel="nofollow"><IconYoutube /></a>
+						<a href={social.youtube} target="_blank" rel="nofollow"><IconYoutube /></a>
 					{/if}
 					{#if social.linkedin}
 						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
@@ -85,7 +102,7 @@ function handleCopy() {
 		</div>
 
 		<div class="footer-center">
-			<slot name="center" />
+			{@render center?.()}
 		</div>
 
 		<div class="footer-bottom">

package/dist/marketing/Footer/Footer.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        email?: string | null | undefined;
-        social?: Record<string, string | null> | undefined;
-        emailCopied?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        center: {};
-    };
-};
-export type FooterProps = typeof __propDef.props;
-export type FooterEvents = typeof __propDef.events;
-export type FooterSlots = typeof __propDef.slots;
-export default class Footer extends SvelteComponent<FooterProps, FooterEvents, FooterSlots> {
-}
-export {};
+declare const Footer: import("svelte").Component<{
+    email?: string | null;
+    social?: any;
+    emailCopied?: boolean;
+    center?: import("svelte").Snippet;
+}, {}, "social" | "emailCopied">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/marketing/Footer/FooterLinkList.svelte

@@ -1,10 +1,16 @@
-<script>export let title;
+<script lang="ts">
+	interface Props {
+		title: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { title, children }: Props = $props();
 </script>
 
 <div class="link-list">
 	<div class="title">{title}</div>
 	<div class="links">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

package/dist/marketing/Footer/FooterLinkList.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type FooterLinkListProps = typeof __propDef.props;
-export type FooterLinkListEvents = typeof __propDef.events;
-export type FooterLinkListSlots = typeof __propDef.slots;
-export default class FooterLinkList extends SvelteComponent<FooterLinkListProps, FooterLinkListEvents, FooterLinkListSlots> {
-}
-export {};
+declare const FooterLinkList: import("svelte").Component<{
+    title: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type FooterLinkList = ReturnType<typeof FooterLinkList>;
+export default FooterLinkList;

package/dist/marketing/Header/Header.svelte

@@ -1,13 +1,27 @@
-<script>import Container from "./../Container/Container.svelte";
-import DarkToggle from "../../components/Dark/DarkToggle.svelte";
-import IconButton from "../../components/IconButton/IconButton.svelte";
-import Dropdown from "../../components/Dropdown/Dropdown.svelte";
-import Tooltip from "../../components/Tooltip/Tooltip.svelte";
-import { IconList } from "@hyvor/icons";
-export let logo;
-export let name = "HYVOR";
-export let subName = void 0;
-export let darkToggle = true;
+<script lang="ts">
+	import Container from './../Container/Container.svelte';
+	import DarkToggle from '../../components/Dark/DarkToggle.svelte';
+	import IconButton from '../../components/IconButton/IconButton.svelte';
+	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
+	import { IconList } from '@hyvor/icons';
+
+	interface Props {
+		logo: string;
+		name?: string;
+		subName?: undefined | string;
+		darkToggle?: boolean;
+		center?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+	}
+
+	let {
+		logo,
+		name = 'HYVOR',
+		subName = undefined,
+		darkToggle = true,
+		center,
+		end
+	}: Props = $props();
 </script>
 
 <header>
@@ -25,11 +39,11 @@ export let darkToggle = true;
 		</div>
 
 		<div class="nav-center">
-			<slot name="center" />
+			{@render center?.()}
 		</div>
 
 		<div class="nav-end">
-			<slot name="end" />
+			{@render end?.()}
 		</div>
 
 		<div class="dark-mobile">
@@ -61,23 +75,27 @@ export let darkToggle = true;
 
 		<span class="mobile-nav-wrap">
 			<Dropdown align="end" width={300}>
-				<IconButton variant="invisible" slot="trigger">
-					<IconList size={18} />
-				</IconButton>
-				<div slot="content" class="mobile-content">
-					<div class="mobile-inner center">
-						<slot name="center" />
-					</div>
-					<div class="mobile-inner end">
-						<slot name="end" />
+				{#snippet trigger()}
+					<IconButton variant="invisible">
+						<IconList size={18} />
+					</IconButton>
+				{/snippet}
+				{#snippet content()}
+					<div class="mobile-content">
+						<div class="mobile-inner center">
+							{@render center?.()}
+						</div>
+						<div class="mobile-inner end">
+							{@render end?.()}
+						</div>
 					</div>
-				</div>
+				{/snippet}
 			</Dropdown>
 		</span>
 	</Container>
 </header>
 
-<div class="header-space" />
+<div class="header-space"></div>
 
 <style>.header-space {
   height: var(--header-height);

package/dist/marketing/Header/Header.svelte.d.ts

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        logo: string;
-        name?: string | undefined;
-        subName?: undefined | string;
-        darkToggle?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        center: {};
-        end: {};
-    };
-};
-export type HeaderProps = typeof __propDef.props;
-export type HeaderEvents = typeof __propDef.events;
-export type HeaderSlots = typeof __propDef.slots;
-export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
-}
-export {};
+declare const Header: import("svelte").Component<{
+    logo: string;
+    name?: string;
+    subName?: undefined | string;
+    darkToggle?: boolean;
+    center?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/marketing/Logo/LogoBlogs.svelte

@@ -1,4 +1,9 @@
-<script>export let size = 40;
+<script lang="ts">
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 40 }: Props = $props();
 </script>
 
 <svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">

package/dist/marketing/Logo/LogoBlogs.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LogoBlogsProps = typeof __propDef.props;
-export type LogoBlogsEvents = typeof __propDef.events;
-export type LogoBlogsSlots = typeof __propDef.slots;
-export default class LogoBlogs extends SvelteComponent<LogoBlogsProps, LogoBlogsEvents, LogoBlogsSlots> {
-}
-export {};
+declare const LogoBlogs: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type LogoBlogs = ReturnType<typeof LogoBlogs>;
+export default LogoBlogs;

package/dist/marketing/Logo/LogoCore.svelte

@@ -1,4 +1,9 @@
-<script>export let size = 40;
+<script lang="ts">
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 40 }: Props = $props();
 </script>
 
 <svg width={size} height={size} viewBox="0 0 500 500" version="1.1">

package/dist/marketing/Logo/LogoCore.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LogoCoreProps = typeof __propDef.props;
-export type LogoCoreEvents = typeof __propDef.events;
-export type LogoCoreSlots = typeof __propDef.slots;
-export default class LogoCore extends SvelteComponent<LogoCoreProps, LogoCoreEvents, LogoCoreSlots> {
-}
-export {};
+declare const LogoCore: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type LogoCore = ReturnType<typeof LogoCore>;
+export default LogoCore;

package/dist/marketing/Logo/LogoFortguard.svelte

@@ -1,4 +1,9 @@
-<script>export let size = 40;
+<script lang="ts">
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 40 }: Props = $props();
 </script>
 
 <svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">
@@ -9,7 +14,7 @@
 		bordercolor="#666666"
 		borderopacity="1.0"
 		units="px"
-	/>
+	></sodipodi:namedview>
 	<g id="layer1">
 		<g id="g1067">
 			<rect

package/dist/marketing/Logo/LogoFortguard.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LogoFortguardProps = typeof __propDef.props;
-export type LogoFortguardEvents = typeof __propDef.events;
-export type LogoFortguardSlots = typeof __propDef.slots;
-export default class LogoFortguard extends SvelteComponent<LogoFortguardProps, LogoFortguardEvents, LogoFortguardSlots> {
-}
-export {};
+declare const LogoFortguard: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type LogoFortguard = ReturnType<typeof LogoFortguard>;
+export default LogoFortguard;

package/dist/marketing/Logo/LogoTalk.svelte

@@ -1,4 +1,9 @@
-<script>export let size = 40;
+<script lang="ts">
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 40 }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 132.292 132.292"

package/dist/marketing/Logo/LogoTalk.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LogoTalkProps = typeof __propDef.props;
-export type LogoTalkEvents = typeof __propDef.events;
-export type LogoTalkSlots = typeof __propDef.slots;
-export default class LogoTalk extends SvelteComponent<LogoTalkProps, LogoTalkEvents, LogoTalkSlots> {
-}
-export {};
+declare const LogoTalk: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type LogoTalk = ReturnType<typeof LogoTalk>;
+export default LogoTalk;

package/dist/stores/dark.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="svelte" />
 export declare const dark: import("svelte/store").Writable<boolean>;
 export declare function setInitialState(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.68",
+	"version": "1.0.3",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -34,20 +34,20 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.7",
 		"publint": "^0.1.9",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.0"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	},
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^0.0.3",
+		"@hyvor/icons": "^1.0.0",
 		"deepmerge-ts": "^5.1.0",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.5.11",