@hyvor/design 2.0.19 → 2.1.1

package/dist/cloud/CloudContext/CloudContext.svelte

@@ -5,8 +5,6 @@
 		setCloudContext,
 		type CloudContext as CloudContextType
 	} from './cloudContextState.svelte.js';
-	import { onMount } from 'svelte';
-	import { track } from '../../marketing/index.js';
 
 	interface Props {
 		context: CloudContextType;
@@ -23,13 +21,6 @@
 			incrementCloudContextId();
 		}
 	});
-
-	onMount(() => {
-		track.identify(context.user.id.toString(), {
-			name: context.user.name ?? undefined,
-			avatar: context.user.picture_url ?? undefined
-		});
-	});
 </script>
 
 <div transition:fade={{ duration: 200 }} {style}>

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts

@@ -26,6 +26,6 @@ declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<string>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "color" | "show">;
+}, {}, {}, "show" | "color">;
 type ColorPicker = InstanceType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/components/Loader/Loader.svelte.d.ts

@@ -11,6 +11,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Loader: import("svelte").Component<Props, {}, "size" | "color" | "padding" | "state" | "colorTrack">;
+declare const Loader: import("svelte").Component<Props, {}, "size" | "padding" | "state" | "color" | "colorTrack">;
 type Loader = ReturnType<typeof Loader>;
 export default Loader;

package/dist/components/Modal/Modal.svelte

@@ -12,6 +12,9 @@
 		show?: boolean;
 		title?: string | Snippet;
 		size?: 'small' | 'medium' | 'large';
+		width?: string;
+		height?: string;
+		bare?: boolean;
 		id?: string;
 		role?: 'dialog' | 'alertdialog';
 		closeOnOutsideClick?: boolean;
@@ -28,6 +31,9 @@
 		show = $bindable(false),
 		title,
 		size = 'medium',
+		width,
+		height,
+		bare = false,
 		id = 'modal',
 		role = 'alertdialog',
 		closeOnOutsideClick = true,
@@ -44,6 +50,10 @@
 	const titleId = id + '-title';
 	const descId = id + '-desc';
 
+	const innerStyle = $derived(
+		[width ? `width: ${width}` : '', height ? `height: ${height}` : ''].filter(Boolean).join('; ')
+	);
+
 	let wrapEl: HTMLDivElement | undefined = $state();
 	let innerEl: HTMLDivElement | undefined = $state();
 
@@ -96,36 +106,44 @@
 	>
 		<div
 			class="inner {size}"
+			class:bare
+			style={innerStyle || undefined}
 			transition:scale|global={{ duration: 100, start: 0.9, opacity: 0.9 }}
 			bind:this={innerEl}
 			{role}
 			aria-modal="true"
-			aria-labelledby={titleId}
+			aria-labelledby={bare ? undefined : titleId}
 			aria-describedby={descId}
 		>
