@hyvor/design 0.0.67 → 1.0.3

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

@@ -1,39 +1,49 @@
-<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}
+	<div class="name">
+		<span class="button-content">
+			{#if start}
+				<span class="slot start">{@render start?.()}</span>
+			{/if}
 
-      {#if $$slots.end}
-        <span class="slot end"><slot name="end" /></span>
-      {/if}
-    </span>
-    {name}
-  </div>
-  <div class="nav-items">
-    <slot />
-  </div>
+			{#if end}
+				<span class="slot end">{@render end?.()}</span>
+			{/if}
+		</span>
+		{name}
+	</div>
+	<div class="nav-items">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
-  .nav-category {
-    margin-bottom: 20px;
-  }
+	.nav-category {
+		margin-bottom: 20px;
+	}
 
-  .name {
-    font-weight: 600;
-    padding: 10px 25px;
-    display: flex;
-    align-items: center;
-  }
+	.name {
+		font-weight: 600;
+		padding: 10px 25px;
+		display: flex;
+		align-items: center;
+	}
 
-  .slot.start {
-    margin-right: 5px;
-    margin-left: 0;
-    display: flex;
-  }
+	.slot.start {
+		margin-right: 5px;
+		margin-left: 0;
+		display: flex;
+	}
 </style>

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,34 +1,38 @@
-<script>import { page } from "$app/stores";
-export let href;
-</script>
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	interface Props {
+		href: string;
+		children?: import('svelte').Snippet;
+	}
 
+	let { href, children }: Props = $props();
+</script>
 
-<a 
-    href={href}
-    class:active={href === $page.url.pathname}
-    aria-current={href === $page.url.pathname ? "page" : undefined}
+<a
+	{href}
+	class:active={href === $page.url.pathname}
+	aria-current={href === $page.url.pathname ? 'page' : undefined}
 >
-    <slot />
+	{@render children?.()}
 </a>
 
 <style>
+	a {
+		display: block;
+		padding: 4px 25px;
+		color: var(--text-light);
+		font-size: 14px;
+		letter-spacing: 0.3px;
+		border-left: 3px solid transparent;
+	}
 
-    a {
-        display: block;
-        padding: 4px 25px;
-        color: var(--text-light);
-        font-size: 14px;
-        letter-spacing: .3px;
-        border-left: 3px solid transparent;
-    }
-
-    a:hover {
-        background-color: var(--hover);
-    }
-
-    a.active {
-        background-color: var(--accent-lightest);
-        border-left: 3px solid var(--accent);
-    }
+	a:hover {
+		background-color: var(--hover);
+	}
 
-</style>
+	a.active {
+		background-color: var(--accent-lightest);
+		border-left: 3px solid var(--accent);
+	}
+</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

@@ -1,32 +1,29 @@
 <script>
-  import Toc from "../Toc.svelte";
-
+	import Toc from '../Toc.svelte';
 </script>
+
 <div class="sidebar">
-    <Toc />
+	<Toc />
 </div>
 
-
 <style>
+	.sidebar {
+		width: 220px;
+		top: var(--header-height, 0);
+		padding: 25px 0;
+		position: sticky;
+		flex-shrink: 0;
+		align-self: flex-start;
+	}
 
-    .sidebar {
-        width: 220px;
-        top: var(--header-height, 0);
-        padding: 25px 0;
-        position: sticky;
-        flex-shrink: 0;
-        align-self: flex-start;
-    }
-
-    @media (max-width: 992px) {
-        .sidebar {
-            order: 1;
-            position: relative;
-            top: initial;
-            padding: 0 15px;
-            margin-bottom: 20px;
-            width: 100%;
-        }
-    }
-
-</style>
+	@media (max-width: 992px) {
+		.sidebar {
+			order: 1;
+			position: relative;
+			top: initial;
+			padding: 0 15px;
+			margin-bottom: 20px;
+			width: 100%;
+		}
+	}
+</style>

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,58 +1,69 @@
-<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>
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-<div class="wrap hds-box">
+	// @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
+		});
+	});
 
