@foxui/social 0.4.0

package/dist/components/social-icons/Bluesky.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		target = '_blank',
+		svgClasses,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'text-base-800 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors',
+		className
+	)}
+	{...restProps}
+>
+	<span class="sr-only">Bluesky</span>
+
+	<svg
+		role="img"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		class={['size-6', svgClasses]}
+		aria-hidden="true"
+		fill="currentColor"
+		><path
+			d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
+		/></svg
+	>
+</a>

package/dist/components/social-icons/Bluesky.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+    svgClasses?: string;
+};
+declare const Bluesky: import("svelte").Component<$$ComponentProps, {}, "">;
+type Bluesky = ReturnType<typeof Bluesky>;
+export default Bluesky;

package/dist/components/social-icons/Discord.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		target = '_blank',
+		svgClasses,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'text-base-800 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors',
+		className
+	)}
+	{...restProps}
+>
+	<span class="sr-only">Discord</span>
+
+	<svg
+		role="img"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		class={['size-6', svgClasses]}
+		fill="currentColor"
+		aria-hidden="true"
+		><path
+			d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
+		/></svg
+	>
+</a>

package/dist/components/social-icons/Discord.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+    svgClasses?: string;
+};
+declare const Discord: import("svelte").Component<$$ComponentProps, {}, "">;
+type Discord = ReturnType<typeof Discord>;
+export default Discord;

package/dist/components/social-icons/Facebook.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		target = '_blank',
+		svgClasses,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'text-base-800 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors',
+		className
+	)}
+	{...restProps}
+>
+	<span class="sr-only">Facebook</span>
+
+	<svg
+		role="img"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		class={['size-6', svgClasses]}
+		fill="currentColor"
+		aria-hidden="true"
+		><path
+			d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
+		/></svg
+	>
+</a>

package/dist/components/social-icons/Facebook.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+    svgClasses?: string;
+};
+declare const Facebook: import("svelte").Component<$$ComponentProps, {}, "">;
+type Facebook = ReturnType<typeof Facebook>;
+export default Facebook;

package/dist/components/social-icons/Github.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		target = '_blank',
+		svgClasses,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'text-base-800 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 rounded-2xl transition-colors',
+		'focus-visible:outline-base-900 dark:focus-visible:outline-base-100 focus-visible:outline-2 focus-visible:outline-offset-2',
+		className
+	)}
+	{...restProps}
+>
+	<span class="sr-only">GitHub</span>
+
+	<svg
+		role="img"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="currentColor"
+		aria-hidden="true"
+		class={['size-5', svgClasses]}
+		><path
+			d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+		/></svg
+	>
+</a>

package/dist/components/social-icons/Github.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+    svgClasses?: string;
+};
+declare const Github: import("svelte").Component<$$ComponentProps, {}, "">;
+type Github = ReturnType<typeof Github>;
+export default Github;

package/dist/components/social-icons/Twitter.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		target = '_blank',
+		svgClasses,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'text-base-800 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors',
+		className
+	)}
+	{...restProps}
+>
+	<span class="sr-only">X</span>
+
+	<svg
+		role="img"
+		viewBox="0 0 24 24"
+		class={['size-6', svgClasses]}
+		fill="currentColor"
+		aria-hidden="true"
+		xmlns="http://www.w3.org/2000/svg"
+		><title>X</title><path
+			d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+		/></svg
+	>
+</a>

package/dist/components/social-icons/Twitter.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+    svgClasses?: string;
+};
+declare const Twitter: import("svelte").Component<$$ComponentProps, {}, "">;
+type Twitter = ReturnType<typeof Twitter>;
+export default Twitter;

package/dist/components/social-icons/Youtube.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		target = '_blank',
+		svgClasses,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'text-base-800 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors',
+		className
+	)}
+	{...restProps}
+>
+	<span class="sr-only">YouTube</span>
+	<svg
+		class={['size-7', svgClasses]}
+		fill="currentColor"
+		aria-hidden="true"
+		role="img"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		><path
+			d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+		/></svg
+	>
+</a>

