@hyvor/design 0.0.67 → 1.0.3

package/dist/marketing/Docs/Content/Content.svelte

@@ -1,39 +1,51 @@
-<script>import Box from "../../../components/Box/Box.svelte";
-import { page } from "$app/stores";
-import { onMount } from "svelte";
-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 lang="ts">
+	import Box from '../../../components/Box/Box.svelte';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { 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>
 
 <div class="content-wrap">
-    <Box>
-        <content>
-            <slot />
-        </content>
-    </Box>
+	<Box>
+		<content>
+			{@render children?.()}
+		</content>
+	</Box>
 </div>
 
 <style>.content-wrap {
@@ -48,7 +60,8 @@ content {
   padding: 30px 50px;
 }
 
-content :global(p), content :global(li) {
+content :global(p),
+content :global(li) {
   line-height: var(--line-height-content);
 }
 
@@ -161,4 +174,4 @@ content :global(h6 a:not(.heading-anchor-link)) {
   content {
     padding: 20px 25px;
   }
-}</style>
+}</style>

package/dist/marketing/Docs/Content/Content.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ContentProps = typeof __propDef.props;
-export type ContentEvents = typeof __propDef.events;
-export type ContentSlots = typeof __propDef.slots;
-export default class Content extends SvelteComponent<ContentProps, ContentEvents, ContentSlots> {
-}
-export {};
+declare const Content: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/marketing/Docs/Content/DocsImage.svelte

@@ -1,79 +1,77 @@
-<script>import { scale } from "svelte/transition";
-import { clickOutside } from "../../../components/index.js";
-export let src;
-export let alt;
-export let width = void 0;
-export let modalImageProps = {};
-let open = false;
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { clickOutside } from '../../../components/index.js';
+
+	interface Props {
+		src: string;
+		alt: string;
+		width?: undefined | number;
+		modalImageProps?: any;
+		[key: string]: any;
+	}
+
+	let { src, alt, width = undefined, modalImageProps = {}, ...rest }: Props = $props();
+
+	let open = $state(false);
 </script>
 
 <div class="wrap">
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <img 
-        {src} 
-        {alt} 
-        {...$$restProps} 
-        {width} 
-        on:click={() => open = true}
-        class="preview"
-    />
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<img {src} {alt} {...rest} {width} onclick={() => (open = true)} class="preview" />
 </div>
 
 {#if open}
-    <div 
-        class="modal"
-    >
-        <img 
-            {src} 
-            {alt}
-            {...modalImageProps}
-            use:clickOutside={{
-                callback: () => open = false
-            }}
-            transition:scale={{ duration: 100, opacity: 0.5, start: 0.95 }}
-        />
-    </div>
+	<div class="modal">
+		<img
+			{src}
+			{alt}
+			{...modalImageProps}
+			use:clickOutside={{
+				callback: () => (open = false)
+			}}
+			transition:scale={{ duration: 100, opacity: 0.5, start: 0.95 }}
+		/>
+	</div>
 {/if}
 
 <style>
-    img.preview {
-        display: block;
-        max-width: 100%;
-        max-height: 100%;
-        margin: 0 auto;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0,0,0,0.2);
-        cursor: pointer;
-        transition: .1s box-shadow;
-    }
-    img.preview:hover {
-        box-shadow: 0 0 15px rgba(0,0,0,0.3);
-    }
-
-    .modal {
-        position: fixed;
-        z-index: 1000000;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 40px;
-        overflow: hidden;
-    }
-    .modal-content {
-        min-height: 0;
-    }
-    .modal img {
-        max-width: 100%;
-        max-height: 100%;
-        border-radius: 5px;
-    }
-    .wrap {
-        padding: 25px 0;
-    }
+	img.preview {
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+		margin: 0 auto;
+		border-radius: 5px;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+		cursor: pointer;
+		transition: 0.1s box-shadow;
+	}
+	img.preview:hover {
+		box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+	}
 
-</style>
+	.modal {
+		position: fixed;
+		z-index: 1000000;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 40px;
+		overflow: hidden;
+	}
+	.modal-content {
+		min-height: 0;
+	}
+	.modal img {
+		max-width: 100%;
+		max-height: 100%;
+		border-radius: 5px;
+	}
+	.wrap {
+		padding: 25px 0;
+	}
+</style>

package/dist/marketing/Docs/Content/DocsImage.svelte.d.ts

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        src: string;
-        alt: string;
-        width?: undefined | number;
-        modalImageProps?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DocsImageProps = typeof __propDef.props;
-export type DocsImageEvents = typeof __propDef.events;
-export type DocsImageSlots = typeof __propDef.slots;
-export default class DocsImage extends SvelteComponent<DocsImageProps, DocsImageEvents, DocsImageSlots> {
-}
-export {};
+declare const DocsImage: import("svelte").Component<{
+    [key: string]: any;
+    src: string;
+    alt: string;
+    width?: undefined | number;
+    modalImageProps?: any;
+}, {}, "">;
+type DocsImage = ReturnType<typeof DocsImage>;
+export default DocsImage;

package/dist/marketing/Docs/Docs.svelte

@@ -1,31 +1,34 @@
-<script>
-	import Sidebar from "./Sidebar/Sidebar.svelte";
+<script lang="ts">
+	import Sidebar from './Sidebar/Sidebar.svelte';
+	interface Props {
+		nav?: import('svelte').Snippet;
+		content?: import('svelte').Snippet;
+	}
+
+	let { nav, content }: Props = $props();
 </script>
-<div class="docs">
 
-    <slot name="nav" />
-    <slot name="content" />
-    <Sidebar />
+<div class="docs">
+	{@render nav?.()}
+	{@render content?.()}
+	<Sidebar />
 </div>
 
 <style>
+	.docs {
+		display: flex;
+		flex-direction: row;
+		margin: auto;
+		width: 1150px;
+		max-width: 100%;
+		padding-bottom: 40px;
+		/* min-height: calc(100vh - var(--header-height)); */
+	}
 
-    .docs {
-        display: flex;
-        flex-direction: row;
-        margin: auto;
-        width: 1150px;
-        max-width: 100%;
-        padding-bottom: 40px;
-        /* min-height: calc(100vh - var(--header-height)); */
-    }
-
-
-    @media (max-width: 992px) {
-        .docs {
-            flex-direction: column;
-            width: 100%;
-        }
-    }
-
-</style>
+	@media (max-width: 992px) {
+		.docs {
+			flex-direction: column;
+			width: 100%;
+		}
+	}
+</style>

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  DocsProps */
-/** @typedef {typeof __propDef.events}  DocsEvents */
-/** @typedef {typeof __propDef.slots}  DocsSlots */
-export default class Docs extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    nav: {};
-    content: {};
-}> {
-}
-export type DocsProps = typeof __propDef.props;
-export type DocsEvents = typeof __propDef.events;
-export type DocsSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        nav: {};
-        content: {};
-    };
-};
-export {};
+declare const Docs: import("svelte").Component<{
+    nav?: import("svelte").Snippet;
+    content?: import("svelte").Snippet;
+}, {}, "">;
+type Docs = ReturnType<typeof Docs>;
+export default Docs;

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -1,76 +1,102 @@
-<script>import { afterNavigate, onNavigate } from "$app/navigation";
-import { page } from "$app/stores";
-import { IconList } from "@hyvor/icons";
-import { onMount } from "svelte";
-import { clickOutside } from "../../../components/index.js";
-let navEl;
-let active = null;
-function setActive() {
-  const activeEl = navEl?.querySelector("a.active");
-  if (!activeEl || !(activeEl instanceof HTMLElement)) {
-    active = null;
-    return;
-  }
-  const category = activeEl.closest(".nav-category")?.querySelector(".name")?.innerText || null;
-  active = {
-    name: activeEl.innerText,
-    category
-  };
-}
-onMount(() => {
-  setActive();
-});
-afterNavigate(() => {
-  setActive();
-  hideNavOnMobile();
-});
-let mobileNavShown = false;
-function handleMobileClick(e) {
-  e.stopPropagation();
-  if (navEl.style.display !== "block") {
-    navEl.style.display = "block";
-    mobileNavShown = true;
-  } else {
-    navEl.style.display = "none";
-    mobileNavShown = false;
-  }
-}
-function handleNavOutsideClick() {
-  if (mobileNavShown) {
-    navEl.style.display = "none";
-    mobileNavShown = false;
-  }
-}
-function hideNavOnMobile() {
-  if (window.innerWidth < 992) {
-    navEl.style.display = "none";
-  }
-}
+<script lang="ts">
+	import { afterNavigate, onNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { IconList } from '@hyvor/icons';
+	import { onMount } from 'svelte';
+	import { clickOutside } from '../../../components/index.js';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	let navEl: HTMLElement | undefined = $state();
+
+	interface Active {
+		name: string;
+		category: string | null;
+	}
+
+	let active: Active | null = $state(null);
+
+	function setActive() {
+		const activeEl = navEl?.querySelector('a.active');
+
+		if (!activeEl || !(activeEl instanceof HTMLElement)) {
+			active = null;
+			return;
+		}
+
+		const category =
+			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText || null;
+
+		active = {
+			name: activeEl.innerText,
+			category
+		};
+	}
+
+	onMount(() => {
+		setActive();
+	});
+
+	afterNavigate(() => {
+		setActive();
+		hideNavOnMobile();
+	});
+
+	let mobileNavShown = false;
+
+	function handleMobileClick(e: any) {
+		e.stopPropagation();
+		if (!navEl) return;
+		if (navEl.style.display !== 'block') {
+			navEl.style.display = 'block';
+			mobileNavShown = true;
+		} else {
+			navEl.style.display = 'none';
+			mobileNavShown = false;
+		}
+	}
+
+	function handleNavOutsideClick() {
+		if (!navEl) return;
+		if (mobileNavShown) {
+			navEl.style.display = 'none';
+			mobileNavShown = false;
+		}
+	}
+
+	function hideNavOnMobile() {
+		if (!navEl) return;
+		if (window.innerWidth < 992) {
+			navEl.style.display = 'none';
+		}
+	}
 </script>
 
 <div class="docs-nav">
+	{#if active}
+		<button class="mobile hds-box" onclick={handleMobileClick}>
+			<div class="left">
+				{#if active.category}
+					<span class="category">{active.category}</span> &raquo;
+				{/if}
+				<span class="name">{active.name}</span>
+			</div>
+			<IconList size={18} />
+		</button>
+	{/if}
 
-    {#if active}
-        <button class="mobile hds-box" on:click={handleMobileClick}>
-            <div class="left">
-                {#if active.category}
-                    <span class="category">{active.category}</span> &raquo;
-                {/if}
-                <span class="name">{active.name}</span>
-            </div>
-            <IconList size={18} />
-        </button>
-    {/if}
-
-    <nav 
-        class="hds-box nav-inner" 
-        bind:this={navEl}
-        use:clickOutside={{
-            callback: handleNavOutsideClick
-        }}
-    >
-        <slot />
-    </nav>
+	<nav
+		class="hds-box nav-inner"
+		bind:this={navEl}
+		use:clickOutside={{
+			callback: handleNavOutsideClick
+		}}
+	>
+		{@render children?.()}
+	</nav>
 </div>
 
 <style>.docs-nav {
@@ -128,4 +154,4 @@ nav {
     max-height: 500px;
     z-index: 100;
   }
-}</style>
+}</style>

package/dist/marketing/Docs/Nav/Nav.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type NavProps = typeof __propDef.props;
-export type NavEvents = typeof __propDef.events;
-export type NavSlots = typeof __propDef.slots;
-export default class Nav extends SvelteComponent<NavProps, NavEvents, NavSlots> {
-}
-export {};
+declare const Nav: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;