@heyramzi/ui 0.0.0-stage → 6.0.1

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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,82 @@
+<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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,40 @@
+<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>

package/src/showcase/demos/effects/text-effect.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { TextEffect } from "../../../index.js";
+
+	let run = $state(0);
+</script>
+
+<div class="stage">
+	{#key run}
+		<TextEffect
+			text="Ship the thing."
+			per="char"
+			preset="blur-slide"
+			as="h3"
+			class="line"
+			onMount
+		/>
+		<TextEffect
+			text="Every primitive is CSS, no runtime."
+			preset="fade"
+			delay={400}
+			class="sub"
+			onMount
+		/>
+	{/key}
+	<button onclick={() => run++}>Replay</button>
+</div>
+
+<style>
+	.stage {
+		display: grid;
+		gap: 0.5rem;
+		justify-items: start;
+		padding: 1rem;
+	}
+	.stage :global(.line) {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: var(--foreground);
+	}
+	.stage :global(.sub) {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--muted-foreground);
+	}
+	button {
+		margin-top: 0.5rem;
+		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/shadcn/accordion.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import * as Accordion from "../../../shadcn/accordion/index.js";
+</script>
+
+<Accordion.Root type="single" class="w-full sm:max-w-[70%]" value="item-1">
+	<Accordion.Item value="item-1">
+		<Accordion.Trigger>Product Information</Accordion.Trigger>
+		<Accordion.Content class="flex flex-col gap-4 text-balance">
+			<p>
+				Our flagship product combines cutting-edge technology with sleek design. Built with premium
+				materials, it offers unparalleled performance and reliability.
+			</p>
+			<p>
+				Key features include advanced processing capabilities, and an intuitive user interface
+				designed for both beginners and experts.
+			</p>
+		</Accordion.Content>
+	</Accordion.Item>
+	<Accordion.Item value="item-2">
+		<Accordion.Trigger>Shipping Details</Accordion.Trigger>
+		<Accordion.Content class="flex flex-col gap-4 text-balance">
+			<p>
+				We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5
+				business days, while express shipping ensures delivery within 1-2 business days.
+			</p>
+			<p>
+				All orders are carefully packaged and fully insured. Track your shipment in real-time
+				through our dedicated tracking portal.
+			</p>
+		</Accordion.Content>
+	</Accordion.Item>
+	<Accordion.Item value="item-3">
+		<Accordion.Trigger>Return Policy</Accordion.Trigger>
+		<Accordion.Content class="flex flex-col gap-4 text-balance">
+			<p>
+				We stand behind our products with a comprehensive 30-day return policy. If you&apos;re not
+				completely satisfied, simply return the item in its original condition.
+			</p>
+			<p>
+				Our hassle-free return process includes free return shipping and full refunds processed
+				within 48 hours of receiving the returned item.
+			</p>
+		</Accordion.Content>
+	</Accordion.Item>
+</Accordion.Root>