@heyramzi/ui 7.0.0 → 8.1.0

package/src/showcase/demos/ai/loading-state.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { PixelLoader } from "../../../ai/index.js";
-</script>
-
-<div class="stack">
-	<PixelLoader label="Reading the workspace" />
-	<PixelLoader label="Writing the migration" startSeconds={47} />
-	<PixelLoader label="Waiting on the tool" elapsed={false} />
-</div>
-
-<style>
-	.stack {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 0.875rem;
-		width: 100%;
-	}
-</style>

package/src/showcase/demos/ai/prompt-input.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-	import {
-		PromptInput,
-		PromptInputBody,
-		PromptInputTextarea,
-		PromptInputToolbar,
-		PromptInputSubmit,
-		Suggestions,
-		Suggestion,
-		type PromptInputStatus,
-	} from "../../../ai/index.js";
-
-	let status = $state<PromptInputStatus>("ready");
-	let value = $state("");
-
-	// Two, not three: the stage is half the section now, and the third chip ran
-	// past the card edge into a sideways scroll.
-	const ideas = ["Summarize this thread", "Draft a reply"];
-
-	function send(text: string) {
-		if (!text.trim()) return;
-		value = "";
-		status = "submitted";
-		setTimeout(() => (status = "streaming"), 400);
-		setTimeout(() => (status = "ready"), 2000);
-	}
-</script>
-
-<div class="stack">
-	<Suggestions>
-		{#each ideas as idea (idea)}
-			<Suggestion suggestion={idea} onclick={(s) => send(s)} />
-		{/each}
-	</Suggestions>
-	<PromptInput onSubmit={(v) => send(v)}>
-		<PromptInputBody>
-			<PromptInputTextarea bind:value placeholder="Ask anything..." />
-			<PromptInputToolbar>
-				<span class="hint">Enter to send</span>
-				<PromptInputSubmit {status} />
-			</PromptInputToolbar>
-		</PromptInputBody>
-	</PromptInput>
-</div>
-
-<style>
-	.stack {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		width: 100%;
-	}
-	.hint {
-		font-size: 0.75rem;
-		color: var(--muted-foreground);
-	}
-</style>

package/src/showcase/demos/ai/reasoning.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Reasoning, ReasoningTrigger, ReasoningContent } from "../../../ai/index.js";
-</script>
-
-<div class="w">
-	<Reasoning duration={4} open>
-		<ReasoningTrigger />
-		<ReasoningContent>
-			AnimatedBeam already lives in @heyramzi/ui, so the fix is to re-export it and migrate the two
-			consumers rather than copy the keyframes a third time.
-		</ReasoningContent>
-	</Reasoning>
-</div>
-
-<style>
-	.w {
-		width: 100%;
-	}
-</style>

package/src/showcase/demos/ai/thinking-dots.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { ThinkingDots } from "../../../ai/index.js";
-</script>
-
-<div class="c"><ThinkingDots label="Thinking" /></div>
-
-<style>
-	.c {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		min-height: 5rem;
-	}
-</style>

package/src/showcase/demos/ai/voice-waveform.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { VoiceWaveform } from "../../../ai/index.js";
-
-	let active = $state(true);
-</script>
-
-<button type="button" class="c" onclick={() => (active = !active)}>
-	<VoiceWaveform {active} />
-</button>
-
-<style>
-	.c {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		min-height: 5rem;
-		background: none;
-		border: none;
-		padding: 0;
-		color: var(--primary);
-		cursor: pointer;
-	}
-</style>

