@hyvor/design 1.0.3 → 1.0.6

package/dist/marketing/Document/Document.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import FeatureSectionTitle from './DocumentTitle.svelte';
+	import { page } from '$app/stores';
+	import DocumentTitle from './DocumentTitle.svelte';
 
 	interface Props {
 		title: string;
@@ -8,12 +11,42 @@
 	}
 
 	let { title, subtitle, children }: Props = $props();
+
+	function linkifyHeadings() {
+		var hs = document.querySelectorAll('h2[id],h3[id],h4[id]');
+		for (var i = 0; i < hs.length; i++) {
+			var h = hs[i];
+
+			var icon = document.createElement('a');
+			icon.className = 'heading-anchor-link';
+			icon.innerHTML =
+				'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>';
+			icon.tabIndex = -1;
+			h.appendChild(icon);
+
+			var id = h.getAttribute('id');
+			var link = document.createElement('a');
+			link.className = 'heading-anchor';
+			link.setAttribute('href', '#' + id);
+			link.innerHTML = h.innerHTML;
+			h.innerHTML = link.outerHTML;
+		}
+	}
+
+	onMount(() => {
+		const unsubscribe = page.subscribe(() => {
+			linkifyHeadings();
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
 </script>
 
 <section>
 	<div class="hds-container container">
-		<FeatureSectionTitle {title} />
-		<div class="date">{subtitle}</div>
+		<DocumentTitle {title} {subtitle} />
 		<content>{@render children?.()}</content>
 	</div>
 </section>
@@ -29,11 +62,6 @@
 .container :global(.wrap) {
   margin-top: 0 !important;
 }
-.container .date {
-  text-align: center;
-  margin: 15px 0 60px 0;
-  color: var(--text-light);
-}
 .container content :global(h2) {
   font-size: 32px !important;
   font-weight: 600;
@@ -63,4 +91,25 @@
 .container content :global(a) {
   color: var(--link);
   text-decoration: underline;
+}
+.container content :global(a.heading-anchor-link) {
+  position: absolute;
+  right: 100%;
+  margin-right: 7px;
+  opacity: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+}
+.container content :global(.heading-anchor:hover + .heading-anchor-link) {
+  opacity: 1;
+}
+.container content :global(h2 a:not(.heading-anchor-link)),
+.container content :global(h3 a:not(.heading-anchor-link)),
+.container content :global(h4 a:not(.heading-anchor-link)),
+.container content :global(h5 a:not(.heading-anchor-link)),
+.container content :global(h6 a:not(.heading-anchor-link)) {
+  text-decoration: none;
+  color: inherit;
 }</style>

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

@@ -1,7 +1,8 @@
-declare const Document: import("svelte").Component<{
+interface Props {
     title: string;
     subtitle: string;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+}
+declare const Document: import("svelte").Component<Props, {}, "">;
 type Document = ReturnType<typeof Document>;
 export default Document;

package/dist/marketing/Document/DocumentTitle.svelte

@@ -53,6 +53,7 @@
 		font-weight: normal;
 		line-height: 1.4;
 		text-align: center;
+		color: var(--text-light);
 	}
 	.img-wrap {
 		text-align: center;

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

@@ -1,9 +1,10 @@
-declare const DocumentTitle: import("svelte").Component<{
+interface Props {
     title: string;
     subtitle?: string | undefined;
     icon?: null | string;
     h2Style?: string | undefined;
     wrapStyle?: string | undefined;
-}, {}, "">;
+}
+declare const DocumentTitle: import("svelte").Component<Props, {}, "">;
 type DocumentTitle = ReturnType<typeof DocumentTitle>;
 export default DocumentTitle;

package/dist/marketing/Footer/Footer.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import Container from '../Container/Container.svelte';
-	import {
-		IconCopy,
-		IconDiscord,
-		IconEnvelope,
-		IconGithub,
-		IconLinkedin,
-		IconTwitterX,
-		IconYoutube
-	} from '@hyvor/icons';
+
+	import IconCopy from '@hyvor/icons/IconCopy';
+	import IconDiscord from '@hyvor/icons/IconDiscord';
+	import IconEnvelope from '@hyvor/icons/IconEnvelope';
+	import IconGithub from '@hyvor/icons/IconGithub';
+	import IconLinkedin from '@hyvor/icons/IconLinkedin';
+	import IconTwitterX from '@hyvor/icons/IconTwitterX';
+	import IconYoutube from '@hyvor/icons/IconYoutube';
+
 	import Link from '../../components/Link/Link.svelte';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Tooltip from '../../components/Tooltip/Tooltip.svelte';

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

@@ -1,8 +1,9 @@
-declare const Footer: import("svelte").Component<{
+interface Props {
     email?: string | null;
     social?: any;
     emailCopied?: boolean;
-    center?: import("svelte").Snippet;
-}, {}, "social" | "emailCopied">;
+    center?: import('svelte').Snippet;
+}
+declare const Footer: import("svelte").Component<Props, {}, "social" | "emailCopied">;
 type Footer = ReturnType<typeof Footer>;
 export default Footer;

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

@@ -1,6 +1,7 @@
-declare const FooterLinkList: import("svelte").Component<{
+interface Props {
     title: string;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+}
+declare const FooterLinkList: import("svelte").Component<Props, {}, "">;
 type FooterLinkList = ReturnType<typeof FooterLinkList>;
 export default FooterLinkList;

package/dist/marketing/Header/Header.svelte

@@ -3,7 +3,7 @@
 	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';
+	import IconList from '@hyvor/icons/IconList';
 
 	interface Props {
 		logo: string;

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

@@ -1,10 +1,11 @@
-declare const Header: import("svelte").Component<{
+interface Props {
     logo: string;
     name?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
-}, {}, "">;
+    center?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;
 export default Header;

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

@@ -1,5 +1,6 @@
-declare const LogoBlogs: import("svelte").Component<{
+interface Props {
     size?: number;
-}, {}, "">;
+}
+declare const LogoBlogs: import("svelte").Component<Props, {}, "">;
 type LogoBlogs = ReturnType<typeof LogoBlogs>;
 export default LogoBlogs;

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

@@ -1,5 +1,6 @@
-declare const LogoCore: import("svelte").Component<{
+interface Props {
     size?: number;
-}, {}, "">;
+}
+declare const LogoCore: import("svelte").Component<Props, {}, "">;
 type LogoCore = ReturnType<typeof LogoCore>;
 export default LogoCore;

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

@@ -1,5 +1,6 @@
-declare const LogoFortguard: import("svelte").Component<{
+interface Props {
     size?: number;
-}, {}, "">;
+}
+declare const LogoFortguard: import("svelte").Component<Props, {}, "">;
 type LogoFortguard = ReturnType<typeof LogoFortguard>;
 export default LogoFortguard;

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

@@ -1,5 +1,6 @@
-declare const LogoTalk: import("svelte").Component<{
+interface Props {
     size?: number;
-}, {}, "">;
+}
+declare const LogoTalk: import("svelte").Component<Props, {}, "">;
 type LogoTalk = ReturnType<typeof LogoTalk>;
 export default LogoTalk;

package/package.json

@@ -1,6 +1,5 @@
 {
 	"name": "@hyvor/design",
-	"version": "1.0.3",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -30,7 +29,7 @@
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
 		"sass": "^1.68.0",
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.0",
@@ -47,7 +46,7 @@
 	},
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^1.0.0",
+		"@hyvor/icons": "^1.1.0",
 		"deepmerge-ts": "^5.1.0",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.5.11",
@@ -57,5 +56,6 @@
 	"type": "module",
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"version": "1.0.6"
 }

package/dist/components/HyvorBar/BarProducts.svelte.d.ts

@@ -1,32 +0,0 @@
-declare const PRODUCTS: {
-    talk: {
-        name: string;
-        logo: import("svelte").Component<{
-            size?: number;
-        }, {}, "">;
-        url: string;
-        description: string;
-    };
-    blogs: {
-        name: string;
-        logo: import("svelte").Component<{
-            size?: number;
-        }, {}, "">;
-        url: string;
-        description: string;
-    };
-    fortguard: {
-        name: string;
-        logo: import("svelte").Component<{
-            size?: number;
-        }, {}, "">;
-        url: string;
-        description: string;
-    };
-};
-export { PRODUCTS };
-declare const BarProducts: import("svelte").Component<{
-    mobile?: boolean;
-}, {}, "">;
-type BarProducts = ReturnType<typeof BarProducts>;
-export default BarProducts;