@hyvor/design 0.0.68 → 1.0.3

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

@@ -1,56 +1,83 @@
-<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" on:click={handleMobileClick}>
+		<button class="mobile hds-box" onclick={handleMobileClick}>
 			<div class="left">
 				{#if active.category}
 					<span class="category">{active.category}</span> &raquo;
@@ -68,7 +95,7 @@ function hideNavOnMobile() {
 			callback: handleNavOutsideClick
 		}}
 	>
-		<slot />
+		{@render children?.()}
 	</nav>
 </div>
 

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;

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

@@ -1,21 +1,31 @@
-<script>export let name;
+<script lang="ts">
+	import type { ComponentType } from 'svelte';
+
+	interface Props {
+		name: string;
+		start?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let { name, start, end, children }: Props = $props();
 </script>
 
 <div class="nav-category">
 	<div class="name">
 		<span class="button-content">
-			{#if $$slots.start}
-				<span class="slot start"><slot name="start" /></span>
+			{#if start}
+				<span class="slot start">{@render start?.()}</span>
 			{/if}
 
-			{#if $$slots.end}
-				<span class="slot end"><slot name="end" /></span>
+			{#if end}
+				<span class="slot end">{@render end?.()}</span>
 			{/if}
 		</span>
 		{name}
 	</div>
 	<div class="nav-items">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        name: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        end: {};
-        default: {};
-    };
-};
-export type NavCategoryProps = typeof __propDef.props;
-export type NavCategoryEvents = typeof __propDef.events;
-export type NavCategorySlots = typeof __propDef.slots;
-export default class NavCategory extends SvelteComponent<NavCategoryProps, NavCategoryEvents, NavCategorySlots> {
-}
-export {};
+declare const NavCategory: import("svelte").Component<{
+    name: string;
+    start?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type NavCategory = ReturnType<typeof NavCategory>;
+export default NavCategory;

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

@@ -1,5 +1,12 @@
-<script>import { page } from "$app/stores";
-export let href;
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	interface Props {
+		href: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { href, children }: Props = $props();
 </script>
 
 <a
@@ -7,7 +14,7 @@ export let href;
 	class:active={href === $page.url.pathname}
 	aria-current={href === $page.url.pathname ? 'page' : undefined}
 >
-	<slot />
+	{@render children?.()}
 </a>
 
 <style>

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

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

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

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  SidebarProps */
-/** @typedef {typeof __propDef.events}  SidebarEvents */
-/** @typedef {typeof __propDef.slots}  SidebarSlots */
-export default class Sidebar extends SvelteComponent<{
+export default Sidebar;
+type Sidebar = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SidebarProps = typeof __propDef.props;
-export type SidebarEvents = typeof __propDef.events;
-export type SidebarSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/marketing/Docs/Toc.svelte

@@ -1,50 +1,63 @@
-<script>import { afterNavigate } from "$app/navigation";
-import { onMount } from "svelte";
-import tocbot from "tocbot";
-import Loader from "../../components/Loader/Loader.svelte";
-import { IconCaretDown, IconCaretRight } from "@hyvor/icons";
-import Button from "../../components/Button/Button.svelte";
-let tocElement;
-onMount(() => {
-  tocbot.init({
-    // @ts-ignore
-    tocElement,
-    contentSelector: ".docs .content-wrap",
-    headingSelector: "h2, h3, h4, h5, h6",
-    orderedList: false,
-    hasInnerContainers: true,
-    headingsOffset: 75,
-    scrollSmooth: true,
-    scrollSmoothOffset: -75
-  });
-});
-afterNavigate(() => {
-  tocbot.refresh();
-});
-let mobileShown = false;
-function handleMobileClick(e) {
-  e.stopPropagation();
-  if (!mobileShown) {
-    tocElement.style.display = "block";
-    mobileShown = true;
-  } else {
-    tocElement.style.display = "none";
-    mobileShown = false;
-  }
-}
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	// @ts-ignore
+	import tocbot from 'tocbot';
+
+	import Loader from '../../components/Loader/Loader.svelte';
+	import { IconCaretDown, IconCaretRight } from '@hyvor/icons';
+	import Button from '../../components/Button/Button.svelte';
+
+	let tocElement: HTMLDivElement | undefined = $state();
+
+	onMount(() => {
+		tocbot.init({
+			// @ts-ignore
+			tocElement: tocElement,
+			contentSelector: '.docs .content-wrap',
+			headingSelector: 'h2, h3, h4, h5, h6',
+			orderedList: false,
+			hasInnerContainers: true,
+			headingsOffset: 75,
+			scrollSmooth: true,
+			scrollSmoothOffset: -75
+		});
+	});
+
+	afterNavigate(() => {
+		tocbot.refresh();
+	});
+
+	let mobileShown = $state(false);
+
+	function handleMobileClick(e: any) {
+		if (!tocElement) {
+			return;
+		}
+
+		e.stopPropagation();
+		if (!mobileShown) {
+			tocElement.style.display = 'block';
+			mobileShown = true;
+		} else {
+			tocElement.style.display = 'none';
+			mobileShown = false;
+		}
+	}
 </script>
 
 <div class="wrap hds-box">
 	<div class="mobile">
 		<Button color="input" on:click={handleMobileClick}>
 			Table of Contents
-			<svelte:fragment slot="end">
+			{#snippet end()}
 				{#if mobileShown}
 					<IconCaretDown size={14} />
 				{:else}
 					<IconCaretRight size={14} />
 				{/if}
-			</svelte:fragment>
+			{/snippet}
 		</Button>
 	</div>
 
@@ -61,9 +74,6 @@ function handleMobileClick(e) {
   align-self: flex-start;
   overflow-y: auto;
 }
-.toc-wrap :global(&.toc) {
-  overflow-y: auto;
-}
 .toc-wrap :global(> .toc-list) {
   overflow: hidden;
   position: relative;

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

@@ -1,14 +1,3 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TocProps = typeof __propDef.props;
-export type TocEvents = typeof __propDef.events;
-export type TocSlots = typeof __propDef.slots;
-export default class Toc extends SvelteComponent<TocProps, TocEvents, TocSlots> {
-}
-export {};
+declare const Toc: import("svelte").Component<Record<string, never>, {}, "">;
+type Toc = ReturnType<typeof Toc>;
+export default Toc;

package/dist/marketing/Document/Document.svelte

@@ -1,13 +1,20 @@
-<script>import FeatureSectionTitle from "./DocumentTitle.svelte";
-export let title;
-export let subtitle;
+<script lang="ts">
+	import FeatureSectionTitle from './DocumentTitle.svelte';
+
+	interface Props {
+		title: string;
+		subtitle: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { title, subtitle, children }: Props = $props();
 </script>
 
 <section>
 	<div class="hds-container container">
 		<FeatureSectionTitle {title} />
 		<div class="date">{subtitle}</div>
-		<content><slot /></content>
+		<content>{@render children?.()}</content>
 	</div>
 </section>
 

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title: string;
-        subtitle: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DocumentProps = typeof __propDef.props;
-export type DocumentEvents = typeof __propDef.events;
-export type DocumentSlots = typeof __propDef.slots;
-export default class Document extends SvelteComponent<DocumentProps, DocumentEvents, DocumentSlots> {
-}
-export {};
+declare const Document: import("svelte").Component<{
+    title: string;
+    subtitle: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Document = ReturnType<typeof Document>;
+export default Document;

package/dist/marketing/Document/DocumentTitle.svelte

@@ -1,8 +1,19 @@
-<script>export let title;
-export let subtitle = void 0;
-export let icon = null;
-export let h2Style = void 0;
-export let wrapStyle = void 0;
+<script lang="ts">
+	interface Props {
+		title: string;
+		subtitle?: string | undefined;
+		icon?: null | string;
+		h2Style?: string | undefined;
+		wrapStyle?: string | undefined;
+	}
+
+	let {
+		title,
+		subtitle = undefined,
+		icon = null,
+		h2Style = undefined,
+		wrapStyle = undefined
+	}: Props = $props();
 </script>
 
 <div class="wrap document-title" style={wrapStyle}>

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;