package/src/showcase/demos/effects/animated-beam.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-	import { AnimatedBeam } from "../../../index.js";
-
-	let container = $state<HTMLElement | null>(null);
-	let from = $state<HTMLElement | null>(null);
-	let to = $state<HTMLElement | null>(null);
-</script>
-
-<div bind:this={container} class="stage">
-	<div bind:this={from} class="node">A</div>
-	<div bind:this={to} class="node">B</div>
-	{#if container && from && to}
-		<AnimatedBeam
-			containerRef={container}
-			fromRef={from}
-			toRef={to}
-			fromAnchor="right"
-			toAnchor="left"
-			gradientStartColor="#6647F0"
-			gradientStopColor="#22d3ee"
-			pathColor="var(--muted-foreground)"
-		/>
-	{/if}
-</div>
-
-<style>
-	.stage {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		min-height: 7rem;
-		padding: 0 1.25rem;
-	}
-	.node {
-		z-index: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.75rem;
-		height: 2.75rem;
-		border-radius: 0.75rem;
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-	}
-</style>

package/src/showcase/demos/effects/animated-group.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { AnimatedGroup } from "../../../index.js";
-
-	const rows = ["Audit", "Blueprint", "Build", "Handover"];
-	let run = $state(0);
-</script>
-
-<div class="stage">
-	{#key run}
-		<AnimatedGroup class="list" preset="blur-slide" stagger={70} onMount>
-			{#each rows as row (row)}
-				<span class="pill">{row}</span>
-			{/each}
-		</AnimatedGroup>
-	{/key}
-	<button onclick={() => run++}>Replay</button>
-</div>
-
-<style>
-	.stage {
-		display: grid;
-		gap: 0.75rem;
-		justify-items: start;
-		padding: 1rem;
-	}
-	.stage :global(.list) {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-	.pill {
-		padding: 0.375rem 0.75rem;
-		font-size: 0.8125rem;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 999px;
-	}
-	button {
-		padding: 0.25rem 0.625rem;
-		font-size: 0.75rem;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 0.5rem;
-	}
-</style>

package/src/showcase/demos/effects/border-beam-default.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { BorderBeam } from "../../../index.js";
-</script>
-
-<BorderBeam>
-	<div class="card-inner">Hover hosting card</div>
-</BorderBeam>
-
-<style>
-	.card-inner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 1.25rem 1rem;
-		font-size: 0.875rem;
-		color: var(--foreground);
-		background: var(--card);
-		border-radius: 0.5rem;
-	}
-</style>

package/src/showcase/demos/effects/border-beam-line.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { BorderBeam } from "../../../index.js";
-</script>
-
-<BorderBeam size="line" colorVariant="ocean">
-	<div class="card-inner">Line ocean beam</div>
-</BorderBeam>
-
-<style>
-	.card-inner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 1.25rem 1rem;
-		font-size: 0.875rem;
-		color: var(--foreground);
-		background: var(--card);
-		border-radius: 0.5rem;
-	}
-</style>

package/src/showcase/demos/effects/border-beam-mono.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { BorderBeam } from "../../../index.js";
-</script>
-
-<BorderBeam size="sm" colorVariant="mono">
-	<div class="card-inner">Small mono beam</div>
-</BorderBeam>
-
-<style>
-	.card-inner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 1.25rem 1rem;
-		font-size: 0.875rem;
-		color: var(--foreground);
-		background: var(--card);
-		border-radius: 0.5rem;
-	}
-</style>

package/src/showcase/demos/effects/border-beam-sunset.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { BorderBeam } from "../../../index.js";
-</script>
-
-<BorderBeam staticColors duration={6} colorVariant="sunset">
-	<div class="card-inner">Slow sunset beam</div>
-</BorderBeam>
-
-<style>
-	.card-inner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 1.25rem 1rem;
-		font-size: 0.875rem;
-		color: var(--foreground);
-		background: var(--card);
-		border-radius: 0.5rem;
-	}
-</style>

package/src/showcase/demos/effects/image-comparison.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import { ImageComparison } from "../../../index.js";
-
-	// Inline SVGs so the demo carries no asset and still shows the wipe.
-	const plate = (bg: string, fg: string, text: string) =>
-		"data:image/svg+xml;utf8," +
-		encodeURIComponent(
-			`<svg xmlns="http://www.w3.org/2000/svg" width="480" height="270"><rect width="480" height="270" fill="${bg}"/><text x="50%" y="52%" text-anchor="middle" font-family="sans-serif" font-size="34" fill="${fg}">${text}</text></svg>`,
-		);
-</script>
-
-<div class="frame">
-	<ImageComparison
-		class="compare"
-		before={{ src: plate("#1f2937", "#9ca3af", "Before"), alt: "The board before the rebuild" }}
-		after={{ src: plate("#0ea5e9", "#052e3f", "After"), alt: "The board after the rebuild" }}
-	/>
-</div>
-
-<style>
-	.frame :global(.compare) {
-		aspect-ratio: 16 / 9;
-		border-radius: 0.75rem;
-	}
-</style>

