fancy-ui-svelte 0.2.1

package/dist/fancy-ui/animated-testimonials/index.js

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

package/dist/fancy-ui/animated-tooltip/AnimatedTooltip.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface TooltipItem {
+		id: number | string;
+		name: string;
+		designation: string;
+		image: string;
+	}
+
+	export interface AnimatedTooltipProps {
+		/** Array of items to display */
+		items: TooltipItem[];
+		/** Additional CSS classes for the container */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { scale } from "svelte/transition";
+
+	let { items, class: className }: AnimatedTooltipProps = $props();
+
+	let hoveredIndex = $state<number | string | null>(null);
+	let mouseX = $state(0);
+
+	// Calculate rotation and translation based on mouse position
+	let rotation = $derived((mouseX / 100) * 50);
+	let translation = $derived((mouseX / 100) * 50);
+
+	function handleMouseEnter(event: MouseEvent, itemId: number | string) {
+		// Reset mouseX first to prevent offset from previous item
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		const halfWidth = rect.width / 2;
+		mouseX = event.clientX - rect.left - halfWidth;
+		hoveredIndex = itemId;
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (hoveredIndex === null) return;
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		const halfWidth = rect.width / 2;
+		mouseX = event.clientX - rect.left - halfWidth;
+	}
+
+	function handleMouseLeave() {
+		hoveredIndex = null;
+		mouseX = 0;
+	}
+</script>
+
+<div class={cn("flex flex-row items-center", className)}>
+	{#each items as item (item.id)}
+		<div
+			class="group relative -mr-4"
+			onmouseenter={(e) => handleMouseEnter(e, item.id)}
+			onmouseleave={handleMouseLeave}
+			onmousemove={handleMouseMove}
+			role="button"
+			tabindex="0"
+		>
+			<!-- Tooltip -->
+			{#if hoveredIndex === item.id}
+				<div
+					class="pointer-events-none absolute -top-16 left-1/2 z-50 flex flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs whitespace-nowrap shadow-xl"
+					style="transform: translateX(calc(-50% + {translation}px)) rotate({rotation}deg);"
+					transition:scale={{
+						duration: 200,
+						start: 0.6,
+					}}
+				>
+					<!-- Gradient lines -->
+					<div
+						class="absolute right-1/2 -bottom-px z-30 me-1 h-px w-2/5 translate-x-1/2 bg-gradient-to-r from-transparent via-emerald-500 to-transparent"
+					></div>
+					<div
+						class="absolute -bottom-px left-1/2 z-30 ms-1 h-px w-2/5 -translate-x-1/2 bg-gradient-to-r from-transparent via-sky-500 to-transparent"
+					></div>
+
+					<!-- Content -->
+					<div class="relative z-30 text-base font-bold text-white">
+						{item.name}
+					</div>
+					<div class="text-xs text-white">{item.designation}</div>
+				</div>
+			{/if}
+
+			<!-- Avatar Image -->
+			<img
+				src={item.image}
+				alt={item.name}
+				class="relative !m-0 size-14 rounded-full border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
+			/>
+		</div>
+	{/each}
+</div>

package/dist/fancy-ui/animated-tooltip/AnimatedTooltip.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface TooltipItem {
+    id: number | string;
+    name: string;
+    designation: string;
+    image: string;
+}
+export interface AnimatedTooltipProps {
+    /** Array of items to display */
+    items: TooltipItem[];
+    /** Additional CSS classes for the container */
+    class?: string;
+}
+declare const AnimatedTooltip: import("svelte").Component<AnimatedTooltipProps, {}, "">;
+type AnimatedTooltip = ReturnType<typeof AnimatedTooltip>;
+export default AnimatedTooltip;

package/dist/fancy-ui/animated-tooltip/AnimatedTooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/animated-tooltip/AnimatedTooltip.test.js

@@ -0,0 +1,67 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import AnimatedTooltip from "./AnimatedTooltip.svelte";
+const mockItems = [
+    { id: 1, name: "Alice", designation: "Engineer", image: "/alice.jpg" },
+    { id: 2, name: "Bob", designation: "Designer", image: "/bob.jpg" },
+];
+describe("AnimatedTooltip", () => {
+    afterEach(cleanup);
+    it("renders one avatar image per item", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems },
+        });
+        const imgs = container.querySelectorAll("img");
+        expect(imgs.length).toBe(2);
+    });
+    it("sets correct alt text on images", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems },
+        });
+        const imgs = container.querySelectorAll("img");
+        expect(imgs[0]).toHaveAttribute("alt", "Alice");
+        expect(imgs[1]).toHaveAttribute("alt", "Bob");
+    });
+    it("sets correct src on images", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems },
+        });
+        const imgs = container.querySelectorAll("img");
+        expect(imgs[0]).toHaveAttribute("src", "/alice.jpg");
+        expect(imgs[1]).toHaveAttribute("src", "/bob.jpg");
+    });
+    it("renders a flex container", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems },
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain("flex");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems, class: "custom" },
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain("custom");
+    });
+    it("renders empty when items is empty", () => {
+        const { container } = render(AnimatedTooltip, { props: { items: [] } });
+        const imgs = container.querySelectorAll("img");
+        expect(imgs.length).toBe(0);
+    });
+    it("each item wrapper has group class", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems },
+        });
+        const groups = container.querySelectorAll(".group");
+        expect(groups.length).toBe(2);
+    });
+    it("images have rounded-full class", () => {
+        const { container } = render(AnimatedTooltip, {
+            props: { items: mockItems },
+        });
+        const imgs = container.querySelectorAll("img");
+        expect(imgs[0]?.className).toContain("rounded-full");
+        expect(imgs[1]?.className).toContain("rounded-full");
+    });
+});

