@hyvor/design 0.0.67 → 1.0.3

package/dist/marketing/Document/DocumentTitle.svelte.d.ts

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title: string;
-        subtitle?: string | undefined;
-        icon?: string | null | undefined;
-        h2Style?: string | undefined;
-        wrapStyle?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DocumentTitleProps = typeof __propDef.props;
-export type DocumentTitleEvents = typeof __propDef.events;
-export type DocumentTitleSlots = typeof __propDef.slots;
-export default class DocumentTitle extends SvelteComponent<DocumentTitleProps, DocumentTitleEvents, DocumentTitleSlots> {
-}
-export {};
+declare const DocumentTitle: import("svelte").Component<{
+    title: string;
+    subtitle?: string | undefined;
+    icon?: null | string;
+    h2Style?: string | undefined;
+    wrapStyle?: string | undefined;
+}, {}, "">;
+type DocumentTitle = ReturnType<typeof DocumentTitle>;
+export default DocumentTitle;

package/dist/marketing/Footer/Footer.svelte

@@ -1,159 +1,168 @@
-<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>
-
-    <Container>
-
-        <div class="footer-top">
-
-            <div class="footer-top-left">
-            
-                {#if email}
-                    <div class="email-wrap">
-                        <Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
-                            <IconEnvelope slot="start" />
-                            { email }
-                        </Link>
-                        <Tooltip text={emailCopied ? "Copied!" : "Copy email"} position="top">
-                            <IconButton 
-                                size="small" 
-                                variant="invisible" 
-                                on:click={handleCopy}
-                                on:mouseleave={() => emailCopied = false}
-                            >
-                                <IconCopy size={12} />
-                            </IconButton>
-                        </Tooltip>
-                    </div>
-                {/if}
-
-                <div class="social-media">
-                    {#if social.github}
-                        <a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
-                    {/if}
-                    {#if social.x}
-                        <a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
-                    {/if}
-                    {#if social.discord}
-                        <a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
-                    {/if}
-                    {#if social.youtube}
-                        <a href={social.discord} target="_blank" rel="nofollow"><IconYoutube /></a>
-                    {/if}
-                    {#if social.linkedin}
-                        <a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
-                    {/if}
-                </div>
-
-            </div>
-
-            <div class="footer-top-right">
-
-
-                <span class="language-toggle-wrap">
-                    <LanguageToggle />
-                </span>
-
-            </div>
-
-        </div>
-
-        <div class="footer-center">
-            <slot name="center" />
-        </div>
-
-        <div class="footer-bottom">
-            <div class="footer-bottom-left">
-                HYVOR © {year}
-            </div> 
-            <div class="footer-bottom-right">
-                From France 🇫🇷
-            </div>
-        </div>
-
-    </Container>
-
+	<Container>
+		<div class="footer-top">
+			<div class="footer-top-left">
+				{#if email}
+					<div class="email-wrap">
+						<Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
+							{#snippet start()}
+								<IconEnvelope />
+							{/snippet}
+							{email}
+						</Link>
+						<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
+							<IconButton
+								size="small"
+								variant="invisible"
+								on:click={handleCopy}
+								on:mouseleave={() => (emailCopied = false)}
+							>
+								<IconCopy size={12} />
+							</IconButton>
+						</Tooltip>
+					</div>
+				{/if}
+
+				<div class="social-media">
+					{#if social.github}
+						<a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
+					{/if}
+					{#if social.x}
+						<a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
+					{/if}
+					{#if social.discord}
+						<a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
+					{/if}
+					{#if social.youtube}
+						<a href={social.youtube} target="_blank" rel="nofollow"><IconYoutube /></a>
+					{/if}
+					{#if social.linkedin}
+						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
+					{/if}
+				</div>
+			</div>
+
+			<div class="footer-top-right">
+				<span class="language-toggle-wrap">
+					<LanguageToggle />
+				</span>
+			</div>
+		</div>
+
+		<div class="footer-center">
+			{@render center?.()}
+		</div>
+
+		<div class="footer-bottom">
+			<div class="footer-bottom-left">
+				HYVOR © {year}
+			</div>
+			<div class="footer-bottom-right">From France 🇫🇷</div>
+		</div>
+	</Container>
 </footer>
 
 <style>
+	footer {
+		border-top: 1px solid var(--border);
+	}
 
-    footer {
-        border-top: 1px solid var(--border)
-    }
-
-    .footer-top {
-        padding-top: 60px;
-        display: flex;
-        align-items: flex-start;
-    }
-    .footer-center {
-        padding-top: 50px;
-    }
-    .footer-top-left {
-        flex: 1;
-    }
-    .footer-top-right {
-        display: flex;
-    }
-    .email-wrap {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        margin-bottom: 15px;
-    }
-    .social-media a {
-        display: inline-block;
-        padding: 3px;
-        margin-right: 8px;
-        color: var(--text-light);
-    }
-    .social-media a:first-child {
-        padding-left: 0;
-    }
-    .social-media a:hover {
-        color: var(--accent);
-    }
-
-    .footer-bottom {
-        padding-top: 50px;
-        padding-bottom: 30px;
-        display: flex;
-    }
-    .footer-bottom-left {
-        flex: 1;
-    }
+	.footer-top {
+		padding-top: 60px;
+		display: flex;
+		align-items: flex-start;
+	}
+	.footer-center {
+		padding-top: 50px;
+	}
+	.footer-top-left {
+		flex: 1;
+	}
+	.footer-top-right {
+		display: flex;
+	}
+	.email-wrap {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		margin-bottom: 15px;
+	}
+	.social-media a {
+		display: inline-block;
+		padding: 3px;
+		margin-right: 8px;
+		color: var(--text-light);
+	}
+	.social-media a:first-child {
+		padding-left: 0;
+	}
+	.social-media a:hover {
+		color: var(--accent);
+	}
 
+	.footer-bottom {
+		padding-top: 50px;
+		padding-bottom: 30px;
+		display: flex;
+	}
+	.footer-bottom-left {
+		flex: 1;
+	}
 
 	.language-toggle-wrap {
 		margin-left: 8px;
 		font-size: 18px;
 	}
-
 </style>

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,36 +1,40 @@
-<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 />
-    </div>
+	<div class="title">{title}</div>
+	<div class="links">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
+	.link-list {
+		flex: 1;
+	}
 
-    .link-list {
-        flex: 1;
-    }
-
-    .title {
-        font-weight: 600;
-        text-transform: uppercase;
-        margin-bottom: 10px;
-    }
-
-    .links {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
+	.title {
+		font-weight: 600;
+		text-transform: uppercase;
+		margin-bottom: 10px;
+	}
 
-    .links :global(a) {
-        margin-top: 12px;
-    }
-    .links :global(a:hover) {
-        text-decoration: underline;
-    }
+	.links {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
 
-</style>
+	.links :global(a) {
+		margin-top: 12px;
+	}
+	.links :global(a:hover) {
+		text-decoration: underline;
+	}
+</style>

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,41 +1,52 @@
-<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>
-
 	<Container as="nav">
-
 		<div class="nav-start">
-            <a class="nav-brand" href="/">
-                <img src={logo} alt="Hyvor Logo" width="30" height="30" />
+			<a class="nav-brand" href="/">
+				<img src={logo} alt="Hyvor Logo" width="30" height="30" />
 				<span class="brand-product">
 					<span class="brand">{name}</span>
 					{#if subName}
 						<span class="product">{subName}</span>
 					{/if}
 				</span>
-            </a>
-        </div>
+			</a>
+		</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">
-
 			{#if darkToggle}
 				<span class="dark-toggle-wrap">
 					<DarkToggle />
@@ -60,33 +71,31 @@ export let darkToggle = true;
 					</div>
 				</Dropdown>
 			</span> -->
-
 		</div>
 
 		<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);
@@ -184,7 +193,8 @@ header :global(nav) {
     display: inline-block;
   }
 }
-.mobile-content, .mobile-inner {
+.mobile-content,
+.mobile-inner {
   display: flex;
   flex-direction: column;
 }

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;