package/src/showcase/demos/effects/image-reveal.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-	import { ImageReveal, type ImageRevealHandle } from "../../../index.js";
-	import art1 from "../../assets/image-reveal/art-1.jpg";
-	import art2 from "../../assets/image-reveal/art-2.jpg";
-	import art3 from "../../assets/image-reveal/art-3.jpg";
-
-	// WHY: real photos served same-origin so the canvas pixel-sampling stays
-	// untainted, standing in for an LLM-generated image the loader resolves into.
-	const images = [art1, art2, art3];
-	let reveal = $state<ImageRevealHandle>();
-</script>
-
-<div class="wrap">
-	<div class="frame">
-		<ImageReveal bind:this={reveal} src={images} autoReveal revealHoldMs={2200} />
-	</div>
-	<button type="button" class="btn" onclick={() => reveal?.triggerReveal()}>Reveal image</button>
-</div>
-
-<style>
-	.wrap {
-		display: flex;
-		flex-direction: column;
-		gap: 0.625rem;
-		width: 100%;
-	}
-	.frame {
-		width: 100%;
-		height: 11rem;
-		border-radius: 0.75rem;
-		overflow: hidden;
-		border: 1px solid var(--border);
-	}
-	.btn {
-		align-self: flex-start;
-		padding: 0.375rem 0.75rem;
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: transform 0.1s;
-	}
-	.btn:active {
-		transform: scale(0.97);
-	}
-</style>

