@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/footer/FooterColumn.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		heading: string;
+		/** Links, one per line. */
+		children: Snippet;
+		ref?: HTMLDivElement | null;
+	};
+
+	let { heading, class: className, children, ref = $bindable(null), ...rest }: Props = $props();
+</script>
+
+<div {...rest} bind:this={ref} class={['footer-column', className]}>
+	<span class="footer-column-heading">{heading}</span>
+	{@render children()}
+</div>
+
+<style>
+	@layer svelte-ui {
+		.footer-column {
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 8px;
+			color: color-mix(in srgb, var(--color-base), var(--color-ink) 17%);
+		}
+
+		.footer-column-heading {
+			font-weight: 600;
+			color: var(--color-base);
+			user-select: none;
+		}
+	}
+</style>

package/dist/components/footer/FooterColumn.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    heading: string;
+    /** Links, one per line. */
+    children: Snippet;
+    ref?: HTMLDivElement | null;
+};
+declare const FooterColumn: import("svelte").Component<Props, {}, "ref">;
+type FooterColumn = ReturnType<typeof FooterColumn>;
+export default FooterColumn;

package/dist/components/image/Image.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLImgAttributes, 'alt' | 'src'> & {
+		/** The img element. Bindable. */
+		ref?: HTMLImageElement | null;
+		src: string;
+		/** Describes the image; use `""` for purely decorative images. */
+		alt: string;
+		/**
+		 * Crops the image to this CSS aspect ratio, e.g. `1` or `16 / 9`. Without it the image keeps
+		 * its natural ratio. Pass `width` and `height` to reserve the space before it loads.
+		 */
+		ratio?: string | number;
+		/** How the image fills the frame when `ratio` crops it. */
+		fit?: 'cover' | 'contain';
+	};
+
+	let {
+		ref = $bindable(null),
+		src,
+		alt,
+		ratio,
+		fit = 'cover',
+		loading = 'lazy',
+		decoding = 'async',
+		class: className,
+		...rest
+	}: Props = $props();
+</script>
+
+<img
+	{...rest}
+	bind:this={ref}
+	{src}
+	{alt}
+	{loading}
+	{decoding}
+	class={['image', `image--${fit}`, className]}
+	style:aspect-ratio={ratio}
+/>
+
+<style>
+	@layer svelte-ui {
+		.image {
+			display: block;
+			max-width: 100%;
+			height: auto;
+			background-color: var(--color-surface);
+			border-radius: 10px;
+		}
+
+		.image--cover {
+			object-fit: cover;
+		}
+
+		.image--contain {
+			object-fit: contain;
+		}
+	}
+</style>

package/dist/components/image/Image.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+type Props = Omit<HTMLImgAttributes, 'alt' | 'src'> & {
+    /** The img element. Bindable. */
+    ref?: HTMLImageElement | null;
+    src: string;
+    /** Describes the image; use `""` for purely decorative images. */
+    alt: string;
+    /**
+     * Crops the image to this CSS aspect ratio, e.g. `1` or `16 / 9`. Without it the image keeps
+     * its natural ratio. Pass `width` and `height` to reserve the space before it loads.
+     */
+    ratio?: string | number;
+    /** How the image fills the frame when `ratio` crops it. */
+    fit?: 'cover' | 'contain';
+};
+declare const Image: import("svelte").Component<Props, {}, "ref">;
+type Image = ReturnType<typeof Image>;
+export default Image;