@hyvor/design 2.1.8-beta.5 → 2.1.9

package/dist/marketing/SpotlightSplit/SpotlightSplit.svelte

@@ -1,256 +0,0 @@
-<script lang="ts">
-	import Button from '../../components/Button/Button.svelte';
-	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
-	import type { Snippet } from 'svelte';
-
-	type ButtonConfig = { href: string; label: string; external?: boolean };
-
-	interface Props {
-		title: string | Snippet;
-		description?: string;
-		stats?: string[];
-		button?: ButtonConfig | ButtonConfig[] | null;
-		content: Snippet;
-		reverse?: boolean;
-		background?: string;
-		highlightColor?: string;
-	}
-
-	let {
-		title,
-		description = '',
-		stats = [],
-		button = null,
-		content,
-		reverse = false,
-		background = 'var(--accent)',
-		highlightColor = 'rgba(255, 238, 217, 0.9)'
-	}: Props = $props();
-
-	const buttons = $derived(button ? (Array.isArray(button) ? button : [button]) : []);
-
-	let mouseX = $state(0);
-	let mouseY = $state(0);
-	let hovering = $state(false);
-
-	function handlePointerMove(event: PointerEvent) {
-		const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect();
-		mouseX = event.clientX - bounds.left;
-		mouseY = event.clientY - bounds.top;
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<section
-	class="hds-spotlight-split"
-	onpointermove={handlePointerMove}
-	onpointerenter={() => (hovering = true)}
-	onpointerleave={() => (hovering = false)}
-	style:--mx="{mouseX}px"
-	style:--my="{mouseY}px"
-	style:--sps-bg={background}
-	style:--sps-highlight={highlightColor}
->
-	<svg class="bg-pattern" width="100%" height="100%" aria-hidden="true">
-		<defs>
-			<pattern id="spotlight-split-grid" width="56" height="56" patternUnits="userSpaceOnUse">
-				<path d="M 56 0 L 0 0 0 56" fill="none" stroke="white" stroke-width="1" />
-			</pattern>
-			<radialGradient id="spotlight-split-fade" cx="50%" cy="40%" r="75%">
-				<stop offset="0%" stop-color="white" stop-opacity="1" />
-				<stop offset="100%" stop-color="white" stop-opacity="0" />
-			</radialGradient>
-			<mask id="spotlight-split-mask">
-				<rect width="100%" height="100%" fill="url(#spotlight-split-fade)" />
-			</mask>
-		</defs>
-		<rect
-			width="100%"
-			height="100%"
-			fill="url(#spotlight-split-grid)"
-			mask="url(#spotlight-split-mask)"
-		/>
-	</svg>
-
-	<div class="grid-highlight" class:visible={hovering} aria-hidden="true"></div>
-
-	<div class="hds-container inner" class:reverse>
-		<div class="text-side">
-			<h2>
-				{#if typeof title === 'string'}
-					{@html title}
-				{:else}
-					{@render title()}
-				{/if}
-			</h2>
-
-			{#if description}
-				<p class="description">{description}</p>
-			{/if}
-
-			{#if stats.length}
-				<div class="stat-row">
-					{#each stats as stat}
-						<span class="stat">{stat}</span>
-					{/each}
-				</div>
-			{/if}
-
-			{#if buttons.length}
-				<div class="buttons">
-					{#each buttons as b}
-						<Button
-							as="a"
-							href={b.href}
-							target={b.external ? '_blank' : undefined}
-							rel={b.external ? 'noopener' : undefined}
-							variant="outline"
-							color="input"
-						>
-							{b.label}
-							{#if b.external}
-								{#snippet end()}<IconBoxArrowUpRight size={11} />{/snippet}
-							{/if}
-						</Button>
-					{/each}
-				</div>
-			{/if}
-		</div>
-
-		<div class="content-side">
-			{@render content()}
-		</div>
-	</div>
-</section>
-
-<style>
-	.hds-spotlight-split {
-		position: relative;
-		background: var(--sps-bg);
-		padding: 96px 0;
-		overflow: hidden;
-	}
-
-	.bg-pattern {
-		position: absolute;
-		inset: 0;
-		opacity: 0.08;
-		pointer-events: none;
-	}
-
-	.grid-highlight {
-		position: absolute;
-		inset: 0;
-		pointer-events: none;
-		background-image:
-			linear-gradient(to right, var(--sps-highlight) 1px, transparent 1px),
-			linear-gradient(to bottom, var(--sps-highlight) 1px, transparent 1px);
-		background-size: 56px 56px;
-		-webkit-mask-image: radial-gradient(
-			180px circle at var(--mx, 50%) var(--my, 50%),
-			black 0%,
-			black 35%,
-			transparent 75%
-		);
-		mask-image: radial-gradient(
-			180px circle at var(--mx, 50%) var(--my, 50%),
-			black 0%,
-			black 35%,
-			transparent 75%
-		);
-		opacity: 0;
-		transition: opacity 0.35s ease;
-	}
-
-	.grid-highlight.visible {
-		opacity: 0.2;
-	}
-
-	.inner {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 48px;
-	}
-
-	.inner.reverse {
-		flex-direction: row-reverse;
-	}
-
-	.text-side {
-		flex: 1;
-		min-width: 0;
-	}
-
-	h2 {
-		font-size: clamp(35px, 4vw, 50px);
-		font-weight: 800;
-		letter-spacing: -0.02em;
-		line-height: 1.1;
-		color: #fff;
-		margin: 0 0 18px;
-		font-family: var(--font-serif);
-	}
-
-	.description {
-		font-size: 16px;
-		line-height: 1.7;
-		color: rgba(255, 255, 255, 0.7);
-		max-width: 460px;
-		margin: 0 0 28px;
-	}
-
-	.stat-row {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px 20px;
-		margin-bottom: 28px;
-	}
-
-	.stat {
-		font-size: 14px;
-		font-weight: 600;
-		color: rgba(255, 255, 255, 0.85);
-	}
-
-	.buttons {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 12px;
-	}
-
-	.buttons :global(.button) {
-		border-color: rgba(255, 255, 255, 0.3) !important;
-		color: rgba(255, 255, 255, 0.85) !important;
-		background: transparent !important;
-		text-decoration: none !important;
-	}
-
-	.buttons :global(.button):hover {
-		border-color: rgba(255, 255, 255, 0.55) !important;
-		color: #fff !important;
-	}
-
-	.content-side {
-		flex-shrink: 0;
-	}
-
-	@media (max-width: 768px) {
-		.inner,
-		.inner.reverse {
-			flex-direction: column;
-			text-align: center;
-			gap: 36px;
-		}
-
-		.description {
-			max-width: 100%;
-		}
-
-		.stat-row,
-		.buttons {
-			justify-content: center;
-		}
-	}
-</style>

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

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-type ButtonConfig = {
-    href: string;
-    label: string;
-    external?: boolean;
-};
-interface Props {
-    title: string | Snippet;
-    description?: string;
-    stats?: string[];
-    button?: ButtonConfig | ButtonConfig[] | null;
-    content: Snippet;
-    reverse?: boolean;
-    background?: string;
-    highlightColor?: string;
-}
-declare const SpotlightSplit: import("svelte").Component<Props, {}, "">;
-type SpotlightSplit = ReturnType<typeof SpotlightSplit>;
-export default SpotlightSplit;

package/dist/marketing/Testimonials/Testimonials.svelte

@@ -1,382 +0,0 @@
-<script lang="ts">
-	interface TextReview {
-		type: 'text';
-		name: string;
-		role: string;
-		quote: string;
-	}
-
-	interface VideoReview {
-		type: 'video';
-		name: string;
-		role: string;
-		videoUrl?: string;
-		posterUrl?: string;
-	}
-
-	type Review = TextReview | VideoReview;
-
-	interface Props {
-		label?: string;
-		title?: string;
-		reviews: Review[];
-		// the reviewer name is set in a handwritten-style font (Caveat, loaded
-		// from Bunny Fonts) by default — turn off to use the regular typeface,
-		// e.g. if the host page can't reach an external font host
-		handwrittenNames?: boolean;
-	}
-
-	let {
-		label = 'Testimonials',
-		title = 'Loved by our customers.',
-		reviews,
-		handwrittenNames = true
-	}: Props = $props();
-
-	// deterministic, non-photographic "identicon" per reviewer name — used as a
-	// placeholder avatar when no photo is available for a text review
-	function identicon(seed: string) {
-		let hash = 0;
-		for (let i = 0; i < seed.length; i++) {
-			hash = (hash * 31 + seed.charCodeAt(i)) | 0;
-		}
-		const hue = Math.abs(hash) % 360;
-		const cells: { x: number; y: number }[] = [];
-		for (let col = 0; col < 3; col++) {
-			for (let row = 0; row < 5; row++) {
-				const bit = (hash >> (col * 5 + row)) & 1;
-				if (!bit) continue;
-				cells.push({ x: col, y: row });
-				if (col < 2) cells.push({ x: 4 - col, y: row });
-			}
-		}
-		return {
-			bg: `hsl(${hue} 45% 92%)`,
-			fg: `hsl(${hue} 50% 40%)`,
-			cells
-		};
-	}
-
-	let scrollEl: HTMLDivElement | undefined = $state();
-	let dragging = $state(false);
-	let dragStartX = 0;
-	let dragStartScroll = 0;
-
-	function onPointerDown(e: PointerEvent) {
-		if (!scrollEl) return;
-		dragging = true;
-		dragStartX = e.clientX;
-		dragStartScroll = scrollEl.scrollLeft;
-		scrollEl.setPointerCapture(e.pointerId);
-	}
-
-	function onPointerMove(e: PointerEvent) {
-		if (!dragging || !scrollEl) return;
-		scrollEl.scrollLeft = dragStartScroll - (e.clientX - dragStartX);
-	}
-
-	function onPointerUp() {
-		dragging = false;
-	}
-</script>
-
-<svelte:head>
-	{#if handwrittenNames}
-		<link href="https://fonts.bunny.net/css?family=caveat:600,700" rel="stylesheet" />
-	{/if}
-</svelte:head>
-
-<section class="hds-testimonials" class:handwritten={handwrittenNames}>
-	<div class="hds-container head">
-		<p class="label">{label}</p>
-		<h2>{@html title}</h2>
-	</div>
-
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="scroll-row"
-		class:dragging
-		bind:this={scrollEl}
-		onpointerdown={onPointerDown}
-		onpointermove={onPointerMove}
-		onpointerup={onPointerUp}
-		onpointerleave={onPointerUp}
-		role="region"
-		aria-label={label}
-	>
-		{#each reviews as review}
-			{#if review.type === 'text'}
-				{@const av = identicon(review.name)}
-				<figure class="card text-card hds-box">
-					<svg class="avatar" viewBox="0 0 5 5" style="background: {av.bg}" aria-hidden="true">
-						{#each av.cells as cell}
-							<rect x={cell.x} y={cell.y} width="1" height="1" fill={av.fg} />
-						{/each}
-					</svg>
-					<blockquote>&ldquo;{review.quote}&rdquo;</blockquote>
-					<figcaption>
-						<span class="name">{review.name}</span>
-						<span class="role">{review.role}</span>
-					</figcaption>
-				</figure>
-			{:else}
-				<figure class="card video-card hds-box">
-					<div class="poster">
-						<img src={review.posterUrl} alt="" />
-						<div class="poster-scrim"></div>
-					</div>
-
-					<div class="video-avatar">
-						<img src={review.posterUrl} alt="" />
-					</div>
-
-					<button class="play-btn" aria-label="Play video testimonial" disabled>
-						<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-							<path d="M5 3.5v9l8-4.5-8-4.5z" />
-						</svg>
-					</button>
-
-					<figcaption>
-						<span class="name">{review.name}</span>
-						<span class="role">{review.role}</span>
-					</figcaption>
-				</figure>
-			{/if}
-		{/each}
-	</div>
-</section>
-
-<style>
-	.hds-testimonials {
-		background: var(--accent-lightest);
-		padding: 100px 0 96px;
-		overflow: hidden;
-	}
-
-	.head {
-		margin-bottom: 44px;
-	}
-
-	.label {
-		font-size: 14px;
-		font-weight: 600;
-		letter-spacing: 0.09em;
-		text-transform: uppercase;
-		color: var(--accent);
-		margin: 0 0 16px;
-	}
-
-	h2 {
-		font-size: clamp(30px, 4vw, 44px);
-		font-weight: 800;
-		letter-spacing: -0.02em;
-		line-height: 1.15;
-		color: var(--text);
-		margin: 0;
-		font-family: var(--font-serif);
-	}
-
-	.scroll-row {
-		display: flex;
-		align-items: stretch;
-		gap: 20px;
-		overflow-x: auto;
-		/* explicit, not left to default — a lone overflow-x: auto silently
-		   forces overflow-y to auto too (per spec, when only one axis is
-		   'visible'), which was clipping each card's box-shadow into a hard
-		   line at the top/bottom of the row instead of letting it fade out */
-		overflow-y: visible;
-		scroll-snap-type: x proximity;
-		cursor: grab;
-		/* top/bottom padding must clear --box-shadow's blur radius, or the
-		   shadow still gets clipped by the row's own padding-box edge */
-		padding: 32px 15px 36px max(15px, calc((100vw - 1000px) / 2));
-		scrollbar-width: none;
-		-webkit-overflow-scrolling: touch;
-		touch-action: pan-y;
-	}
-
-	.scroll-row.dragging {
-		cursor: grabbing;
-		scroll-snap-type: none;
-	}
-
-	.scroll-row::-webkit-scrollbar {
-		display: none;
-	}
-
-	.card {
-		position: relative;
-		flex: 0 0 auto;
-		width: 320px;
-		height: 440px;
-		margin: 0;
-		box-sizing: border-box;
-		scroll-snap-align: start;
-	}
-
-	.text-card {
-		padding: 28px;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.avatar {
-		width: 46px;
-		height: 46px;
-		border-radius: 50%;
-		flex-shrink: 0;
-		display: block;
-		shape-rendering: crispEdges;
-	}
-
-	blockquote {
-		font-size: 16px;
-		line-height: 1.7;
-		color: var(--text);
-		margin: 20px 0 0;
-		flex: 1;
-	}
-
-	.text-card figcaption {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-	}
-
-	.name {
-		font-size: 16px;
-		font-weight: 600;
-		color: var(--text);
-		line-height: 1.2;
-	}
-
-	.handwritten .name {
-		font-family: 'Caveat', cursive;
-		font-size: 28px;
-		font-weight: 600;
-	}
-
-	.role {
-		font-size: 13px;
-		color: var(--text-light);
-	}
-
-	.video-card {
-		width: 280px;
-		overflow: hidden;
-		padding: 0;
-	}
-
-	.poster {
-		position: absolute;
-		inset: 0;
-	}
-
-	.poster img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		display: block;
-	}
-
-	/* even out contrast across whatever poster photo lands here, so the
-	   play button and captions stay legible */
-	.poster-scrim {
-		position: absolute;
-		inset: 0;
-		background: linear-gradient(160deg, rgba(20, 14, 12, 0.45), rgba(20, 14, 12, 0.65));
-	}
-
-	.video-avatar {
-		position: absolute;
-		top: 16px;
-		left: 16px;
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		overflow: hidden;
-		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
-	}
-
-	.video-avatar img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		display: block;
-	}
-
-	.play-btn {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: 56px;
-		height: 56px;
-		border-radius: 50%;
-		background: rgba(255, 255, 255, 0.18);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		border: 1px solid rgba(255, 255, 255, 0.4);
-		color: #fff;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: default;
-		transition:
-			transform 0.2s,
-			background 0.2s;
-	}
-
-	.play-btn:not(:disabled):hover {
-		transform: translate(-50%, -50%) scale(1.08);
-		background: rgba(255, 255, 255, 0.28);
-	}
-
-	.play-btn svg {
-		margin-left: 3px;
-	}
-
-	.video-card figcaption {
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		padding: 40px 20px 20px;
-		background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
-		display: flex;
-		flex-direction: column;
-	}
-
-	.video-card .name {
-		color: #fff;
-	}
-
-	.video-card .role {
-		color: rgba(255, 255, 255, 0.75);
-	}
-
-	@media (max-width: 600px) {
-		/* keep in step with the wider .hds-container gutter set globally for
-		   the host page at this same breakpoint */
-		.scroll-row {
-			padding: 32px 20px 36px max(20px, calc((100vw - 1000px) / 2));
-		}
-	}
-
-	@media (max-width: 768px) {
-		.head {
-			text-align: center;
-			margin-bottom: 32px;
-		}
-
-		.card {
-			width: 280px;
-			height: 400px;
-		}
-
-		.video-card {
-			width: 240px;
-		}
-	}
-</style>

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

@@ -1,23 +0,0 @@
-interface TextReview {
-    type: 'text';
-    name: string;
-    role: string;
-    quote: string;
-}
-interface VideoReview {
-    type: 'video';
-    name: string;
-    role: string;
-    videoUrl?: string;
-    posterUrl?: string;
-}
-type Review = TextReview | VideoReview;
-interface Props {
-    label?: string;
-    title?: string;
-    reviews: Review[];
-    handwrittenNames?: boolean;
-}
-declare const Testimonials: import("svelte").Component<Props, {}, "">;
-type Testimonials = ReturnType<typeof Testimonials>;
-export default Testimonials;