-    <div class="mobile">
-        <Button color="input" on:click={handleMobileClick}>
-            Table of Contents 
-            <svelte:fragment slot="end">
-                {#if mobileShown}
-                    <IconCaretDown size={14} />
-                {:else}
-                    <IconCaretRight size={14} />
-                {/if}
-            </svelte:fragment>
-        </Button>
-    </div>
+	afterNavigate(() => {
+		tocbot.refresh();
+	});
 
-    <div class="toc-wrap" bind:this={tocElement}>
-        <Loader block padding={30} size="small" />
-    </div>
+	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
+			{#snippet end()}
+				{#if mobileShown}
+					<IconCaretDown size={14} />
+				{:else}
+					<IconCaretRight size={14} />
+				{/if}
+			{/snippet}
+		</Button>
+	</div>
+
+	<div class="toc-wrap" bind:this={tocElement}>
+		<Loader block padding={30} size="small" />
+	</div>
 </div>
 
 <style>.wrap {
@@ -63,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;
@@ -112,7 +120,7 @@ function handleMobileClick(e) {
   font-weight: 700;
 }
 .toc-wrap :global(.toc-link::before) {
-  background-color: #EEE;
+  background-color: #eee;
   content: " ";
   display: inline-block;
   height: inherit;
@@ -146,4 +154,4 @@ function handleMobileClick(e) {
   :global(.is-active-link::before) {
     background-color: #eee !important;
   }
-}</style>
+}</style>

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,14 +1,21 @@
-<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>
-    </div>
+	<div class="hds-container container">
+		<FeatureSectionTitle {title} />
+		<div class="date">{subtitle}</div>
+		<content>{@render children?.()}</content>
+	</div>
 </section>
 
 <style>* {

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,63 +1,74 @@
-<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}>
-    <h2 style={h2Style}>
-        {title}
-        {#if icon}
-            <div class="img-wrap">
-                <img src={icon} alt={title} />
-            </div>
-        {/if}
-    </h2>
+	<h2 style={h2Style}>
+		{title}
+		{#if icon}
+			<div class="img-wrap">
+				<img src={icon} alt={title} />
+			</div>
+		{/if}
+	</h2>
 
-    {#if subtitle}
-        <h3>{@html subtitle}</h3>
-    {/if}
+	{#if subtitle}
+		<h3>{@html subtitle}</h3>
+	{/if}
 </div>
 
 <style>
-    .wrap {
-        margin-top: 100px;
-    }
-    h2 {
-        font-size: 38px;
-        font-weight: 700;
-        margin-bottom: 10px;
-        margin-top: 20px;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    h3 {
-        font-size: 20px;
-        width: 650px;
-        max-width: 100%;
-        margin: 0 auto;
-        font-weight: normal;
-        line-height: 1.4;
-        text-align: center;
-    }
-    .img-wrap {
-        text-align: center;
-        margin-left: 20px;
-        display: inline-flex;
-        align-items: center;
-    }
-    img {
-        width: 85px;
-        height: 85px;
-    }
+	.wrap {
+		margin-top: 100px;
+	}
+	h2 {
+		font-size: 38px;
+		font-weight: 700;
+		margin-bottom: 10px;
+		margin-top: 20px;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	h3 {
+		font-size: 20px;
+		width: 650px;
+		max-width: 100%;
+		margin: 0 auto;
+		font-weight: normal;
+		line-height: 1.4;
+		text-align: center;
+	}
+	.img-wrap {
+		text-align: center;
+		margin-left: 20px;
+		display: inline-flex;
+		align-items: center;
+	}
+	img {
+		width: 85px;
+		height: 85px;
+	}
 
-    @media (max-width: 992px) {
-        h2 {
-            flex-direction: column-reverse;
-            gap: 15px;
-        }
-    }
+	@media (max-width: 992px) {
+		h2 {
+			flex-direction: column-reverse;
+			gap: 15px;
+		}
+	}
 </style>