@hyvor/design 2.1.8-beta.5 → 2.1.9

package/dist/marketing/FullTrialSignup/FullTrialSignup.svelte

@@ -1,164 +0,0 @@
-<script lang="ts">
-	import Button from '../../components/Button/Button.svelte';
-	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
-
-	type ButtonConfig = { href: string; label: string; external?: boolean };
-
-	interface Props {
-		badge?: string | null;
-		title?: string;
-		description?: string;
-		button?: ButtonConfig | ButtonConfig[] | null;
-		checks?: string[];
-		accentColor?: string;
-		accentColorDark?: string;
-		[key: string]: any;
-	}
-
-	let {
-		badge = null,
-		title = 'Start your trial today',
-		description = '',
-		button = null,
-		checks = ['14-day free trial', 'No credit card required', 'Cancel anytime'],
-		accentColor,
-		accentColorDark,
-		...rest
-	}: Props = $props();
-
-	const buttons = $derived(button ? (Array.isArray(button) ? button : [button]) : []);
-</script>
-
-<section
-	class="hds-full-trial-signup"
-	style:--fts-accent={accentColor}
-	style:--fts-accent-dark={accentColorDark}
-	{...rest}
->
-	<div class="hds-container inner">
-		{#if badge}
-			<div class="badge">{badge}</div>
-		{/if}
-
-		<h2>{title}</h2>
-
-		{#if description}
-			<p>{description}</p>
-		{/if}
-
-		{#if buttons.length}
-			<div class="cta-actions">
-				{#each buttons as b}
-					<Button
-						as="a"
-						size="large"
-						href={b.href}
-						target={b.external ? '_blank' : undefined}
-						rel={b.external ? 'noopener' : undefined}
-					>
-						{b.label}
-					</Button>
-				{/each}
-			</div>
-		{/if}
-
-		{#if checks.length}
-			<div class="checks">
-				{#each checks as check}
-					<div class="check">
-						<IconCheckCircleFill size={15} />
-						{check}
-					</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</section>
-
-<style>
-	.hds-full-trial-signup {
-		--fts-accent-resolved: var(--fts-accent, var(--accent));
-		padding: 96px 0 138px;
-		background: linear-gradient(
-			to bottom,
-			var(--background, var(--box-background)),
-			color-mix(in srgb, var(--fts-accent-resolved) 40%, var(--background, var(--box-background)))
-		);
-		text-align: center;
-	}
-
-	:global(:root.dark) .hds-full-trial-signup {
-		--fts-accent-resolved: var(--fts-accent-dark, var(--fts-accent, var(--accent)));
-	}
-
-	.inner {
-		width: 600px;
-		max-width: 100%;
-	}
-
-	.badge {
-		display: inline-flex;
-		padding: 4px 14px;
-		border-radius: 100px;
-		font-size: 13px;
-		font-weight: 600;
-		background: color-mix(in srgb, var(--fts-accent-resolved) 12%, transparent);
-		color: var(--fts-accent-resolved);
-		border: 1px solid color-mix(in srgb, var(--fts-accent-resolved) 25%, transparent);
-		margin-bottom: 24px;
-	}
-
-	h2 {
-		font-size: clamp(28px, 4vw, 40px);
-		font-weight: 800;
-		margin: 0 0 12px;
-		letter-spacing: -0.02em;
-		font-family: var(--font-serif);
-	}
-
-	p {
-		font-size: 1rem;
-		color: var(--text-light);
-		margin: 0 0 32px;
-	}
-
-	.cta-actions {
-		display: flex;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: 12px;
-		margin: 0 0 24px;
-	}
-
-	.checks {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 20px;
-		flex-wrap: wrap;
-		margin-top: 24px;
-	}
-
-	.check {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 14px;
-		color: var(--text-light);
-	}
-
-	.check :global(svg) {
-		color: var(--fts-accent-resolved);
-	}
-
-	@media (max-width: 600px) {
-		.checks {
-			flex-direction: column;
-			align-items: flex-start;
-			width: fit-content;
-			max-width: 100%;
-			margin: 24px auto 0;
-			gap: 10px;
-		}
-	}
-</style>

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

@@ -1,18 +0,0 @@
-type ButtonConfig = {
-    href: string;
-    label: string;
-    external?: boolean;
-};
-interface Props {
-    badge?: string | null;
-    title?: string;
-    description?: string;
-    button?: ButtonConfig | ButtonConfig[] | null;
-    checks?: string[];
-    accentColor?: string;
-    accentColorDark?: string;
-    [key: string]: any;
-}
-declare const FullTrialSignup: import("svelte").Component<Props, {}, "">;
-type FullTrialSignup = ReturnType<typeof FullTrialSignup>;
-export default FullTrialSignup;

package/dist/marketing/Header/HeaderLanguageToggle.svelte

@@ -1,121 +0,0 @@
-<script lang="ts">
-	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
-	import HeaderNavLink from './HeaderNavLink.svelte';
-	import type {
-		DropdownAlign,
-		DropdownPosition
-	} from '../../components/Dropdown/dropdown.types.js';
-	import type { LanguageOption } from './language.js';
-
-	interface Props {
-		languages: LanguageOption[];
-		current: string;
-		href: (code: string) => string;
-		showName?: boolean;
-		align?: DropdownAlign;
-		position?: DropdownPosition;
-		label?: string;
-	}
-
-	let {
-		languages,
-		current,
-		href,
-		showName = false,
-		align = 'center',
-		position = 'bottom',
-		label = 'Change language'
-	}: Props = $props();
-
-	const currentLanguage = $derived(languages.find((l) => l.code === current) ?? languages[0]);
-
-	let show = $state(false);
-
-	// close the dropdown once a language link inside it is clicked
-	function closeOnLinkClick(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (target.tagName === 'A' || target.closest('a')) {
-			show = false;
-		}
-	}
-</script>
-
-{#if currentLanguage}
-	<div class="header-language-toggle">
-		<Dropdown bind:show {align} {position} contentPadding={8}>
-			{#snippet trigger()}
-				<HeaderNavLink aria-label={label} aria-expanded={show}>
-					<span class="flag">{currentLanguage.flag}</span>
-					{#if showName}{currentLanguage.name}{/if}
-				</HeaderNavLink>
-			{/snippet}
-			{#snippet content()}
-				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-				<div class="menu" onclick={closeOnLinkClick}>
-					{#each languages as language (language.code)}
-						<HeaderNavLink
-							href={href(language.code)}
-							active={language.code === current}
-							data-lang={language.code}
-							menu
-						>
-							<span class="lang-row">
-								<span class="flag">{language.flag}</span>
-								<span class="name">{language.name}</span>
-								<span class="code">{language.code.toUpperCase()}</span>
-							</span>
-						</HeaderNavLink>
-					{/each}
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
-{/if}
-
-<style>
-	.header-language-toggle {
-		position: relative;
-		display: inline-flex;
-		margin-left: 12px;
-		padding-left: 12px;
-	}
-
-	/* a short divider, centered on the toggle, separating it from nav links,
-	   rather than a full-height border-left */
-	.header-language-toggle::before {
-		content: '';
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 1px;
-		height: 16px;
-		background: var(--border);
-	}
-
-	.flag {
-		font-size: 15px;
-		line-height: 1;
-	}
-
-	.menu {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	.lang-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-	}
-
-	.code {
-		margin-left: auto;
-		padding-left: 8px;
-		font-size: 11px;
-		font-weight: 600;
-		color: var(--text-light);
-	}
-</style>

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

@@ -1,14 +0,0 @@
-import type { DropdownAlign, DropdownPosition } from '../../components/Dropdown/dropdown.types.js';
-import type { LanguageOption } from './language.js';
-interface Props {
-    languages: LanguageOption[];
-    current: string;
-    href: (code: string) => string;
-    showName?: boolean;
-    align?: DropdownAlign;
-    position?: DropdownPosition;
-    label?: string;
-}
-declare const HeaderLanguageToggle: import("svelte").Component<Props, {}, "">;
-type HeaderLanguageToggle = ReturnType<typeof HeaderLanguageToggle>;
-export default HeaderLanguageToggle;

package/dist/marketing/Header/HeaderNavLink.svelte

@@ -1,148 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		href?: string;
-		active?: boolean;
-		menu?: boolean;
-		target?: string;
-		rel?: string;
-		start?: Snippet;
-		children?: Snippet;
-		end?: Snippet;
-		description?: Snippet;
-		onclick?: (event: MouseEvent) => void;
-		[key: string]: unknown;
-	}
-
-	let {
-		href,
-		active = false,
-		menu = false,
-		target,
-		rel,
-		start,
-		children,
-		end,
-		description,
-		onclick,
-		...rest
-	}: Props = $props();
-</script>
-
-<svelte:element
-	this={href ? 'a' : 'span'}
-	{href}
-	{target}
-	{rel}
-	{onclick}
-	role={href ? undefined : 'button'}
-	tabindex={href ? undefined : 0}
-	class="header-nav-link"
-	class:active
-	class:menu={menu || !!description}
-	class:rich={!!description}
-	{...rest}
->
-	{#if description}
-		{#if start}
-			<span class="icon-box">{@render start()}</span>
-		{/if}
-		<span class="text-stack">
-			<span class="title">{@render children?.()}</span>
-			<span class="desc">{@render description()}</span>
-		</span>
-	{:else}
-		{#if start}
-			<span class="start">{@render start()}</span>
-		{/if}
-		{@render children?.()}
-		{#if end}
-			<span class="end">{@render end()}</span>
-		{/if}
-	{/if}
-</svelte:element>
-
-<style>
-	.header-nav-link {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 6px 16px;
-		border-radius: 20px;
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--text-light);
-		text-decoration: none;
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-		transition:
-			0.15s background-color,
-			0.15s color;
-	}
-
-	.header-nav-link:hover {
-		background: var(--hover, var(--accent-lightest));
-		color: var(--text);
-	}
-
-	.header-nav-link.active {
-		background: var(--accent-light);
-		color: var(--text);
-	}
-
-	.header-nav-link.menu {
-		width: 100%;
-		padding: 8px 10px;
-		border-radius: 12px;
-	}
-
-	.start,
-	.end {
-		display: inline-flex;
-		align-items: center;
-	}
-
-	/* icon + title + description layout, see `description` above */
-	.header-nav-link.rich {
-		align-items: flex-start;
-		gap: 10px;
-		white-space: normal;
-	}
-
-	.icon-box {
-		flex: none;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 30px;
-		height: 30px;
-		border-radius: 8px;
-		background: var(--accent-light);
-		color: var(--accent);
-	}
-
-	.header-nav-link.rich.active .icon-box {
-		background: var(--background);
-	}
-
-	.text-stack {
-		display: flex;
-		flex-direction: column;
-		gap: 1px;
-		padding-top: 1px;
-	}
-
-	.title {
-		font-size: 13px;
-		font-weight: 600;
-		color: var(--text);
-	}
-
-	.desc {
-		font-size: 12px;
-		font-weight: 400;
-		color: var(--text-light);
-	}
-</style>

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

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    href?: string;
-    active?: boolean;
-    menu?: boolean;
-    target?: string;
-    rel?: string;
-    start?: Snippet;
-    children?: Snippet;
-    end?: Snippet;
-    description?: Snippet;
-    onclick?: (event: MouseEvent) => void;
-    [key: string]: unknown;
-}
-declare const HeaderNavLink: import("svelte").Component<Props, {}, "">;
-type HeaderNavLink = ReturnType<typeof HeaderNavLink>;
-export default HeaderNavLink;

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

@@ -1,18 +0,0 @@
-export interface LanguageOption {
-    /** language/locale code, e.g. "en", "fr" */
-    code: string;
-    /** an emoji flag shown next to the name */
-    flag: string;
-    name: string;
-}
-/**
- * Rewrites `path` (the current pathname) from `currentLang` to `targetLang`,
- * for the common convention where the default language is served without a
- * prefix and every other language is served under `/{code}`.
- *
- * @example
- * buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
- * buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
- * buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'
- */
-export declare function buildLocalizedUrl(path: string, currentLang: string, targetLang: string, defaultLang: string): string;

package/dist/marketing/Header/language.js

@@ -1,35 +0,0 @@
-// Shared helpers for marketing sites that serve translated pages on their own
-// URLs (e.g. a SvelteKit `[[lang]]` route param) rather than switching
-// language client-side on one page. This is a different case from
-// `InternationalizationService`/`LanguageToggle` in
-// `$lib/components/Internationalization`, which swap translated strings in
-// place on a single page; use that instead if you don't have per-language
-// routes.
-/**
- * Rewrites `path` (the current pathname) from `currentLang` to `targetLang`,
- * for the common convention where the default language is served without a
- * prefix and every other language is served under `/{code}`.
- *
- * @example
- * buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
- * buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
- * buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'
- */
-export function buildLocalizedUrl(path, currentLang, targetLang, defaultLang) {
-    let basePath = path;
-    // strip the current language prefix, if any, to get the language-agnostic path
-    if (currentLang !== defaultLang) {
-        const prefix = `/${currentLang}`;
-        if (basePath === prefix) {
-            basePath = '/';
-        }
-        else if (basePath.startsWith(`${prefix}/`)) {
-            basePath = basePath.slice(prefix.length);
-        }
-    }
-    // the default language is served without a prefix
-    if (targetLang === defaultLang) {
-        return basePath;
-    }
-    return basePath === '/' ? `/${targetLang}` : `/${targetLang}${basePath}`;
-}