@hyvor/design 2.1.8-beta.5 → 2.1.9

package/dist/marketing/Hero/Hero.svelte

@@ -1,353 +0,0 @@
-<script lang="ts">
-	import Button from '../../components/Button/Button.svelte';
-	import IconChevronDown from '@hyvor/icons/IconChevronDown';
-	import type { ComponentProps, Snippet } from 'svelte';
-
-	type ButtonProps = ComponentProps<typeof Button>;
-
-	interface Props {
-		title: string | Snippet;
-		subtitle?: string | Snippet;
-		badge?: string | Snippet;
-		buttons?: ButtonProps | ButtonProps[] | null;
-		accentColor?: string;
-		accentColorDark?: string;
-		fullHeight?: boolean;
-		after?: Snippet;
-	}
-
-	let {
-		title,
-		subtitle,
-		badge,
-		buttons = null,
-		accentColor,
-		accentColorDark,
-		fullHeight = false,
-		after
-	}: Props = $props();
-
-	const buttonList = $derived(buttons ? (Array.isArray(buttons) ? buttons : [buttons]) : []);
-</script>
-
-<section
-	class="hero"
-	class:full-height={fullHeight}
-	style:--hero-accent={accentColor}
-	style:--hero-accent-dark={accentColorDark}
->
-	<svg class="hero-pattern" aria-hidden="true" focusable="false">
-		<defs>
-			<pattern id="hero-dot-pattern" width="28" height="28" patternUnits="userSpaceOnUse">
-				<circle cx="2" cy="2" r="1.6" fill="currentColor" />
-			</pattern>
-		</defs>
-		<rect width="100%" height="100%" fill="url(#hero-dot-pattern)" />
-	</svg>
-
-	<div class="hds-container inner">
-		<div class="left">
-			{#if badge}
-				<div class="badge anim anim-0">
-					{#if typeof badge === 'string'}
-						{badge}
-					{:else}
-						{@render badge()}
-					{/if}
-				</div>
-			{/if}
-
-			<h1 class="anim anim-1">
-				{#if typeof title === 'string'}
-					{@html title}
-				{:else}
-					{@render title()}
-				{/if}
-			</h1>
-
-			{#if subtitle}
-				<h2 class="subtitle anim anim-2">
-					{#if typeof subtitle === 'string'}
-						{@html subtitle}
-					{:else}
-						{@render subtitle()}
-					{/if}
-				</h2>
-			{/if}
-
-			{#if buttonList.length}
-				<div class="buttons anim anim-3">
-					{#each buttonList as b}
-						<Button
-							as="a"
-							href={b.href}
-							target={b.external ? '_blank' : undefined}
-							rel={b.external ? 'noopener' : undefined}
-							size={b.size || 'x-large'}
-							variant={b.variant}
-						>
-							{b.label}
-						</Button>
-					{/each}
-				</div>
-			{/if}
-
-			{#if after}
-				<div class="anim anim-3">
-					{@render after()}
-				</div>
-			{/if}
-		</div>
-	</div>
-
-	<div class="scroll-indicator anim anim-4" aria-hidden="true">
-		<div class="scroll-mouse">
-			<div class="scroll-dot"></div>
-		</div>
-		<IconChevronDown size={12} />
-	</div>
-</section>
-
-<style>
-	.hero {
-		--hero-accent-resolved: var(--hero-accent, var(--accent));
-
-		position: relative;
-		display: flex;
-		align-items: center;
-		padding: 60px 0 80px;
-		overflow: hidden;
-	}
-
-	.hero.full-height {
-		min-height: calc(100vh - var(--header-height, 60px));
-	}
-
-	:global(:root.dark) .hero {
-		--hero-accent-resolved: var(--hero-accent-dark, var(--hero-accent, var(--accent)));
-	}
-
-	.hero-pattern {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		color: var(--border);
-		mask-image: radial-gradient(ellipse 65% 60% at 50% 38%, black 0%, transparent 75%);
-		-webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 38%, black 0%, transparent 75%);
-		pointer-events: none;
-	}
-
-	.inner {
-		position: relative;
-		z-index: 1;
-		display: flex;
-		align-items: center;
-		gap: 100px;
-		width: 1120px;
-		max-width: 100%;
-	}
-
-	.left {
-		flex: 1;
-		min-width: 0;
-		text-align: center;
-	}
-
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 4px 12px;
-		border-radius: 100px;
-		font-size: 13px;
-		font-weight: 600;
-		background: color-mix(in srgb, var(--hero-accent-resolved) 12%, transparent);
-		color: var(--hero-accent-resolved);
-		margin-bottom: 24px;
-		border: 1px solid color-mix(in srgb, var(--hero-accent-resolved) 25%, transparent);
-	}
-
-	h1 {
-		margin: 0;
-		font-size: clamp(36px, 5vw, 56px);
-		line-height: 1.1;
-		letter-spacing: -0.02em;
-		font-weight: 800;
-		font-family: var(--font-serif);
-	}
-
-	/* smaller second line inside the title, e.g. a parenthetical sub-line */
-	.left :global(h1 .heading-small) {
-		font-size: clamp(35px, 5vw, 46px);
-		font-weight: 800;
-	}
-
-	.subtitle {
-		font-weight: 500;
-		letter-spacing: -0.02em;
-		font-family: var(--font-serif);
-
-		margin: auto;
-		margin-top: 30px;
-		font-size: clamp(22px, 3vw, 26px);
-		line-height: 1.6;
-		color: color-mix(in srgb, var(--text) 70%, var(--text-light));
-		max-width: 480px;
-	}
-
-	.left :global(.hds-hl) {
-		color: var(--hero-accent-resolved);
-		font-weight: 700;
-	}
-
-	.left :global(.hds-marker) {
-		position: relative;
-		font-weight: 700;
-		background-image: linear-gradient(
-			100deg,
-			color-mix(in srgb, var(--hero-accent-resolved) 35%, transparent) 0%,
-			color-mix(in srgb, var(--hero-accent-resolved) 45%, transparent) 100%
-		);
-		background-repeat: no-repeat;
-		background-size: 100% 0.5em;
-		background-position: 0 88%;
-		box-decoration-break: clone;
-		-webkit-box-decoration-break: clone;
-	}
-
-	.buttons {
-		display: flex;
-		gap: 12px;
-		margin-top: 36px;
-		flex-wrap: wrap;
-		justify-content: center;
-	}
-
-	/* Entrance animation */
-	.anim {
-		opacity: 0;
-		animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-	}
-
-	.anim-0 {
-		animation-delay: 0s;
-	}
-
-	.anim-1 {
-		animation-delay: 0.05s;
-	}
-
-	.anim-2 {
-		animation-delay: 0.15s;
-	}
-
-	.anim-3 {
-		animation-delay: 0.25s;
-	}
-
-	.anim-4 {
-		animation-delay: 0.6s;
-	}
-
-	@keyframes hero-fade-up {
-		from {
-			opacity: 0;
-			transform: translateY(18px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.anim {
-			animation: none;
-			opacity: 1;
-			transform: none;
-		}
-	}
-
-	/* Scroll indicator */
-	.scroll-indicator {
-		position: absolute;
-		left: 50%;
-		bottom: 28px;
-		transform: translateX(-50%);
-		z-index: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 8px;
-		color: var(--text-light);
-	}
-
-	.scroll-mouse {
-		width: 24px;
-		height: 38px;
-		border: 2px solid var(--border);
-		border-radius: 100px;
-		display: flex;
-		justify-content: center;
-		padding-top: 6px;
-	}
-
-	.scroll-dot {
-		width: 4px;
-		height: 8px;
-		border-radius: 2px;
-		background: var(--hero-accent-resolved);
-		animation: scroll-wheel 1.8s ease-in-out infinite;
-	}
-
-	@keyframes scroll-wheel {
-		0% {
-			opacity: 1;
-			transform: translateY(0);
-		}
-		60% {
-			opacity: 0;
-			transform: translateY(12px);
-		}
-		100% {
-			opacity: 0;
-			transform: translateY(12px);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.scroll-dot {
-			animation: none;
-		}
-	}
-
-	/* Responsive */
-	@media (max-width: 992px) {
-		.hero.full-height {
-			min-height: unset;
-		}
-
-		.hero {
-			padding: 60px 0;
-		}
-
-		.inner {
-			flex-direction: column;
-			gap: 48px;
-			text-align: center;
-		}
-
-		.subtitle {
-			max-width: 100%;
-		}
-
-		.buttons {
-			justify-content: center;
-		}
-
-		.scroll-indicator {
-			display: none;
-		}
-	}
-</style>

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

@@ -1,16 +0,0 @@
-import Button from '../../components/Button/Button.svelte';
-import type { ComponentProps, Snippet } from 'svelte';
-type ButtonProps = ComponentProps<typeof Button>;
-interface Props {
-    title: string | Snippet;
-    subtitle?: string | Snippet;
-    badge?: string | Snippet;
-    buttons?: ButtonProps | ButtonProps[] | null;
-    accentColor?: string;
-    accentColorDark?: string;
-    fullHeight?: boolean;
-    after?: Snippet;
-}
-declare const Hero: import("svelte").Component<Props, {}, "">;
-type Hero = ReturnType<typeof Hero>;
-export default Hero;

package/dist/marketing/LogoStrip/LogoStrip.svelte

@@ -1,204 +0,0 @@
-<script lang="ts">
-	interface Logo {
-		name: string;
-		src: string;
-		href?: string;
-		width?: number;
-		height?: number;
-		// keep this one logo in its real colors instead of the shared white
-		// silhouette treatment below, for opaque, full-color icons (e.g. a
-		// square app icon) that would otherwise crush into a blank box
-		color?: boolean;
-	}
-
-	interface Props {
-		logos: Logo[];
-		label?: string;
-		background?: string;
-		invert?: boolean;
-		marquee?: boolean;
-		speed?: number;
-	}
-
-	let {
-		logos,
-		label = '',
-		background = 'var(--accent)',
-		invert = true,
-		marquee = true,
-		speed = 34
-	}: Props = $props();
-
-	// the track is rendered twice back to back and animated exactly -50%,
-	// since both halves are pixel-identical, the loop point is invisible
-	const track = $derived(marquee ? [...logos, ...logos] : logos);
-</script>
-
-{#snippet logoImg(logo: Logo, hidden = false)}
-	<img
-		src={logo.src}
-		alt={logo.name}
-		width={logo.width ?? 120}
-		height={logo.height ?? 28}
-		class="logo"
-		class:invert={invert && !logo.color}
-		class:color={logo.color}
-		aria-hidden={hidden}
-	/>
-{/snippet}
-
-<section class="hds-logo-strip" style:--ls-bg={background} style:--ls-speed="{speed}s">
-	<div class="hds-container">
-		{#if label}
-			<p class="label">{label}</p>
-		{/if}
-
-		{#if !marquee}
-			<div class="logos">
-				{#each logos as logo}
-					{#if logo.href}
-						<a href={logo.href} target="_blank" rel="noopener" class="logo-link">
-							{@render logoImg(logo)}
-						</a>
-					{:else}
-						{@render logoImg(logo)}
-					{/if}
-				{/each}
-			</div>
-		{/if}
-	</div>
-
-	{#if marquee}
-		<div class="marquee">
-			<div class="marquee-track">
-				{#each track as logo, i}
-					{@const hidden = i >= logos.length}
-					{#if logo.href}
-						<a
-							href={logo.href}
-							target="_blank"
-							rel="noopener"
-							class="logo-link"
-							tabindex={hidden ? -1 : undefined}
-						>
-							{@render logoImg(logo, hidden)}
-						</a>
-					{:else}
-						{@render logoImg(logo, hidden)}
-					{/if}
-				{/each}
-			</div>
-		</div>
-	{/if}
-</section>
-
-<style>
-	.hds-logo-strip {
-		background: var(--ls-bg);
-		padding: 52px 0;
-		overflow: hidden;
-	}
-
-	.label {
-		text-align: center;
-		font-size: 16px;
-		font-weight: 600;
-		letter-spacing: 0.07em;
-		text-transform: uppercase;
-		color: var(--accent-light-mid);
-		margin: 0 0 36px;
-	}
-
-	/* static (non-marquee) layout */
-	.logos {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: 24px 52px;
-	}
-
-	/* marquee layout */
-	.marquee {
-		mask-image: linear-gradient(
-			to right,
-			transparent 0,
-			black 64px,
-			black calc(100% - 64px),
-			transparent 100%
-		);
-		-webkit-mask-image: linear-gradient(
-			to right,
-			transparent 0,
-			black 64px,
-			black calc(100% - 64px),
-			transparent 100%
-		);
-	}
-
-	.marquee-track {
-		display: flex;
-		align-items: center;
-		gap: 52px;
-		width: max-content;
-		animation: marquee-scroll var(--ls-speed) linear infinite;
-	}
-
-	.marquee:hover .marquee-track {
-		animation-play-state: paused;
-	}
-
-	@keyframes marquee-scroll {
-		from {
-			transform: translateX(0);
-		}
-		to {
-			/* one full set-width, since the track is two identical sets back to back */
-			transform: translateX(-50%);
-		}
-	}
-
-	.logo-link {
-		display: block;
-	}
-
-	.logo {
-		display: block;
-		flex-shrink: 0;
-		opacity: 0.8;
-		transition: opacity 0.15s ease;
-	}
-
-	.logo.invert {
-		filter: brightness(0) invert(1);
-	}
-
-	.logo.color {
-		filter: none;
-		opacity: 1;
-		border-radius: 10px;
-	}
-
-	.logo:hover {
-		opacity: 1;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.marquee {
-			mask-image: none;
-			-webkit-mask-image: none;
-		}
-
-		.marquee-track {
-			animation: none;
-			flex-wrap: wrap;
-			justify-content: center;
-			width: 100%;
-			padding: 0 15px;
-		}
-
-		.marquee-track :global(.logo[aria-hidden='true']) {
-			display: none;
-		}
-	}
-</style>

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

@@ -1,19 +0,0 @@
-interface Logo {
-    name: string;
-    src: string;
-    href?: string;
-    width?: number;
-    height?: number;
-    color?: boolean;
-}
-interface Props {
-    logos: Logo[];
-    label?: string;
-    background?: string;
-    invert?: boolean;
-    marquee?: boolean;
-    speed?: number;
-}
-declare const LogoStrip: import("svelte").Component<Props, {}, "">;
-type LogoStrip = ReturnType<typeof LogoStrip>;
-export default LogoStrip;

package/dist/marketing/Seal/CcpaSeal.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import Seal from './Seal.svelte';
-	import ccpa from './ccpa.svg?url';
-
-	interface Props {
-		size?: number;
-	}
-
-	let { size = 100 }: Props = $props();
-</script>
-
-<Seal {size}>
-	<img src={ccpa} alt="CCPA Seal" class="map" />
-	<span class="label">CCPA</span>
-</Seal>
-
-<style>
-	.map {
-		width: 22px;
-		height: auto;
-	}
-
-	.label {
-		font-size: 13px;
-		font-weight: 700;
-		letter-spacing: 0.03em;
-		color: #fff;
-	}
-</style>

package/dist/marketing/Seal/CcpaSeal.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    size?: number;
-}
-declare const CcpaSeal: import("svelte").Component<Props, {}, "">;
-type CcpaSeal = ReturnType<typeof CcpaSeal>;
-export default CcpaSeal;

package/dist/marketing/Seal/GdprSeal.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-	import IconStarFill from '@hyvor/icons/IconStarFill';
-	import Seal from './Seal.svelte';
-
-	interface Props {
-		size?: number;
-	}
-
-	let { size = 100 }: Props = $props();
-
-	const starAngles = Array.from({ length: 12 }, (_, i) => i * 30);
-</script>
-
-<Seal {size}>
-	<div class="star-ring">
-		{#each starAngles as angle}
-			<span class="star" style="--angle: {angle}deg">
-				<IconStarFill size={7} />
-			</span>
-		{/each}
-	</div>
-	<span class="label">GDPR</span>
-</Seal>
-
-<style>
-	.star-ring {
-		position: absolute;
-		inset: 0;
-		--star-radius: 34px;
-	}
-
-	.star {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 10px;
-		height: 10px;
-		margin: -5px 0 0 -5px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #e3b34a;
-		transform: rotate(var(--angle)) translateY(calc(var(--star-radius) * -1))
-			rotate(calc(var(--angle) * -1));
-	}
-
-	.label {
-		font-size: 13px;
-		font-weight: 700;
-		letter-spacing: 0.03em;
-		color: #fff;
-		z-index: 1;
-	}
-
-	@media (max-width: 768px) {
-		.star-ring {
-			--star-radius: 28px;
-		}
-	}
-</style>

package/dist/marketing/Seal/GdprSeal.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    size?: number;
-}
-declare const GdprSeal: import("svelte").Component<Props, {}, "">;
-type GdprSeal = ReturnType<typeof GdprSeal>;
-export default GdprSeal;