-			<div class="header">
-				<div class="title" id={titleId}>
-					{#if typeof title === 'string'}
-						<span>{title}</span>
-					{:else}
-						{@render title?.()}
-					{/if}
-				</div>
-
-				<div class="close-wrap">
-					{#if hasClose}
-						<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
-							<IconX size={25} />
-						</IconButton>
-					{/if}
+			{#if !bare}
+				<div class="header">
+					<div class="title" id={titleId}>
+						{#if typeof title === 'string'}
+							<span>{title}</span>
+						{:else}
+							{@render title?.()}
+						{/if}
+					</div>
+
+					<div class="close-wrap">
+						{#if hasClose}
+							<IconButton
+								variant="invisible"
+								on:click={handleCancel}
+								aria-label="Close modal"
+							>
+								<IconX size={25} />
+							</IconButton>
+						{/if}
+					</div>
 				</div>
-			</div>
+			{/if}
 
 			<div class="content" id={descId}>
 				{@render children?.()}
 			</div>
 
-			{#if footer}
+			{#if footer && !bare}
 				<div class="footer">
 					{#if typeof footer === 'object'}
 						<ModalFooter {footer} bind:show on:cancel on:confirm />
@@ -168,7 +186,7 @@
 		z-index: 10000000;
 		width: 100%;
 		height: 100%;
-		background: rgba(0, 0, 0, 0.5);
+		background: rgba(0, 0, 0, 0.15);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -209,6 +227,14 @@
 	.content {
 		padding: 20px 25px;
 	}
+	.inner.bare {
+		display: flex;
+		flex-direction: column;
+	}
+	.inner.bare .content {
+		padding: 0;
+		flex: 1;
+	}
 
 	.footer {
 		padding: 20px 25px;

package/dist/components/Modal/Modal.svelte.d.ts

@@ -4,6 +4,9 @@ interface Props {
     show?: boolean;
     title?: string | Snippet;
     size?: 'small' | 'medium' | 'large';
+    width?: string;
+    height?: string;
+    bare?: boolean;
     id?: string;
     role?: 'dialog' | 'alertdialog';
     closeOnOutsideClick?: boolean;

package/dist/marketing/Docs/Docs.svelte

@@ -1,34 +1,390 @@
 <script lang="ts">
+	import NavItem from './NavItem.svelte';
 	import Sidebar from './Sidebar/Sidebar.svelte';
+	import { getSubSectionPathForSlug, getFirstPageSlug } from './fulldocs.js';
+	import type { NavPageConfig, NavSectionConfig } from './types.js';
+	import { clickOutside } from '../../components/index.js';
+	import IconList from '@hyvor/icons/IconList';
+
 	interface Props {
-		nav?: import('svelte').Snippet;
-		content?: import('svelte').Snippet;
+		basepath: string;
+		rootName?: string;
+		sections: NavSectionConfig[];
+		page: NavPageConfig;
+	}
+
+	let { basepath = '/', rootName = 'Docs', sections, page }: Props = $props();
+
+	const subSectionPath = $derived(getSubSectionPathForSlug(sections, page.slug) ?? []);
+
+	const currentSections = $derived(
+		subSectionPath.length > 0 ? subSectionPath[subSectionPath.length - 1].sections : sections
+	);
+
+	// mobile nav is collapsed behind a toggle button; close it whenever the
+	// active page changes (e.g. after clicking a nav link on mobile)
+	let mobileNavOpen = $state(false);
+	$effect(() => {
+		void page.slug;
+		mobileNavOpen = false;
+	});
+
+	let contentEl: HTMLElement | undefined = $state();
+
+	// adds a clickable anchor link to each heading that has an id, so
+	// readers can link directly to a section of the page
+	function linkifyHeadings() {
+		if (!contentEl) return;
+
+		const headings = contentEl.querySelectorAll<HTMLElement>('h2[id], h3[id], h4[id]');
+		for (const h of headings) {
+			const 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);
+
+			const id = h.getAttribute('id');
+			const link = document.createElement('a');
+			link.className = 'heading-anchor';
+			link.setAttribute('href', '#' + id);
+			link.innerHTML = h.innerHTML;
+			h.innerHTML = link.outerHTML;
+		}
 	}
 
-	let { nav, content }: Props = $props();
+	$effect(() => {
+		void page.slug;
+		linkifyHeadings();
+	});
 </script>
 
-<div class="docs">
-	{@render nav?.()}
-	{@render content?.()}
-	<Sidebar />
+<div class="wrap docs">
+	<div class="nav-wrap">
+		<button
+			class="mobile-toggle hds-box"
+			onclick={(e) => {
+				e.stopPropagation();
+				mobileNavOpen = !mobileNavOpen;
+			}}
+		>
+			<div class="mobile-toggle-label">
+				{#if subSectionPath.length > 0}
+					<span class="category">{subSectionPath[subSectionPath.length - 1].name}</span>
+					<span class="sep">&raquo;</span>
+				{/if}
+				<span class="name">{page.name}</span>
+			</div>
+			<IconList size={18} />
+		</button>
+
+		<nav
+			class="hds-box"
+			class:open={mobileNavOpen}
+			use:clickOutside={{ callback: () => (mobileNavOpen = false) }}
+		>
+			<div class="breadcrumb">
+				<a class="breadcrumb-item" href={basepath + '/' + (getFirstPageSlug(sections) ?? '')}>
+					{rootName}
+				</a>
+				{#each subSectionPath as sub}
+					<span class="breadcrumb-sep"></span>
+					<a class="breadcrumb-item" href={basepath + '/' + (getFirstPageSlug(sub.sections) ?? '')}>
+						{sub.name}
+					</a>
+				{/each}
+			</div>
+
+			{#each currentSections as section}
+				<div class="section">
+					{#if section.name}
+						<div class="section-name">
+							{section.name}
+						</div>
+					{/if}
+
+					{#each section.navs as nav}
+						<NavItem {nav} {basepath} currentSlug={page.slug} />
+					{/each}
+				</div>
+			{/each}
+		</nav>
+	</div>
+
+	<div class="content-wrap hds-box">
+		<content class:wide={page.wide} bind:this={contentEl}>
+			<page.content />
+		</content>
+	</div>
+
+	{#if !page.wide}
+		<Sidebar />
+	{/if}
 </div>
 
 <style>
-	.docs {
+	.wrap {
 		display: flex;
-		flex-direction: row;
-		margin: auto;
-		width: 1150px;
-		max-width: 100%;
-		padding-bottom: 40px;
-		/* min-height: calc(100vh - var(--header-height)); */
+		padding: 15px;
+		gap: 15px;
+	}
+
+	.nav-wrap {
+		flex-shrink: 0;
+		height: calc(100vh - var(--header-height) - 30px);
+		position: sticky;
+		top: calc(var(--header-height, 0) + 15px);
+	}
+
+	.mobile-toggle {
+		display: none;
+	}
+
+	nav {
+		width: 280px;
+		height: 100%;
+		padding: 15px 0;
+		overflow-y: auto;
+		flex-shrink: 0;
 	}
 
 	@media (max-width: 992px) {
-		.docs {
+		.wrap {
 			flex-direction: column;
 			width: 100%;
+			padding: 15px 0;
+		}
+
+		.nav-wrap {
+			width: 100%;
+			padding: 0 15px;
+			order: 1;
+			height: auto;
+			position: static;
+			top: auto;
+		}
+
+		.content-wrap {
+			order: 2;
+		}
+
+		.mobile-toggle {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			padding: 10px 20px;
+			cursor: pointer;
+		}
+		.mobile-toggle:hover {
+			background-color: var(--hover);
+		}
+
+		.mobile-toggle-label {
+			flex: 1;
+			text-align: left;
+		}
+		.category,
+		.sep {
+			color: var(--text-light);
+		}
+		.sep {
+			margin: 0 4px;
+		}
+
+		nav {
+			display: none;
+			position: absolute;
+			width: calc(100% - 30px);
+			height: auto;
+			max-height: 500px;
+			margin-top: 8px;
+			padding: 15px 0;
+			z-index: 100;
+		}
+		nav.open {
+			display: block;
+		}
+	}
+
+	.breadcrumb {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 6px;
+		padding: 0 25px 12px;
+		font-size: 13px;
+	}
+
+	.breadcrumb-item {
+		color: var(--text-light);
+	}
+
+	.breadcrumb-item:last-child {
+		color: inherit;
+		font-weight: 600;
+	}
+
+	.breadcrumb-item:not(:last-child):hover {
+		text-decoration: underline;
+	}
+
+	.breadcrumb-sep {
+		color: var(--text-light);
+		position: relative;
+		width: 4px;
+	}
+
+	.breadcrumb-sep::before {
+		content: '';
+		width: 4px;
+		height: 4px;
+		border-right: 1px solid var(--text-light);
+		border-bottom: 1px solid var(--text-light);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -40%) rotate(-45deg);
+		margin-left: -1px;
+		opacity: 0.5;
+	}
+
+	.section-name {
+		font-weight: 600;
+		padding: 0 25px;
+		margin-top: 20px;
+		margin-bottom: 8px;
+		font-size: 14px;
+	}
+
+	.content-wrap {
+		flex: 1;
+		padding: 30px 45px;
+		min-width: 0;
+	}
+
+	content {
+		display: block;
+		margin: auto;
+		width: 650px;
+		max-width: 100%;
+	}
+	content.wide {
+		width: 100%;
+	}
+
+	/* content styles */
+
+	content :global(p),
+	content :global(li) {
+		line-height: var(--line-height-content);
+	}
+
+	content :global(h1:first-child) {
+		margin-top: 0;
+		font-size: 36px;
+		font-weight: 600;
+		letter-spacing: -0.03em;
+		margin: 0 0 30px;
+		position: relative;
+		display: table;
+		&:after {
+			position: absolute;
+			content: '';
+			bottom: -13px;
+			left: 0px;
+			width: 30%;
+			height: 3px;
+			background: var(--accent);
+			margin-top: 10px;
+		}
+	}
+	content :global(a:not(.no-link-color a)) {
+		color: var(--link);
+		text-decoration: underline;
+	}
+	content :global(li) {
+		margin-bottom: 8px;
+	}
+
+	content :global(ul) {
+		margin-top: 8px;
+	}
+
+	content :global(.table) {
+		margin: 20px 0;
+	}
+
+	content :global(code) {
+		font-size: 14px;
+		padding: 0.2em 0.4em;
+		display: inline-block;
+		background-color: #f4f2f0;
+		color: #905;
+		font-family: inherit;
+		border-radius: 4px;
+		line-height: normal;
+		font-weight: 400;
+	}
+	:global(:root.dark) content :global(code) {
+		background-color: #282c34;
+		color: #e06c75;
+	}
+
+	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;
+	}
+
+	content {
+		:global(h1),
+		:global(h2),
+		:global(h3),
+		:global(h4),
+		:global(h5),
+		:global(h6) {
+			position: relative;
+			margin: 20px 0;
+		}
+
+		:global(h1) {
+			font-size: 2em;
+		}
+		:global(h2) {
+			font-size: 1.5em;
+		}
+		:global(h3) {
+			font-size: 1.3em;
+		}
+		:global(h4) {
+			font-size: 1.2em;
+		}
+		:global(h5) {
+			font-size: 1.1em;
+		}
+		:global(h6) {
+			font-size: 1em;
+		}
+	}
+
+	content {
+		:global(.heading-anchor:hover + .heading-anchor-link) {
+			opacity: 1;
+		}
+
+		:global(h2 a:not(.heading-anchor-link)),
+		:global(h3 a:not(.heading-anchor-link)),
+		:global(h4 a:not(.heading-anchor-link)),
+		:global(h5 a:not(.heading-anchor-link)),
+		:global(h6 a:not(.heading-anchor-link)) {
+			text-decoration: none;
+			color: inherit;
 		}
 	}
 </style>

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

@@ -1,6 +1,9 @@
+import type { NavPageConfig, NavSectionConfig } from './types.js';
 interface Props {
-    nav?: import('svelte').Snippet;
-    content?: import('svelte').Snippet;
+    basepath: string;
+    rootName?: string;
+    sections: NavSectionConfig[];
+    page: NavPageConfig;
 }
 declare const Docs: import("svelte").Component<Props, {}, "">;
 type Docs = ReturnType<typeof Docs>;

package/dist/marketing/Docs/{Content/DocsImage.svelte → DocsImage.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { scale } from 'svelte/transition';
-	import { clickOutside } from '../../../components/index.js';
+	import { clickOutside } from '../../components/index.js';
 
 	interface Props {
 		src: string;

package/dist/marketing/Docs/NavItem.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { NavConfig } from './types.js';
+	import { getFirstPageSlug } from './fulldocs.js';
+	import IconCaretRight from '@hyvor/icons/IconCaretRight';
+	import IconArrowRight from '@hyvor/icons/IconArrowRight';
+	import NavItem from './NavItem.svelte';
+
+	interface Props {
+		basepath: string;
+		nav: NavConfig;
+		currentSlug: string;
+	}
+
+	let { nav, basepath, currentSlug }: Props = $props();
+
+	let foldingOpen = $state(false);
+
+	const href = $derived.by(() => {
+		if (nav.type === 'page') {
+			return basepath + '/' + nav.slug;
+		} else if (nav.type === 'sub-section') {
+			return basepath + '/' + (getFirstPageSlug(nav.sections) ?? '');
+		}
+	});
+</script>
+
+{#if nav.type === 'folding-section'}
+	<button class="nav-item" onclick={() => (foldingOpen = !foldingOpen)}>
+		<div class="nav-name">{nav.name}</div>
+		<span class="nav-icon folding-icon" class:open={foldingOpen}>
+			<IconCaretRight size={10} />
+		</span>
+	</button>
+	<div class="folded-content" class:open={foldingOpen}>
+		{#each nav.navs as innerNav}
+			<NavItem nav={innerNav} {basepath} {currentSlug} />
+		{/each}
+	</div>
+{:else if nav.type === 'sub-section'}
+	<a {href} class="nav-item">
+		<div class="nav-name">{nav.name}</div>
+		<span class="nav-icon">
+			<IconArrowRight size={10} />
+		</span>
+	</a>
+{:else}
+	<a {href} class="nav-item" class:active={nav.type === 'page' && nav.slug === currentSlug}>
+		<div class="nav-name">{nav.name}</div>
+	</a>
+{/if}
+
+<style>
+	.nav-item {
+		display: flex;
+		align-items: center;
+		padding: 7px 22px;
+		font-size: 14px;
+		border-left: 3px solid transparent;
+		transition: 0.1s background-color ease;
+		width: 100%;
+		text-align: initial;
+	}
+
+	.nav-item.active {
+		border-left: 3px solid var(--accent);
+		background-color: var(--accent-lightest);
+	}
+
+	.nav-item:not(.active):hover {
+		background-color: var(--hover);
+	}
+
+	.nav-name {
+		flex: 1;
+	}
+
+	.folding-icon {
+		transition: 0.2s transform ease;
+	}
+	.folding-icon.open {
+		transform: rotate(90deg);
+	}
+
+	.folded-content {
+		display: none;
+		padding-left: 14px;
+	}
+	.folded-content.open {
+		display: block;
+	}
+
+	.folded-content::after {
+		content: '';
+		display: block;
+	}
+</style>

package/dist/marketing/Docs/{Nav/NavItem.svelte.d.ts → NavItem.svelte.d.ts}

@@ -1,6 +1,9 @@
+import type { NavConfig } from './types.js';
+import NavItem from './NavItem.svelte';
 interface Props {
-    href: string;
-    children?: import('svelte').Snippet;
+    basepath: string;
+    nav: NavConfig;
+    currentSlug: string;
 }
 declare const NavItem: import("svelte").Component<Props, {}, "">;
 type NavItem = ReturnType<typeof NavItem>;