package/dist/fancy-ui/animated-tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AnimatedTooltip } from "./AnimatedTooltip.svelte";
+export type { AnimatedTooltipProps, TooltipItem } from "./AnimatedTooltip.svelte";

package/dist/fancy-ui/animated-tooltip/index.js

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

package/dist/fancy-ui/apple-card-carousel/AppleCard.svelte

@@ -0,0 +1,226 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface AppleCardData {
+		/** Category label shown above the title */
+		category: string;
+		/** Main card title */
+		title: string;
+		/** URL of the card background image */
+		src: string;
+		/** Short description shown in the expanded view */
+		description?: string;
+		/** Rich content shown in the expanded view (takes precedence over description) */
+		content?: Snippet;
+	}
+
+	/** Shared transition duration — must stay in sync with the CSS transition below */
+	export const TRANSITION_MS = 400;
+</script>
+
+<script lang="ts">
+	import { tick } from "svelte";
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		card: AppleCardData;
+		index: number;
+		expandedIndex: number;
+		reducedMotion: boolean;
+		onExpand: (index: number) => void;
+		onCollapse: () => void;
+		class?: string;
+	}
+
+	let {
+		card,
+		index,
+		expandedIndex,
+		reducedMotion,
+		onExpand,
+		onCollapse,
+		class: className = "",
+	}: Props = $props();
+
+	let cardEl: HTMLDivElement;
+	let dialogEl: HTMLDivElement;
+	let closeBtn: HTMLButtonElement;
+	let rect = $state<{ top: number; left: number; width: number; height: number } | null>(null);
+	let overlayVisible = $state(false);
+	let fullyExpanded = $state(false);
+	let previousFocus: HTMLElement | null = null;
+
+	async function handleExpand() {
+		if (expandedIndex !== -1) return;
+		previousFocus = document.activeElement as HTMLElement;
+		const r = cardEl.getBoundingClientRect();
+		rect = { top: r.top, left: r.left, width: r.width, height: r.height };
+		overlayVisible = true;
+		onExpand(index);
+
+		// Wait for the overlay to be in the DOM before focusing
+		await tick();
+		closeBtn?.focus();
+
+		if (reducedMotion) {
+			fullyExpanded = true;
+		} else {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					fullyExpanded = true;
+				});
+			});
+		}
+	}
+
+	function handleCollapse() {
+		fullyExpanded = false;
+		const delay = reducedMotion ? 0 : TRANSITION_MS;
+		setTimeout(() => {
+			overlayVisible = false;
+			onCollapse();
+			rect = null;
+			previousFocus?.focus();
+			previousFocus = null;
+		}, delay);
+	}
+
+	function handleCardKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			handleExpand();
+		}
+	}
+
+	function handleOverlayKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			handleCollapse();
+			return;
+		}
+		// Simple focus trap: cycle focus within the dialog on Tab
+		if (e.key === "Tab" && dialogEl) {
+			const focusable = Array.from(
+				dialogEl.querySelectorAll<HTMLElement>(
+					'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+				)
+			);
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		}
+	}
+</script>
+
+<!-- Collapsed card in the carousel -->
+<div
+	bind:this={cardEl}
+	class={cn(
+		"relative h-80 w-56 shrink-0 cursor-pointer snap-start overflow-hidden rounded-3xl md:h-96 md:w-72",
+		className
+	)}
+	role="button"
+	tabindex="0"
+	aria-label="Open {card.title}"
+	onclick={handleExpand}
+	onkeydown={handleCardKeydown}
+>
+	<img
+		src={card.src}
+		alt={card.title}
+		class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
+		draggable="false"
+	/>
+	<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
+	<div class="absolute bottom-0 left-0 p-5">
+		<p class="mb-1 text-xs font-semibold tracking-widest text-white/70 uppercase">
+			{card.category}
+		</p>
+		<h3 class="text-base font-semibold text-white md:text-lg">{card.title}</h3>
+	</div>
+</div>
+
+<!-- Expanded overlay -->
+{#if overlayVisible && rect !== null}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-40 bg-black/80"
+		aria-hidden="true"
+		style="opacity: {fullyExpanded ? 1 : 0}; transition: opacity {reducedMotion
+			? 0
+			: TRANSITION_MS}ms ease;"
+		onclick={handleCollapse}
+	></div>
+
+	<div
+		bind:this={dialogEl}
+		role="dialog"
+		aria-modal="true"
+		aria-label={card.title}
+		tabindex="-1"
+		class="fixed z-50 overflow-y-auto bg-white dark:bg-neutral-900"
+		style="
+			top: {fullyExpanded ? '0px' : rect.top + 'px'};
+			left: {fullyExpanded ? '0px' : rect.left + 'px'};
+			width: {fullyExpanded ? '100vw' : rect.width + 'px'};
+			height: {fullyExpanded ? '100vh' : rect.height + 'px'};
+			border-radius: {fullyExpanded ? '0px' : '1.5rem'};
+			transition: {reducedMotion
+			? 'none'
+			: `top ${TRANSITION_MS}ms cubic-bezier(0.32,0.72,0,1), left ${TRANSITION_MS}ms cubic-bezier(0.32,0.72,0,1), width ${TRANSITION_MS}ms cubic-bezier(0.32,0.72,0,1), height ${TRANSITION_MS}ms cubic-bezier(0.32,0.72,0,1), border-radius ${TRANSITION_MS}ms cubic-bezier(0.32,0.72,0,1)`};
+		"
+		onkeydown={handleOverlayKeydown}
+	>
+		<!-- Close button -->
+		<button
+			bind:this={closeBtn}
+			class="absolute top-4 right-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-black/20 backdrop-blur-sm transition-colors hover:bg-black/30"
+			aria-label="Close"
+			onclick={handleCollapse}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="18"
+				height="18"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="white"
+				stroke-width="2.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M18 6 6 18" />
+				<path d="m6 6 12 12" />
+			</svg>
+		</button>
+
+		<!-- Hero image -->
+		<div class="relative h-72 w-full shrink-0 md:h-96">
+			<img src={card.src} alt={card.title} class="h-full w-full object-cover" draggable="false" />
+			<div
+				class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"
+			></div>
+			<div class="absolute bottom-0 left-0 p-6 md:p-8">
+				<p class="mb-2 text-xs font-semibold tracking-widest text-white/70 uppercase">
+					{card.category}
+				</p>
+				<h2 class="text-2xl font-bold text-white md:text-3xl">{card.title}</h2>
+			</div>
+		</div>
+
+		<!-- Content area -->
+		<div class="p-6 md:p-8">
+			{#if card.content}
+				{@render card.content()}
+			{:else if card.description}
+				<p class="leading-relaxed text-gray-600 dark:text-neutral-400">{card.description}</p>
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/fancy-ui/apple-card-carousel/AppleCard.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+export interface AppleCardData {
+    /** Category label shown above the title */
+    category: string;
+    /** Main card title */
+    title: string;
+    /** URL of the card background image */
+    src: string;
+    /** Short description shown in the expanded view */
+    description?: string;
+    /** Rich content shown in the expanded view (takes precedence over description) */
+    content?: Snippet;
+}
+/** Shared transition duration — must stay in sync with the CSS transition below */
+export declare const TRANSITION_MS = 400;
+interface Props {
+    card: AppleCardData;
+    index: number;
+    expandedIndex: number;
+    reducedMotion: boolean;
+    onExpand: (index: number) => void;
+    onCollapse: () => void;
+    class?: string;
+}
+declare const AppleCard: import("svelte").Component<Props, {}, "">;
+type AppleCard = ReturnType<typeof AppleCard>;
+export default AppleCard;

package/dist/fancy-ui/apple-card-carousel/AppleCardCarousel.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import type { AppleCardData } from "./AppleCard.svelte";
+	export type { AppleCardData };
+
+	export interface AppleCardCarouselProps {
+		/** Cards to display in the carousel */
+		cards: AppleCardData[];
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { cn } from "../../utils.js";
+	import AppleCard from "./AppleCard.svelte";
+
+	let { cards, class: className = "" }: AppleCardCarouselProps = $props();
+
+	let expandedIndex = $state(-1);
+	let reducedMotion = $state(false);
+
+	onMount(() => {
+		const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+		reducedMotion = mq.matches;
+		const handler = (e: MediaQueryListEvent) => {
+			reducedMotion = e.matches;
+		};
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	});
+</script>
+
+<div class={cn("relative w-full", className)}>
+	<div
+		class="flex snap-x snap-mandatory gap-4 overflow-x-auto px-4 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+	>
+		{#each cards as card, i}
+			<AppleCard
+				{card}
+				index={i}
+				{expandedIndex}
+				{reducedMotion}
+				onExpand={(idx) => (expandedIndex = idx)}
+				onCollapse={() => (expandedIndex = -1)}
+			/>
+		{/each}
+	</div>
+</div>

package/dist/fancy-ui/apple-card-carousel/AppleCardCarousel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AppleCardData } from "./AppleCard.svelte";
+export type { AppleCardData };
+export interface AppleCardCarouselProps {
+    /** Cards to display in the carousel */
+    cards: AppleCardData[];
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const AppleCardCarousel: import("svelte").Component<AppleCardCarouselProps, {}, "">;
+type AppleCardCarousel = ReturnType<typeof AppleCardCarousel>;
+export default AppleCardCarousel;

package/dist/fancy-ui/apple-card-carousel/AppleCardCarousel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/apple-card-carousel/AppleCardCarousel.test.js

@@ -0,0 +1,85 @@
+import { render, cleanup, fireEvent } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import { flushSync } from "svelte";
+import AppleCardCarousel from "./AppleCardCarousel.svelte";
+const cards = [
+    { category: "Nature", title: "Mountains", src: "mountains.jpg", description: "High peaks." },
+    { category: "City", title: "Skyline", src: "skyline.jpg", description: "Urban lights." },
+    { category: "Ocean", title: "Waves", src: "waves.jpg", description: "Deep blue." },
+];
+describe("AppleCardCarousel", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        cleanup();
+    });
+    it("renders all cards", () => {
+        const { getByText } = render(AppleCardCarousel, { props: { cards } });
+        expect(getByText("Mountains")).toBeTruthy();
+        expect(getByText("Skyline")).toBeTruthy();
+        expect(getByText("Waves")).toBeTruthy();
+    });
+    it("renders gracefully with no cards", () => {
+        const { container } = render(AppleCardCarousel, { props: { cards: [] } });
+        expect(container.querySelector("[role='button']")).toBeNull();
+    });
+    it("clicking a card shows the expanded dialog", () => {
+        const { getByLabelText } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        expect(getByLabelText("Mountains")).toBeTruthy();
+    });
+    it("expanded dialog has correct ARIA attributes", () => {
+        const { getByLabelText, getByRole } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        const dialog = getByRole("dialog");
+        expect(dialog).toBeTruthy();
+        expect(dialog.getAttribute("aria-modal")).toBe("true");
+    });
+    it("clicking the close button collapses the card", () => {
+        const { getByLabelText, queryByRole } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        fireEvent.click(getByLabelText("Close"));
+        flushSync(() => vi.advanceTimersByTime(400));
+        expect(queryByRole("dialog")).toBeNull();
+    });
+    it("pressing Escape collapses the card", () => {
+        const { getByLabelText, queryByRole } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        const dialog = getByLabelText("Mountains");
+        fireEvent.keyDown(dialog, { key: "Escape" });
+        flushSync(() => vi.advanceTimersByTime(400));
+        expect(queryByRole("dialog")).toBeNull();
+    });
+    it("only one card can be expanded at a time", () => {
+        const { getByLabelText, getAllByRole } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        expect(getAllByRole("dialog")).toHaveLength(1);
+        // Clicking another card while one is open should be a no-op
+        fireEvent.click(getByLabelText("Open Skyline"));
+        flushSync();
+        expect(getAllByRole("dialog")).toHaveLength(1);
+    });
+    it("clicking the backdrop collapses the card", () => {
+        const { getByLabelText, queryByRole } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        // The backdrop has aria-hidden="true"; target it via its class
+        const backdrop = document.querySelector(".fixed.z-40");
+        fireEvent.click(backdrop);
+        flushSync(() => vi.advanceTimersByTime(400));
+        expect(queryByRole("dialog")).toBeNull();
+    });
+    it("shows description text in the expanded view", () => {
+        const { getByLabelText, getByText } = render(AppleCardCarousel, { props: { cards } });
+        fireEvent.click(getByLabelText("Open Mountains"));
+        flushSync();
+        expect(getByText("High peaks.")).toBeTruthy();
+    });
+});

package/dist/fancy-ui/apple-card-carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AppleCardCarousel } from "./AppleCardCarousel.svelte";
+export { default as AppleCard } from "./AppleCard.svelte";
+export type { AppleCardCarouselProps, AppleCardData } from "./AppleCardCarousel.svelte";

package/dist/fancy-ui/apple-card-carousel/index.js

@@ -0,0 +1,2 @@
+export { default as AppleCardCarousel } from "./AppleCardCarousel.svelte";
+export { default as AppleCard } from "./AppleCard.svelte";

package/dist/fancy-ui/bento-grid/BentoGrid.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		class?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+</script>
+
+<div
+	class={cn(
+		"mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
+		className
+	)}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/fancy-ui/bento-grid/BentoGrid.svelte.d.ts

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