@joewinke/jatui 0.1.33 → 0.2.0

package/dist/showcase/AuroraDrift.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		duration?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { duration = 12, class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="aurora-drift-root {className}"
+	style="--aurora-duration: {duration}s;"
+>
+	<div class="aurora-drift-backdrop" aria-hidden="true"></div>
+	<div class="aurora-drift-content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.aurora-drift-root {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.aurora-drift-backdrop {
+		position: absolute;
+		inset: -40%;
+		background:
+			radial-gradient(
+				40% 50% at 30% 38%,
+				color-mix(in srgb, oklch(var(--p)) 30%, transparent),
+				transparent 60%
+			),
+			radial-gradient(
+				45% 55% at 72% 62%,
+				color-mix(in srgb, oklch(var(--s)) 30%, transparent),
+				transparent 60%
+			),
+			radial-gradient(
+				40% 50% at 50% 82%,
+				color-mix(in srgb, oklch(var(--a)) 25%, transparent),
+				transparent 60%
+			);
+		filter: blur(16px);
+		pointer-events: none;
+		animation: aurora-drift var(--aurora-duration) ease-in-out infinite alternate;
+	}
+
+	.aurora-drift-content {
+		position: relative;
+		z-index: 1;
+	}
+
+	@keyframes aurora-drift {
+		0% {
+			transform: translate(-6%, -4%) rotate(0deg) scale(1.1);
+		}
+		100% {
+			transform: translate(6%, 4%) rotate(8deg) scale(1.3);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.aurora-drift-backdrop {
+			animation: none;
+		}
+	}
+</style>

package/dist/showcase/AuroraDrift.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    duration?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const AuroraDrift: import("svelte").Component<Props, {}, "">;
+type AuroraDrift = ReturnType<typeof AuroraDrift>;
+export default AuroraDrift;

package/dist/showcase/BentoCard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Column span (default 1) */
+		colSpan?: number;
+		/** Row span (default 1) */
+		rowSpan?: number;
+		/** Hover tint color (CSS color). No tint if omitted (house rule: no shadows). */
+		hoverTint?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { colSpan = 1, rowSpan = 1, hoverTint, class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="bento-card {className}"
+	role="listitem"
+	style="
+		grid-column: span {colSpan};
+		grid-row: span {rowSpan};
+		{hoverTint ? `--bento-tint: ${hoverTint};` : ''}
+	"
+>
+	{@render children()}
+</div>
+
+<style>
+	.bento-card {
+		position: relative;
+		border-radius: var(--jatui-radius-box);
+		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
+		background: oklch(var(--b1));
+		overflow: hidden;
+		transition: background var(--motion-fast) var(--motion-glide);
+	}
+
+	.bento-card:hover {
+		background: var(--bento-tint, oklch(var(--b2, var(--b1))));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.bento-card {
+			transition: none;
+		}
+	}
+</style>

package/dist/showcase/BentoCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Column span (default 1) */
+    colSpan?: number;
+    /** Row span (default 1) */
+    rowSpan?: number;
+    /** Hover tint color (CSS color). No tint if omitted (house rule: no shadows). */
+    hoverTint?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const BentoCard: import("svelte").Component<Props, {}, "">;
+type BentoCard = ReturnType<typeof BentoCard>;
+export default BentoCard;

package/dist/showcase/BentoGrid.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Number of columns in the grid (default 3) */
+		cols?: number;
+		/** Gap between cells */
+		gap?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { cols = 3, gap = '1rem', class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="bento-grid {className}"
+	style="--bento-cols: {cols}; --bento-gap: {gap};"
+	role="list"
+>
+	{@render children()}
+</div>
+
+<style>
+	.bento-grid {
+		display: grid;
+		grid-template-columns: repeat(var(--bento-cols), 1fr);
+		gap: var(--bento-gap);
+	}
+
+	@media (max-width: 768px) {
+		.bento-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	@media (min-width: 769px) and (max-width: 1024px) {
+		.bento-grid {
+			grid-template-columns: repeat(min(var(--bento-cols), 2), 1fr);
+		}
+	}
+</style>

package/dist/showcase/BentoGrid.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Number of columns in the grid (default 3) */
+    cols?: number;
+    /** Gap between cells */
+    gap?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const BentoGrid: import("svelte").Component<Props, {}, "">;
+type BentoGrid = ReturnType<typeof BentoGrid>;
+export default BentoGrid;

package/dist/showcase/BorderBeam.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		duration?: number;
+		colorFrom?: string;
+		colorTo?: string;
+		borderRadius?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		duration = 3,
+		colorFrom = 'oklch(var(--p))',
+		colorTo = 'oklch(var(--a))',
+		borderRadius = '0.75rem',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div
+	class="border-beam-root {className}"
+	style="--beam-duration: {duration}s; --beam-color-from: {colorFrom}; --beam-color-to: {colorTo}; --beam-radius: {borderRadius};"
+>
+	<div class="border-beam-inner">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.border-beam-root {
+		position: relative;
+		padding: 1.5px;
+		overflow: hidden;
+		border-radius: var(--beam-radius);
+	}
+
+	.border-beam-root::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 200%;
+		height: 200%;
+		transform: translate(-50%, -50%);
+		background: conic-gradient(
+			from 0deg,
+			transparent 0 72%,
+			var(--beam-color-from) 84%,
+			var(--beam-color-to) 90%,
+			transparent 96% 100%
+		);
+		animation: beam-spin var(--beam-duration) linear infinite;
+	}
+
+	.border-beam-inner {
+		position: relative;
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		border-radius: calc(var(--beam-radius) - 1.5px);
+	}
+
+	@keyframes beam-spin {
+		to {
+			transform: translate(-50%, -50%) rotate(1turn);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.border-beam-root::before {
+			animation: none;
+		}
+	}
+</style>

package/dist/showcase/BorderBeam.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    duration?: number;
+    colorFrom?: string;
+    colorTo?: string;
+    borderRadius?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const BorderBeam: import("svelte").Component<Props, {}, "">;
+type BorderBeam = ReturnType<typeof BorderBeam>;
+export default BorderBeam;

package/dist/showcase/ClipWipe.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type Direction = 'left' | 'right' | 'top' | 'bottom';
+  type TriggerMode = 'mount' | 'intersect';
+
+  interface Props {
+    direction?: Direction;
+    triggerMode?: TriggerMode;
+    duration?: number;
+    class?: string;
+    children: import('svelte').Snippet;
+  }
+
+  let {
+    direction = 'left',
+    triggerMode = 'mount',
+    duration = 500,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const startClip: Record<Direction, string> = {
+    left: 'inset(0 100% 0 0)',
+    right: 'inset(0 0 0 100%)',
+    top: 'inset(100% 0 0 0)',
+    bottom: 'inset(0 0 100% 0)',
+  };
+
+  const endClip = 'inset(0 0 0 0)';
+
+  let prefersReducedMotion = false;
+  let revealed = $state(false);
+  let el: HTMLDivElement | undefined = $state();
+
+  function trigger() {
+    revealed = true;
+  }
+
+  onMount(() => {
+    prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      revealed = true;
+      return;
+    }
+
+    if (triggerMode === 'mount') {
+      // Defer one frame so the initial clip-path is painted before transitioning
+      requestAnimationFrame(() => {
+        trigger();
+      });
+    } else {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.intersectionRatio >= 0.5) {
+              trigger();
+              observer.disconnect();
+            }
+          }
+        },
+        { threshold: 0.5 }
+      );
+
+      if (el) {
+        observer.observe(el);
+      }
+
+      return () => observer.disconnect();
+    }
+  });
+</script>
+
+<div
+  bind:this={el}
+  class={className}
+  style:clip-path={prefersReducedMotion ? endClip : revealed ? endClip : startClip[direction]}
+  style:transition={prefersReducedMotion ? 'none' : `clip-path ${duration}ms var(--motion-glide)`}
+>
+  {@render children()}
+</div>