package/dist/components/social-icons/Youtube.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAnchorAttributes>> & {
+    svgClasses?: string;
+};
+declare const Youtube: import("svelte").Component<$$ComponentProps, {}, "">;
+type Youtube = ReturnType<typeof Youtube>;
+export default Youtube;

package/dist/components/social-icons/index.d.ts

@@ -0,0 +1,7 @@
+export { default as SocialIcons } from './All.svelte';
+export { default as Discord } from './Discord.svelte';
+export { default as Github } from './Github.svelte';
+export { default as Twitter } from './Twitter.svelte';
+export { default as Youtube } from './Youtube.svelte';
+export { default as Bluesky } from './Bluesky.svelte';
+export { default as Facebook } from './Facebook.svelte';

package/dist/components/social-icons/index.js

@@ -0,0 +1,8 @@
+// all icons from https://simpleicons.org/
+export { default as SocialIcons } from './All.svelte';
+export { default as Discord } from './Discord.svelte';
+export { default as Github } from './Github.svelte';
+export { default as Twitter } from './Twitter.svelte';
+export { default as Youtube } from './Youtube.svelte';
+export { default as Bluesky } from './Bluesky.svelte';
+export { default as Facebook } from './Facebook.svelte';

package/dist/components/star-rating/StarRating.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	// todo convert to radio group
+	import { cn } from '@foxui/core';
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		rating = $bindable(),
+		size = 'size-8',
+		changeable = true,
+		class: className,
+		ref = $bindable(null),
+		strokeWidth = 0.8,
+		buttonClasses,
+		svgClasses,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+		rating: number;
+		size?: string;
+		changeable?: boolean;
+
+		strokeWidth?: number;
+
+		buttonClasses?: string;
+		svgClasses?: string;
+	} = $props();
+
+	let hoverRating = $state(rating);
+
+	$effect(() => {
+		hoverRating = rating;
+	});
+</script>
+
+<div class={cn('flex items-center', className)} {...restProps} bind:this={ref}>
+	{#if changeable}
+		{#each Array.from({ length: 5 }).map((_, i) => i + 1) as i}
+			<button
+				class={cn(
+					'group focus-visible:outline-base-900 dark:focus-visible:outline-base-100 cursor-pointer rounded-xl focus-visible:outline-2',
+					buttonClasses
+				)}
+				onclick={() => (rating = i)}
+				onfocus={() => (hoverRating = i)}
+				onblur={() => (hoverRating = rating)}
+				onmouseenter={() => (hoverRating = i)}
+				onmouseleave={() => (hoverRating = rating)}
+			>
+				<svg
+					class={cn(
+						size,
+						'shrink-0',
+						i > rating &&
+							i > hoverRating &&
+							'stroke-base-400 text-base-100 dark:stroke-base-700/70 dark:text-base-900',
+						i <= rating &&
+							i <= hoverRating &&
+							'stroke-accent-600 text-accent-400 dark:stroke-accent-500/80 dark:text-accent-500/40',
+
+						((i > rating && i <= hoverRating) || (i > hoverRating && i <= rating)) &&
+							'stroke-accent-600/50 text-accent-400/50 dark:stroke-accent-500/40 dark:text-accent-500/20',
+						svgClasses
+					)}
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					aria-hidden="true"
+					stroke-width={strokeWidth}
+					data-slot="icon"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+
+				<span class="sr-only">rate {i} stars</span>
+			</button>
+		{/each}
+	{:else}
+		{#each Array.from({ length: 5 }).map((_, i) => i + 1) as i}
+			<svg
+				class={cn(
+					size,
+					'stroke-base-400 text-base-100 dark:stroke-base-700 dark:text-base-800 shrink-0',
+					i <= rating &&
+						'stroke-accent-600 text-accent-400 dark:stroke-accent-500/80 dark:text-accent-500/50',
+					svgClasses
+				)}
+				viewBox="0 0 24 24"
+				fill="currentColor"
+				aria-hidden="true"
+				stroke-width={strokeWidth}
+				data-slot="icon"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/each}
+	{/if}
+</div>

package/dist/components/star-rating/StarRating.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    rating: number;
+    size?: string;
+    changeable?: boolean;
+    strokeWidth?: number;
+    buttonClasses?: string;
+    svgClasses?: string;
+};
+declare const StarRating: import("svelte").Component<$$ComponentProps, {}, "ref" | "rating">;
+type StarRating = ReturnType<typeof StarRating>;
+export default StarRating;

package/dist/components/star-rating/index.d.ts

@@ -0,0 +1 @@
+export { default as StarRating } from './StarRating.svelte';

package/dist/components/star-rating/index.js

@@ -0,0 +1 @@
+export { default as StarRating } from './StarRating.svelte';

package/dist/components/swiper-cards/CardSwiper.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	// TODO: fix types
+
+	import { onMount, type Snippet } from 'svelte';
+	import { DragGesture, type FullGestureState } from '@use-gesture/vanilla';
+	import type { CardData, Direction, SwipeEventData } from '.';
+	import { Image } from '@foxui/core';
+
+	let {
+		card = DefaultCard,
+		cardData,
+		onswipe,
+		swipe = $bindable(),
+
+		minSwipeDistance = 0.5,
+		minSwipeVelocity = 0.5,
+		arrowKeys = true,
+		thresholdPassed = $bindable(0),
+		anchor = null,
+		rotate = true,
+		cardCount = 5
+	}: {
+		card?: Snippet<[CardData]>;
+
+		cardData: (index: number) => CardData;
+		onswipe?: (cardInfo: SwipeEventData) => void;
+		swipe?: (direction: Direction) => void;
+
+		minSwipeDistance?: number;
+		minSwipeVelocity?: number;
+		arrowKeys?: boolean;
+		thresholdPassed?: number;
+		anchor?: number | null;
+		rotate?: boolean;
+		cardCount?: number;
+	} = $props();
+
+	swipe = (direction: Direction = 'right') => {
+		if (thresholdPassed !== 0) return;
+
+		let dir = direction === 'left' ? -1 : 1;
+
+		if (!topCard) throw new Error('No top card found');
+		cardSwiped(topCard, [dir, 0.1], [dir, 1]);
+	};
+
+	let container: HTMLElement;
+
+	let cardIndex = 0;
+	let topCard: HTMLElement | undefined = $state();
+	let topCardIndex = 0;
+
+	let currentZ = 100000;
+
+	let cards: HTMLElement[] = $state(new Array(cardCount));
+	let cardsData: CardData[] = $state([]);
+
+	onMount(() => {
+		for (let i = 0; i < cardCount; i++) {
+			cardsData.push(cardData(cardIndex++));
+			cards.push();
+		}
+
+		let gestures: DragGesture[] = [];
+
+		cards.forEach((el) => {
+			if (!el) return;
+
+			el.style.zIndex = currentZ.toString();
+			currentZ--;
+
+			let gesture = new DragGesture(el, (state) => {
+				ondrag(el, state);
+			});
+
+			gestures.push(gesture);
+		});
+
+		topCardIndex = 0;
+		topCard = cards[topCardIndex];
+
+		container.classList.remove('hidden');
+
+		return () => {
+			gestures.forEach((gesture) => gesture.destroy());
+		};
+	});
+
+	const cardSwiped = (el: HTMLElement, velocity: [number, number], movement: [number, number]) => {
+		el.classList.add('transition-transform', 'duration-300');
+		let index = cards.indexOf(el);
+
+		let direction: Direction = movement[0] > 0 ? 'right' : 'left';
+		let data = cardsData[index];
+
+		onswipe?.({ direction, element: el, data, index: cardIndex - 2 });
+
+		thresholdPassed = movement[0] > 0 ? 1 : -1;
+
+		let moveOutWidth = document.body.clientWidth;
+
+		let endX = Math.max(Math.abs(velocity[0]) * moveOutWidth, moveOutWidth);
+		let toX = movement[0] > 0 ? endX : -endX;
+		let endY = Math.abs(velocity[1]) * moveOutWidth;
+		let toY = movement[1] > 0 ? endY : -endY;
+
+		let rotate = movement[0] * 0.03 * (movement[1] / 80);
+
+		el.style.transform = `translate(${toX}px, ${toY + movement[1]}px) rotate(${rotate}deg)`;
+
+		setTimeout(async () => {
+			thresholdPassed = 0;
+
+			cardsData[index] = cardData(cardIndex++);
+
+			// next card
+			topCardIndex = (topCardIndex + 1) % cardCount;
+			topCard = cards[topCardIndex];
+
+			currentZ--;
+			el.style.zIndex = currentZ.toString();
+
+			el.classList.remove('transition-transform', 'duration-300');
+			el.style.transform = '';
+		}, 350);
+	};
+
+	const ondrag = (
+		el: HTMLElement,
+		state: Omit<FullGestureState<'drag'>, 'event'> & {
+			event: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;
+		}
+	) => {
+		let elWidth = el.offsetWidth;
+
+		if (state.active) {
+			let angle = state.movement[0] * 0.03 * (state.movement[1] / 80);
+
+			// fix movement on a curved path if anchor is set
+			if (anchor) {
+				let vec = [state.movement[0], state.movement[1] - anchor];
+				let len = Math.sqrt(vec[0] ** 2 + vec[1] ** 2);
+				vec = [(vec[0] / len) * anchor, (vec[1] / len) * anchor];
+
+				state.movement[0] = vec[0];
+				state.movement[1] = vec[1] + anchor;
+			}
+
+			el.style.transform = `translate(${state.movement[0]}px, ${state.movement[1]}px)`;
+
+			if (rotate) {
+				el.style.transform += ` rotate(${angle}deg)`;
+			}
+
+			if (Math.abs(state.movement[0]) / elWidth > minSwipeDistance) {
+				thresholdPassed = state.movement[0] > 0 ? 1 : -1;
+			} else {
+				thresholdPassed = 0;
+			}
+			return;
+		}
+		// if dragging is finished
+		let keep =
+			Math.abs(state.movement[0]) / elWidth < minSwipeDistance &&
+			Math.abs(state.velocity[0]) < minSwipeVelocity;
+
+		if (keep) {
+			thresholdPassed = 0;
+			el.classList.add('transition-transform', 'duration-300');
+			el.style.transform = '';
+			setTimeout(() => {
+				el.classList.remove('transition-transform', 'duration-300');
+			}, 300);
+		} else {
+			cardSwiped(el, state.velocity, state.movement);
+		}
+	};
+</script>
+
+<svelte:body
+	onkeydown={(e) => {
+		if (!arrowKeys) return;
+		if (e.key === 'ArrowLeft') {
+			swipe('left');
+		} else if (e.key === 'ArrowRight') {
+			swipe('right');
+		}
+	}}
+/>
+
+{#snippet DefaultCard({ image, title, description }: CardData)}
+	<div
+		class="border-base-400 dark:border-base-600 bg-base-50 dark:bg-base-900 relative h-full w-full overflow-hidden rounded-2xl border"
+	>
+		{#key image}
+			{#if image}
+				<Image
+					containerClasses="absolute inset-0 h-full w-full rounded-2xl"
+					src={image}
+					alt={title ?? ''}
+					loading="eager"
+					class="h-full w-full object-cover"
+				/>
+			{/if}
+		{/key}
+		<div
+			class="from-base-50/80 dark:from-base-950/80 absolute inset-0 rounded-b-xl bg-gradient-to-t via-transparent"
+		></div>
+		<div class="absolute bottom-0 flex w-full justify-start px-3 py-16 sm:px-12">
+			<div class="flex flex-col">
+				<h3 class="text-base-900 dark:text-base-50 pb-2 text-3xl font-bold">{title}</h3>
+				<p class="text-base-800 dark:text-base-200 text-sm">{description}</p>
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+<div class="isolate h-full w-full touch-none select-none">
+	<div class="relative z-0 hidden h-full w-full" bind:this={container}>
+		{#each cards as _, i}
+			<div
+				bind:this={cards[i]}
+				class="absolute h-full w-full cursor-grab touch-none overflow-hidden ease-in-out select-none"
+			>
+				{#if cardsData[i]}
+					{@render card({
+						image: cardsData[i].image,
+						title: cardsData[i].title,
+						description: cardsData[i].description
+					})}
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>