@rezcom/rez-components 0.0.2

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import Button from './ui/Button.svelte';
+import Carousel from './ui/Carousel.svelte';
+import Dropdown from './ui/Dropdown.svelte';
+import Modal from './ui/Modal.svelte';
+export { Button, Carousel, Dropdown, Modal };

package/dist/index.js

@@ -0,0 +1,6 @@
+import Button from './ui/Button.svelte';
+import Carousel from './ui/Carousel.svelte';
+import Dropdown from './ui/Dropdown.svelte';
+import Modal from './ui/Modal.svelte';
+// Reexport your entry components here
+export { Button, Carousel, Dropdown, Modal };

package/dist/ui/Button.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface ButtonProps {
+		text?: null | string;
+		active?: boolean; // Condition as to whether or not it's clickable
+
+		// TailwindCSS
+		color?: string;
+		textColor?: string;
+		inactiveColor?: string;
+		inactiveTextColor?: string;
+		ringColor?: string;
+		class?: string;
+
+		// Add ring and shine effects?
+		ring?: boolean;
+		shine?: boolean;
+
+		// href
+		href?: null | string;
+		target?: null | string;
+
+		// Interactivity - Use if the button should have behavior rather than redirecting to a link
+		onclick?: (() => void) | null;
+
+		// Child props
+		children?: null | Snippet;
+	}
+
+	let {
+		text = null,
+		active = true,
+
+		color = 'bg-indigo-700 hover:bg-indigo-800 active:bg-blue-900',
+		textColor = 'text-white ',
+		inactiveColor = 'bg-gray-700',
+		inactiveTextColor = 'text-white',
+
+		ringColor = 'hover:ring-indigo-800 focus-visible:ring-indigo-800',
+		class: otherClasses = '',
+
+		ring = true,
+		shine = true,
+
+		target = null,
+		href = null,
+
+		onclick = null,
+		children = null
+	}: ButtonProps = $props();
+
+	const baseClass =
+		'group relative inline-flex overflow-hidden items-center justify-center rounded-md px-2 py-2 text-center uppercase tracking-wide focus:outline-hidden focus:ring-3 focus:ring-offset-white transition duration-200 ease-in-out'.concat(
+			active ? ' hover:cursor-pointer' : ''
+		);
+
+	const classes = [
+		otherClasses,
+		baseClass,
+		active ? color : inactiveColor,
+		active ? textColor : inactiveTextColor,
+		ring ? `hover:ring-2 hover:ring-offset-2 ${ringColor}` : ''
+	].join(' ');
+</script>
+
+{#snippet inside()}
+	{#if shine}
+		<span
+			class="absolute left-0 -mt-12 h-32 w-1/2 translate-x-[250%] rotate-12 bg-white/20 transition-all duration-250 ease-out group-hover:translate-x-[2%]"
+		></span>
+	{/if}
+	{@render children?.()}
+	{#if text}
+		{text}
+	{/if}
+{/snippet}
+
+{#if active}
+	{#if href}
+		<a {href} class={classes} {target}>
+			{@render inside()}
+		</a>
+	{:else if onclick}
+		<button {onclick} class={classes}>
+			{@render inside()}
+		</button>
+	{/if}
+{:else}
+	<div class={classes}>
+		{@render inside()}
+	</div>
+{/if}

package/dist/ui/Button.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface ButtonProps {
+    text?: null | string;
+    active?: boolean;
+    color?: string;
+    textColor?: string;
+    inactiveColor?: string;
+    inactiveTextColor?: string;
+    ringColor?: string;
+    class?: string;
+    ring?: boolean;
+    shine?: boolean;
+    href?: null | string;
+    target?: null | string;
+    onclick?: (() => void) | null;
+    children?: null | Snippet;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/Carousel.svelte

@@ -0,0 +1,311 @@
+<script lang="ts">
+	import type { ImageMetadata } from 'astro';
+	import { Carousel } from 'flowbite';
+	import { onDestroy, onMount } from 'svelte';
+	import { measureImageHeights, preloadImages } from '../util/util.js';
+
+	let carousel: Carousel | null = $state(null);
+
+	let maxHeight = $state(0);
+	let aspectRatio = $state(1);
+
+	interface CarouselProps {
+		// List of image metadata's OR strings
+		images: (ImageMetadata | string)[];
+
+		// Carousel ID to make it unique
+		carouselID?: number;
+
+		// Whether or not the user can click to move the carousel pages.
+		clickablePages?: boolean;
+
+		// Duration for auto-slide, if any
+		// 0 Indicates none
+		duration?: number;
+
+		// How fast should the page switch? (as a TailwindCSS class)
+		animationSpeed?: string;
+
+		// Pause on mouse hover
+		pauseOnHover?: boolean;
+
+		// Override the height with a TailwindCSS class
+		heightOverride?: string;
+
+		// Default Page index
+		defaultPage?: number;
+
+		// Show Slider Indicators
+		showSliderIndicators?: boolean;
+
+		// Image Options (see interface below)
+		imageOptions?: ImageOptions;
+
+		// Carousel Bg Color (as a TailwindCSS class)
+		bgColor?: string;
+
+		// Object property (as a TailwindCSS class such as "object-cover")
+		object?: string;
+
+		// Other classes TailwindCSS
+		class?: string;
+	}
+
+	interface ImageOptions {
+		// Should the images be rounded?
+		rounded?: boolean;
+
+		// Image's height as a TailwindCSS class
+		height?: string;
+
+		// Move the image slightly up within the wrapping div? (Stupid Flowbite bug)
+		translateUp?: boolean;
+	}
+
+	const {
+		images = [],
+		carouselID = 0,
+		clickablePages = true,
+		defaultPage = 0,
+		showSliderIndicators = true,
+		animationSpeed = 'duration-700',
+		object = 'object-cover',
+		heightOverride,
+		imageOptions = {
+			rounded: true,
+			height: 'h-full',
+			translateUp: true
+		},
+		bgColor = '',
+		duration = 0,
+		pauseOnHover = true,
+		class: otherClasses = ''
+	}: CarouselProps = $props();
+
+	let isMouseHovering = $state(false);
+	let interval: ReturnType<typeof setInterval> | undefined = undefined;
+	let preloadedImages: HTMLImageElement[] = $state([]);
+
+	function nextPage() {
+		if (carousel) {
+			carousel.next();
+		} else {
+			console.error(
+				'The carousel has not been initialized correctly in the mount and therefore the nextPage() function failed.'
+			);
+		}
+	}
+
+	function previousPage() {
+		if (carousel) {
+			carousel.prev();
+		} else {
+			console.error(
+				'The carousel has not been initialized correctly in the mount and therefore the previousPage() function failed.'
+			);
+		}
+	}
+
+	function startAutoPlay(carousel: Carousel) {
+		if (duration) {
+			interval = setInterval(() => {
+				if (!isMouseHovering) {
+					carousel.next();
+				}
+			}, duration);
+		}
+	}
+
+	function stopAutoPlay() {
+		clearInterval(interval);
+	}
+
+	onMount(() => {
+		async function setup() {
+			// Preload images
+			preloadedImages = preloadImages(images);
+
+			// Measure and set max height after images load
+			const { height, ratio } = await measureImageHeights(preloadedImages);
+			maxHeight = height;
+			aspectRatio = ratio;
+
+			// Indicate carousel-item-ids
+			const items = preloadedImages
+				.map((item, i) => {
+					const el = document.getElementById(`carousel-item-${carouselID}-${i}`);
+
+					if (el) {
+						return { position: i, el };
+					}
+					console.warn(`Element with ID carousel-item-${carouselID}-${i} not found.`);
+					return null;
+				})
+				.filter((item): item is { position: number; el: HTMLElement } => item !== null);
+
+			// Indicate the options which outline the indicator ids
+			const options = {
+				defaultPosition: defaultPage,
+				indicators: {
+					activeClasses: 'bg-white',
+					items: preloadedImages
+						.map((item, i) => {
+							const el = document.getElementById(`carousel-indicator-${carouselID}-${i}`);
+							if (el) {
+								return { position: i, el };
+							}
+							console.warn(`Element with ID carousel-indicator-${carouselID}-${i} not found.`);
+							return null;
+						})
+						.filter((item): item is { position: number; el: HTMLElement } => item !== null)
+				}
+			};
+
+			// Handle resizes
+			const resizeHandler = async () => {
+				const { height, ratio } = await measureImageHeights(preloadedImages);
+				maxHeight = height;
+				aspectRatio = ratio;
+			};
+
+			window.addEventListener('resize', resizeHandler);
+
+			// Initialize the carousel
+			carousel = new Carousel(carouselElement, items, options);
+
+			startAutoPlay(carousel);
+		}
+
+		const carouselElement = document.getElementById(`default-carousel-${carouselID}`);
+
+		setup();
+	});
+
+	onDestroy(() => {
+		stopAutoPlay();
+	});
+</script>
+
+<menu
+	id="default-carousel-{carouselID}"
+	class={`${otherClasses} relative top-0 ${bgColor} overflow-hidden ${heightOverride ? heightOverride : ''}`}
+	style={!heightOverride && maxHeight ? `aspect-ratio: ${aspectRatio}` : ''}
+	onmouseenter={() => {
+		if (pauseOnHover) {
+			isMouseHovering = true;
+		}
+	}}
+	onmouseleave={() => {
+		isMouseHovering = false;
+	}}
+>
+	<!-- Carousel wrapper -->
+	<div
+		class={`relative h-full w-full overflow-hidden ${bgColor} ${imageOptions.rounded ? 'rounded-md' : ''}`}
+	>
+		<!-- Items -->
+		{#if preloadedImages}
+			{#each preloadedImages as srcObject, i}
+				<div
+					class="{animationSpeed} flex h-full w-full items-center justify-center ease-in-out"
+					id="carousel-item-{carouselID}-{i}"
+				>
+					<img
+						alt=""
+						src={typeof srcObject === 'object' && srcObject !== null && 'src' in srcObject
+							? srcObject.src
+							: srcObject}
+						class={`h-full w-full ${imageOptions.rounded ? 'rounded-md' : ''} ${object ?? 'object-contain'}`}
+						style={heightOverride ? '' : `aspect-ratio: ${aspectRatio};`}
+					/>
+				</div>
+			{/each}
+		{:else}
+			<span class="font-bold italic">Loading Images Carousel...</span>
+		{/if}
+	</div>
+	<!-- Slider indicators -->
+	{#if showSliderIndicators}
+		<div
+			class="absolute bottom-5 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rtl:space-x-reverse"
+		>
+			{#each images as item, index}
+				<button
+					id="carousel-indicator-{carouselID}-{index}"
+					type="button"
+					class="h-3 w-3 rounded-full"
+					aria-current="true"
+					aria-label="Slide {index}"
+					data-carousel-slide-to={index}
+				></button>
+			{/each}
+		</div>
+	{/if}
+	<!-- Slider controls -->
+	{#if clickablePages}
+		<button
+			type="button"
+			class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-hidden"
+			onclick={previousPage}
+		>
+			<div
+				class={'absolute inset-0 bg-gradient-to-r from-black/50 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100'.concat(
+					' ',
+					imageOptions.rounded ? 'rounded-l-md' : ''
+				)}
+			></div>
+			<span
+				class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden"
+			>
+				<svg
+					class="h-4 w-4 text-white"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 6 10"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M5 1 1 5l4 4"
+					/>
+				</svg>
+				<span class="sr-only">Previous</span>
+			</span>
+		</button>
+		<button
+			type="button"
+			class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-hidden"
+			onclick={nextPage}
+		>
+			<div
+				class={'absolute inset-0 bg-gradient-to-l from-black/50 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100'.concat(
+					' ',
+					imageOptions.rounded ? 'rounded-r-md' : ''
+				)}
+			></div>
+			<span
+				class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden"
+			>
+				<svg
+					class="h-4 w-4 text-white"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 6 10"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m1 9 4-4-4-4"
+					/>
+				</svg>
+				<span class="sr-only">Next</span>
+			</span>
+		</button>
+	{/if}
+</menu>

package/dist/ui/Carousel.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ImageMetadata } from 'astro';
+import { Carousel } from 'flowbite';
+interface ImageOptions {
+    rounded?: boolean;
+    height?: string;
+    translateUp?: boolean;
+}
+interface CarouselProps {
+    images: (ImageMetadata | string)[];
+    carouselID?: number;
+    clickablePages?: boolean;
+    duration?: number;
+    animationSpeed?: string;
+    pauseOnHover?: boolean;
+    heightOverride?: string;
+    defaultPage?: number;
+    showSliderIndicators?: boolean;
+    imageOptions?: ImageOptions;
+    bgColor?: string;
+    object?: string;
+    class?: string;
+}
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/ui/Dropdown.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { DropdownItem } from '../util/type.js';
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	interface DropdownProps {
+		// Options
+		// Label before options chosen
+		defaultLabel?: string;
+		// First item is loaded by default?
+		firstItemDefault?: boolean;
+
+		// Function that fires when the user selects something
+		onselect: (selection: string) => void;
+
+		// List of selections
+		items: DropdownItem[];
+
+		// TailwindCSS
+
+		itemColor?: string; // Styling for individual items
+		textColor?: string;
+		color?: string;
+		hoverColor?: string;
+		ringColor?: string;
+
+		minWidth?: string;
+		textSize?: string;
+		class?: string;
+	}
+
+	// Props
+	let {
+		defaultLabel = '',
+		firstItemDefault = true,
+		onselect,
+		items,
+		itemColor = 'hover:bg-indigo-900',
+
+		textColor = 'text-white',
+		color = 'bg-indigo-700',
+		hoverColor = 'bg-indigo-800',
+		ringColor = 'hover:ring-indigo-800 focus-visible:ring-indigo-800',
+		minWidth = 'min-w-full',
+		textSize = 'text-md',
+		class: otherClasses = ''
+	}: DropdownProps = $props();
+
+	let dropdownOpen = $state(false);
+	let currItem: DropdownItem | null = $state(null);
+
+	onMount(() => {
+		// Initially set the current option to the first one
+		if (firstItemDefault) {
+			currItem = items[0];
+			onselect(currItem.value);
+		}
+	});
+</script>
+
+<div class={`relative ${otherClasses}`}>
+	<form
+		onmouseleave={() => {
+			dropdownOpen = false;
+		}}
+	>
+		<button
+			onmouseenter={() => {
+				dropdownOpen = true;
+			}}
+			class={`flex ${textSize} ${color} ${textColor} ${ringColor} ${minWidth} items-center rounded-t-lg px-5 py-2.5 text-center transition duration-200 `.concat(
+				dropdownOpen ? `rounded-br-lg ${hoverColor}` : 'rounded-b-lg'
+			)}
+			type="button"
+		>
+			{#if items && currItem !== null}
+				{currItem.label}
+			{:else}
+				{defaultLabel}
+			{/if}
+
+			<!-- Down Arrow -->
+			<div class="ml-auto">
+				<svg
+					class="ms-3 h-2.5 w-2.5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 10 6"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m1 1 4 4 4-4"
+					/>
+				</svg>
+			</div>
+		</button>
+		<!-- Dropdown menu -->
+		{#if dropdownOpen}
+			<div
+				transition:fly={{ duration: 150, y: -10 }}
+				class={`${hoverColor} ${minWidth} absolute z-10 rounded-tr-lg rounded-b-lg shadow-2xl`}
+			>
+				<ul class={`py-2 ${textSize} ${textColor}`}>
+					{#each items as dropdownOption}
+						<li>
+							<button
+								onclick={() => {
+									onselect(dropdownOption.value);
+									currItem = dropdownOption;
+									dropdownOpen = false;
+								}}
+								class={`${itemColor} w-full cursor-pointer px-4 py-2 transition duration-200 ease-in-out`}
+							>
+								{dropdownOption.label}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</form>
+</div>

package/dist/ui/Dropdown.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DropdownItem } from '../util/type.js';
+interface DropdownProps {
+    defaultLabel?: string;
+    firstItemDefault?: boolean;
+    onselect: (selection: string) => void;
+    items: DropdownItem[];
+    itemColor?: string;
+    textColor?: string;
+    color?: string;
+    hoverColor?: string;
+    ringColor?: string;
+    minWidth?: string;
+    textSize?: string;
+    class?: string;
+}
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/ui/Hero.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface HeroProps {
+		// Background of the hero image
+		background: Snippet;
+
+		// Content
+		children: Snippet;
+
+		// Height of the child div
+		childHeight?: string;
+	}
+
+	const { background, children, childHeight = 'h-full' }: HeroProps = $props();
+</script>
+
+<main class="relative h-max overflow-hidden">
+	<div class="absolute inset-0 top-0 -z-50">
+		{@render background()}
+	</div>
+	<div
+		class={`${childHeight} relative z-0 flex flex-col items-center justify-center p-4 text-center`}
+	>
+		{@render children()}
+	</div>
+</main>

package/dist/ui/Hero.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface HeroProps {
+    background: Snippet;
+    children: Snippet;
+    childHeight?: string;
+}
+declare const Hero: import("svelte").Component<HeroProps, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/ui/Modal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface ModalProps {
+		// Function that fires when the modal is closed
+		onclose: () => void;
+		// Whether or not to show the modal
+		showModal: boolean;
+
+		styling?: string; // Styles in TailwindCSS
+		blurStyle?: string;
+
+		// Clicking Closes?
+		clickingBackdropCloses?: boolean;
+		clickingModalCloses?: boolean;
+
+		children: Snippet;
+	}
+
+	const {
+		onclose,
+		showModal = false,
+		styling = 'bg-gradient-to-b from-slate-700/20 to-gray-700/20 border border-slate-500/60',
+		blurStyle = 'backdrop-blur-md',
+		clickingBackdropCloses = true,
+		clickingModalCloses = false,
+		children
+	}: ModalProps = $props();
+</script>
+
+{#if showModal}
+	<!-- Backdrop -->
+	<button
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 hover:cursor-default"
+		onclick={() => {
+			if (clickingBackdropCloses) {
+				onclose();
+			}
+		}}
+	>
+		<!-- Modal container -->
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+		<div
+			role="alertdialog"
+			tabindex={-1}
+			class={`${styling} ${blurStyle} max-h-[90%] max-w-[90%] overflow-x-hidden overflow-y-scroll rounded-xl p-6 shadow-lg`}
+			onclick={(e) => {
+				if (clickingModalCloses) {
+					onclose();
+				} else {
+					e.stopPropagation();
+				}
+			}}
+			style="-ms-overflow-style: none; scrollbar-width: none;"
+		>
+			{@render children()}
+		</div>
+	</button>
+{/if}

package/dist/ui/Modal.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface ModalProps {
+    onclose: () => void;
+    showModal: boolean;
+    styling?: string;
+    blurStyle?: string;
+    clickingBackdropCloses?: boolean;
+    clickingModalCloses?: boolean;
+    children: Snippet;
+}
+declare const Modal: import("svelte").Component<ModalProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/util/type.d.ts

@@ -0,0 +1,4 @@
+export interface DropdownItem {
+    label: string;
+    value: string;
+}

package/dist/util/type.js

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

package/dist/util/util.d.ts

@@ -0,0 +1,7 @@
+import type { ImageMetadata } from 'astro';
+export declare function getImageSource(image: HTMLImageElement | ImageMetadata | string): string;
+export declare function measureImageHeights(imageElements: HTMLImageElement[], imageStyle?: string): Promise<{
+    height: number;
+    ratio: number;
+}>;
+export declare function preloadImages(images: (ImageMetadata | string)[], imageClass?: string): HTMLImageElement[];

package/dist/util/util.js

@@ -0,0 +1,47 @@
+// Given an ImageMetadata or a string representing an image, returns the source
+export function getImageSource(image) {
+    return typeof image === 'object' && 'src' in image ? image.src : image;
+}
+// Measure the height and aspect ratio of each image as it would be rendered
+export async function measureImageHeights(imageElements, imageStyle) {
+    const hiddenContainer = document.createElement('div');
+    hiddenContainer.style.visibility = 'hidden';
+    hiddenContainer.style.position = 'absolute';
+    hiddenContainer.style.top = '-9999px';
+    hiddenContainer.style.left = '-9999px';
+    hiddenContainer.style.width = '1000px'; // simulate real layout width
+    document.body.appendChild(hiddenContainer);
+    const imageObjects = imageElements.map((img) => {
+        const image = new Image();
+        image.src = getImageSource(img);
+        image.className = imageStyle ?? '';
+        hiddenContainer.appendChild(image);
+        return image;
+    });
+    // Wait until all images load and can be measured
+    await Promise.all(imageObjects.map((img) => new Promise((resolve) => {
+        img.onload = () => resolve();
+    })));
+    let maxHeight = 0;
+    let bestRatio = 1;
+    for (const img of imageObjects) {
+        const height = img.offsetHeight;
+        const width = img.offsetWidth;
+        const ratio = width / height;
+        if (height > maxHeight) {
+            maxHeight = height;
+            bestRatio = ratio;
+        }
+    }
+    document.body.removeChild(hiddenContainer);
+    return { height: maxHeight, ratio: bestRatio };
+}
+// Returns a list of image objects given a list of ImageMetadatas / image sources
+export function preloadImages(images, imageClass) {
+    return images.map((img) => {
+        const image = new Image();
+        image.src = getImageSource(img);
+        image.className = imageClass ?? '';
+        return image;
+    });
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+	"name": "@rezcom/rez-components",
+	"version": "0.0.2",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.3.2",
+		"@eslint/js": "^9.36.0",
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/kit": "^2.42.2",
+		"@sveltejs/package": "^2.5.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.0",
+		"@tailwindcss/forms": "^0.5.10",
+		"@tailwindcss/typography": "^0.5.18",
+		"@tailwindcss/vite": "^4.1.13",
+		"@types/node": "^24.5.2",
+		"astro": "^5.13.9",
+		"eslint": "^9.36.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.12.3",
+		"flowbite": "^3.1.2",
+		"globals": "^16.4.0",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.14",
+		"publint": "^0.3.13",
+		"svelte": "^5.39.2",
+		"svelte-check": "^4.3.1",
+		"tailwindcss": "^4.1.13",
+		"typescript": "^5.9.2",
+		"typescript-eslint": "^8.44.0",
+		"vite": "^7.1.6"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@tailwindcss/oxide",
+			"esbuild",
+			"sharp"
+		]
+	}
+}