package/dist/showcase/ClipWipe.svelte.d.ts

@@ -0,0 +1,12 @@
+type Direction = 'left' | 'right' | 'top' | 'bottom';
+type TriggerMode = 'mount' | 'intersect';
+interface Props {
+    direction?: Direction;
+    triggerMode?: TriggerMode;
+    duration?: number;
+    class?: string;
+    children: import('svelte').Snippet;
+}
+declare const ClipWipe: import("svelte").Component<Props, {}, "">;
+type ClipWipe = ReturnType<typeof ClipWipe>;
+export default ClipWipe;

package/dist/showcase/Confetti.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	interface Props {
+		count?: number;
+		colors?: string[];
+		class?: string;
+	}
+
+	let {
+		count = 24,
+		colors = ['#FF8A00', '#5B8DEF', '#4CD08A', '#EDE9E0'],
+		class: className = ''
+	}: Props = $props();
+
+	let container: HTMLElement;
+
+	export function fire() {
+		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+		for (let i = 0; i < count; i++) {
+			const angle = (2 * Math.PI * i) / count + (Math.random() - 0.5) * 0.4;
+			const dist = 55 + Math.random() * 55;
+			const tx = `calc(-50% + ${Math.cos(angle) * dist}px)`;
+			const ty = `calc(-50% + ${Math.sin(angle) * dist}px)`;
+			const rot = `${Math.floor(Math.random() * 360)}deg`;
+			const color = colors[Math.floor(Math.random() * colors.length)];
+
+			const el = document.createElement('span');
+			el.style.setProperty('--tx', tx);
+			el.style.setProperty('--ty', ty);
+			el.style.setProperty('--rot', rot);
+			el.style.position = 'absolute';
+			el.style.top = '50%';
+			el.style.left = '50%';
+			el.style.width = '7px';
+			el.style.height = '7px';
+			el.style.borderRadius = '2px';
+			el.style.backgroundColor = color;
+			el.style.pointerEvents = 'none';
+			el.style.animation = `confetti-fly 0.9s var(--motion-glide, ease-out) forwards`;
+
+			container.appendChild(el);
+		}
+
+		setTimeout(() => {
+			const particles = container.querySelectorAll('span');
+			particles.forEach((p) => p.remove());
+		}, 950);
+	}
+</script>
+
+<div bind:this={container} class="confetti-root {className}"></div>
+
+<style>
+	.confetti-root {
+		position: relative;
+		overflow: visible;
+	}
+
+	@keyframes confetti-fly {
+		0% {
+			translate: -50% -50%;
+			rotate: 0deg;
+			opacity: 1;
+		}
+		100% {
+			translate: var(--tx) var(--ty);
+			rotate: var(--rot);
+			opacity: 0;
+		}
+	}
+</style>