package/src/showcase/demos/effects/in-view.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { InView } from "../../../index.js";
-
-	const blocks = [1, 2, 3, 4];
-</script>
-
-<div class="scroller">
-	<p class="hint">Scroll this panel.</p>
-	{#each blocks as n (n)}
-		<InView preset="slide" amount={0.4} once={false} class="block">
-			{#snippet children()}
-				<span>Block {n}</span>
-			{/snippet}
-		</InView>
-	{/each}
-</div>
-
-<style>
-	.scroller {
-		display: grid;
-		gap: 0.75rem;
-		height: 11rem;
-		overflow-y: auto;
-		padding: 0.75rem;
-	}
-	.hint {
-		margin: 0;
-		font-size: 0.75rem;
-		color: var(--muted-foreground);
-	}
-	.scroller :global(.block) {
-		display: grid;
-		place-items: center;
-		min-height: 4.5rem;
-		font-size: 0.8125rem;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 0.75rem;
-	}
-</style>

package/src/showcase/demos/effects/integrations-hub.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-	import { AnimatedBeam } from "../../../index.js";
-
-	let container = $state<HTMLElement | null>(null);
-	let hub = $state<HTMLElement | null>(null);
-	let sources = $state<HTMLElement[]>([]);
-
-	const labels = ["1", "2", "3"];
-	const colors = ["#7B68EE", "#22d3ee", "#10b981"];
-</script>
-
-<div bind:this={container} class="stage">
-	<div class="col">
-		{#each labels as label, i (label)}
-			<div bind:this={sources[i]} class="node" style="border-color: {colors[i]}55">{label}</div>
-		{/each}
-	</div>
-	<div class="hub-wrap">
-		<div bind:this={hub} class="node hub">UI</div>
-	</div>
-
-	{#each labels as _, i (i)}
-		{#if container && hub && sources[i]}
-			<AnimatedBeam
-				containerRef={container}
-				fromRef={sources[i]}
-				toRef={hub}
-				fromAnchor="right"
-				toAnchor="left"
-				delay={i * 0.6}
-				duration={4}
-				gradientStartColor={colors[i]}
-				gradientStopColor="#6647F0"
-				pathColor="var(--muted-foreground)"
-				pathOpacity={0.12}
-			/>
-		{/if}
-	{/each}
-</div>
-
-<style>
-	.stage {
-		position: relative;
-		display: grid;
-		grid-template-columns: auto 1fr;
-		align-items: center;
-		gap: 3rem;
-		width: 100%;
-		min-height: 9rem;
-		padding: 0 1.25rem;
-	}
-	.col {
-		z-index: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-	.hub-wrap {
-		z-index: 1;
-		display: flex;
-		justify-content: center;
-	}
-	.node {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.5rem;
-		height: 2.5rem;
-		border-radius: 0.7rem;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-	}
-	.hub {
-		width: 3.25rem;
-		height: 3.25rem;
-		border-color: color-mix(in oklab, #6647f0 40%, transparent);
-		box-shadow: 0 0 0 4px color-mix(in oklab, #6647f0 10%, transparent);
-	}
-</style>

package/src/showcase/demos/effects/magnetic.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { magnetic } from "../../../index.js";
-</script>
-
-<div class="stage">
-	<button class="cta" use:magnetic={{ intensity: 0.5, range: 130 }}>Book a call</button>
-	<p class="hint">Move the pointer near the button.</p>
-</div>
-
-<style>
-	.stage {
-		display: grid;
-		gap: 0.75rem;
-		place-items: center;
-		padding: 2rem 1rem;
-	}
-	.cta {
-		padding: 0.5rem 1rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 999px;
-	}
-	.hint {
-		margin: 0;
-		font-size: 0.75rem;
-		color: var(--muted-foreground);
-	}
-</style>

package/src/showcase/demos/effects/marquee.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { Marquee } from "../../../index.js";
-
-	const items = ["Design", "Build", "Ship", "Measure", "Learn", "Repeat"];
-</script>
-
-<div class="stage">
-	<Marquee pauseOnHover duration="18s">
-		{#each items as item (item)}
-			<span class="pill">{item}</span>
-		{/each}
-	</Marquee>
-</div>
-
-<style>
-	.stage {
-		width: 100%;
-		-webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
-		mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
-	}
-	.pill {
-		display: flex;
-		align-items: center;
-		padding: 0.5rem 1rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		white-space: nowrap;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 999px;
-	}
-</style>

package/src/showcase/demos/effects/progressive-blur.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { ProgressiveBlur } from "../../../index.js";
-</script>
-
-<div class="frame">
-	<div class="grid">
-		{#each Array(48) as _, i (i)}
-			<span class="cell"></span>
-		{/each}
-	</div>
-	<ProgressiveBlur class="fade" direction="bottom" layers={10} intensity={0.6} />
-	<span class="label">Progressive blur</span>
-</div>
-
-<style>
-	.frame {
-		position: relative;
-		height: 9rem;
-		overflow: hidden;
-		border: 1px solid var(--border);
-		border-radius: 0.75rem;
-	}
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(8, 1fr);
-		gap: 0.25rem;
-		padding: 0.5rem;
-	}
-	.cell {
-		height: 1.5rem;
-		background: var(--card);
-		border-radius: 0.25rem;
-	}
-	.frame :global(.fade) {
-		position: absolute;
-		inset-inline: 0;
-		bottom: 0;
-		height: 60%;
-	}
-	.label {
-		position: absolute;
-		bottom: 0.625rem;
-		left: 0.75rem;
-		font-size: 0.75rem;
-		color: var(--foreground);
-	}
-</style>

package/src/showcase/demos/effects/spotlight.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { Spotlight } from "../../../index.js";
-</script>
-
-<div class="stage">
-	<Spotlight class="-top-10 left-0 md:-top-20 md:left-20" fill="white" />
-	<div class="content">
-		<h4>Spotlight</h4>
-		<p>A soft beam sweeps in over a dark surface on mount.</p>
-	</div>
-</div>
-
-<style>
-	.stage {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		min-height: 8rem;
-		overflow: hidden;
-		border-radius: 0.5rem;
-		background: #050505;
-	}
-	.content {
-		z-index: 2;
-		text-align: center;
-		color: #f5f5f5;
-	}
-	.content h4 {
-		margin: 0 0 0.25rem;
-		font-size: 1rem;
-		font-weight: 600;
-	}
-	.content p {
-		margin: 0;
-		font-size: 0.8125rem;
-		color: #a3a3a3;
-	}
-</style>