package/dist/showcase/Confetti.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    count?: number;
+    colors?: string[];
+    class?: string;
+}
+declare const Confetti: import("svelte").Component<Props, {
+    fire: () => void;
+}, "">;
+type Confetti = ReturnType<typeof Confetti>;
+export default Confetti;

package/dist/showcase/CursorSpotlight.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		size?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { size = 220, class: className = '', children }: Props = $props();
+
+	let el = $state<HTMLDivElement | null>(null);
+	let glowX = $state(-300);
+	let glowY = $state(-300);
+	let hasFinePointer = $state(false);
+
+	onMount(() => {
+		hasFinePointer = window.matchMedia('(pointer: fine)').matches;
+	});
+
+	function onMouseMove(e: MouseEvent) {
+		if (!el || !hasFinePointer) return;
+		const rect = el.getBoundingClientRect();
+		glowX = e.clientX - rect.left;
+		glowY = e.clientY - rect.top;
+	}
+
+	function onMouseLeave() {
+		glowX = -300;
+		glowY = -300;
+	}
+</script>
+
+<div
+	bind:this={el}
+	class="cursor-spotlight-root {className}"
+	onmousemove={onMouseMove}
+	onmouseleave={onMouseLeave}
+	role="presentation"
+>
+	{#if hasFinePointer}
+		<div
+			class="cursor-spotlight-glow"
+			style="left: {glowX}px; top: {glowY}px; width: {size}px; height: {size}px;"
+			aria-hidden="true"
+		></div>
+	{/if}
+	<div class="cursor-spotlight-content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.cursor-spotlight-root {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.cursor-spotlight-glow {
+		position: absolute;
+		border-radius: 50%;
+		background: radial-gradient(
+			circle,
+			color-mix(in srgb, oklch(var(--p)) 18%, transparent),
+			transparent 70%
+		);
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+		transition: opacity 0.3s ease;
+	}
+
+	.cursor-spotlight-content {
+		position: relative;
+		z-index: 1;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cursor-spotlight-glow {
+			display: none;
+		}
+	}
+</style>

package/dist/showcase/CursorSpotlight.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    size?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const CursorSpotlight: import("svelte").Component<Props, {}, "">;
+type CursorSpotlight = ReturnType<typeof CursorSpotlight>;
+export default CursorSpotlight;