@noahbaumgartner/svelte-ui 0.0.3 → 0.0.5

package/dist/components/footer/FooterColumn.svelte

@@ -0,0 +1,34 @@
+<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;
+	};
+
+	let { heading, class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['footer-column', className]}>
+	<span class="footer-column-heading">{heading}</span>
+	{@render children()}
+</div>
+
+<style>
+	.footer-column {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		color: color-mix(in srgb, #fff, #000 17%);
+	}
+
+	.footer-column-heading {
+		font-weight: 600;
+		color: #fff;
+		user-select: none;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+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;
+};
+declare const FooterColumn: import("svelte").Component<Props, {}, "">;
+type FooterColumn = ReturnType<typeof FooterColumn>;
+export default FooterColumn;

package/dist/components/mesh-gradient/MeshGradient.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** First colour is the background, every colour becomes a blurred blob. */
+		colors: string[];
+		/** Same seed gives the same layout; defaults to the joined colours. */
+		seed?: string;
+		/** Film grain overlay. */
+		grain?: boolean;
+	};
+
+	let { colors, seed = '', grain = true, class: className, ...rest }: Props = $props();
+
+	function hashSeed(str: string) {
+		let h = 0;
+		for (let i = 0; i < str.length; i++) {
+			h = (Math.imul(31, h) + str.charCodeAt(i)) | 0;
+		}
+		return h >>> 0;
+	}
+
+	function mulberry32(a: number) {
+		return function () {
+			a |= 0;
+			a = (a + 0x6d2b79f5) | 0;
+			let t = Math.imul(a ^ (a >>> 15), 1 | a);
+			t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+			return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+		};
+	}
+
+	const blobs = $derived.by(() => {
+		const rand = mulberry32(hashSeed(seed || colors.join('')));
+		return colors.map((color) => ({
+			color,
+			x: 10 + rand() * 80,
+			y: 10 + rand() * 80,
+			size: 70 + rand() * 60,
+			blur: rand() * 20
+		}));
+	});
+</script>
+
+<div
+	{...rest}
+	class={['mesh-gradient', grain && 'mesh-gradient--grain', className]}
+	style:background-color={colors[0]}
+	aria-hidden="true"
+>
+	{#each blobs as blob, i (i)}
+		<div
+			class="mesh-gradient-blob"
+			style:left="{blob.x}%"
+			style:top="{blob.y}%"
+			style:width="{blob.size}%"
+			style:height="{blob.size}%"
+			style:background-color={blob.color}
+			style:filter="blur({blob.blur}px)"
+		></div>
+	{/each}
+</div>
+
+<style>
+	.mesh-gradient {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.mesh-gradient-blob {
+		position: absolute;
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.mesh-gradient--grain::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+		background-size: 160px 160px;
+		opacity: 0.55;
+		mix-blend-mode: overlay;
+		pointer-events: none;
+	}
+</style>

package/dist/components/mesh-gradient/MeshGradient.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** First colour is the background, every colour becomes a blurred blob. */
+    colors: string[];
+    /** Same seed gives the same layout; defaults to the joined colours. */
+    seed?: string;
+    /** Film grain overlay. */
+    grain?: boolean;
+};
+declare const MeshGradient: import("svelte").Component<Props, {}, "">;
+type MeshGradient = ReturnType<typeof MeshGradient>;
+export default MeshGradient;

package/dist/components/number-stepper/NumberStepper.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Minus, Plus } from '@lucide/svelte';
+	import Button from '../button/Button.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange'> & {
+		/** The count. Bindable. */
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		/** Names what is counted; the accessible name of the group and part of the button labels. */
+		label: string;
+		onchange?: (value: number) => void;
+	};
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = Infinity,
+		step = 1,
+		size = 'sm',
+		disabled = false,
+		label,
+		class: className,
+		onchange,
+		...rest
+	}: Props = $props();
+
+	function set(next: number) {
+		value = Math.min(Math.max(next, min), max);
+		onchange?.(value);
+	}
+</script>
+
+<div
+	{...rest}
+	role="group"
+	aria-label={label}
+	class={['number-stepper', `number-stepper--${size}`, className]}
+>
+	<Button
+		variant="outline"
+		{size}
+		icon={Minus}
+		label="Decrease {label}"
+		disabled={disabled || value <= min}
+		onclick={() => set(value - step)}
+	/>
+	<output class="number-stepper-value" aria-live="polite">{value}</output>
+	<Button
+		variant="outline"
+		{size}
+		icon={Plus}
+		label="Increase {label}"
+		disabled={disabled || value >= max}
+		onclick={() => set(value + step)}
+	/>
+</div>
+
+<style>
+	.number-stepper {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 13px;
+		color: var(--color-text);
+	}
+
+	.number-stepper--sm {
+		font-size: 12px;
+	}
+
+	.number-stepper-value {
+		min-width: 24px;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		text-align: center;
+	}
+</style>

package/dist/components/number-stepper/NumberStepper.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange'> & {
+    /** The count. Bindable. */
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Names what is counted; the accessible name of the group and part of the button labels. */
+    label: string;
+    onchange?: (value: number) => void;
+};
+declare const NumberStepper: import("svelte").Component<Props, {}, "value">;
+type NumberStepper = ReturnType<typeof NumberStepper>;
+export default NumberStepper;

package/dist/components/preview-card/PreviewCard.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LucideIcon } from '@lucide/svelte';
+
+	type Props = {
+		/** Makes the whole card a link. */
+		href?: string;
+		/** Bold lead-in before the description, followed by a colon. */
+		title: string;
+		description?: string;
+		/** Muted text below, e.g. a date. */
+		meta?: string;
+		/** Any Lucide icon (import from `svelte-ui/icons`), shown in the top-left corner of the media. */
+		icon?: LucideIcon;
+		orientation?: 'vertical' | 'horizontal';
+		/** Square media that fills the frame, e.g. a MeshGradient or an `<img>`. */
+		media: Snippet;
+		class?: string;
+	};
+
+	let {
+		href,
+		title,
+		description,
+		meta,
+		icon: Icon,
+		orientation = 'vertical',
+		media,
+		class: className
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{href}
+	class={['preview-card', `preview-card--${orientation}`, className]}
+>
+	<div class="preview-card-media">
+		{@render media()}
+		{#if Icon}
+			<span class="preview-card-icon"><Icon aria-hidden="true" /></span>
+		{/if}
+	</div>
+	<div class="preview-card-info">
+		<p class="preview-card-headline">
+			<span class="preview-card-title">{title}{description ? ':' : ''}</span>
+			{description}
+		</p>
+		{#if meta}
+			<span class="preview-card-meta">{meta}</span>
+		{/if}
+	</div>
+</svelte:element>
+
+<style>
+	.preview-card {
+		display: flex;
+		gap: 20px;
+		color: var(--color-text);
+		text-decoration: none;
+		border-radius: 14px;
+		outline: none;
+	}
+
+	a.preview-card:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.preview-card--vertical {
+		flex-direction: column;
+	}
+
+	.preview-card--horizontal {
+		align-items: center;
+	}
+
+	.preview-card-media {
+		position: relative;
+		flex-shrink: 0;
+		aspect-ratio: 1;
+		overflow: hidden;
+		border-radius: 14px;
+	}
+
+	.preview-card--horizontal .preview-card-media {
+		width: 140px;
+	}
+
+	.preview-card-media > :global(:not(.preview-card-icon)) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: inherit;
+		transition: transform 300ms ease;
+	}
+
+	a.preview-card:hover .preview-card-media > :global(:not(.preview-card-icon)) {
+		transform: scale(1.05);
+	}
+
+	.preview-card-icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		color: var(--color-base);
+		background-color: var(--color-ink);
+		border-radius: 14px 0 0 0;
+	}
+
+	.preview-card-icon :global(svg) {
+		width: 20px;
+		height: 20px;
+	}
+
+	.preview-card--horizontal .preview-card-icon {
+		width: 32px;
+		height: 32px;
+	}
+
+	.preview-card--horizontal .preview-card-icon :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+
+	.preview-card-info {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.preview-card-headline {
+		margin: 0;
+		font-size: 16px;
+	}
+
+	.preview-card-title {
+		font-weight: 600;
+	}
+
+	.preview-card-meta {
+		font-size: 14px;
+		color: var(--color-text-muted);
+	}
+
+	@media (min-width: 640px) {
+		.preview-card--horizontal .preview-card-media {
+			width: 168px;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.preview-card-media > :global(*) {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/preview-card/PreviewCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = {
+    /** Makes the whole card a link. */
+    href?: string;
+    /** Bold lead-in before the description, followed by a colon. */
+    title: string;
+    description?: string;
+    /** Muted text below, e.g. a date. */
+    meta?: string;
+    /** Any Lucide icon (import from `svelte-ui/icons`), shown in the top-left corner of the media. */
+    icon?: LucideIcon;
+    orientation?: 'vertical' | 'horizontal';
+    /** Square media that fills the frame, e.g. a MeshGradient or an `<img>`. */
+    media: Snippet;
+    class?: string;
+};
+declare const PreviewCard: import("svelte").Component<Props, {}, "">;
+type PreviewCard = ReturnType<typeof PreviewCard>;
+export default PreviewCard;

package/dist/components/progress/Progress.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Progress between 0 and `max`. Omit while the amount is unknown: the bar then runs back and forth. */
+		value?: number;
+		max?: number;
+		size?: 'sm' | 'md';
+		/** Accessible name, e.g. what is loading. */
+		label?: string;
+	};
+
+	let { value, max = 100, size = 'md', label, class: className, ...rest }: Props = $props();
+
+	let fraction = $derived(value === undefined ? undefined : Math.min(Math.max(value / max, 0), 1));
+</script>
+
+<div
+	{...rest}
+	role="progressbar"
+	aria-label={label}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={fraction === undefined ? undefined : fraction * max}
+	class={[
+		'progress',
+		`progress--${size}`,
+		{ 'progress--indeterminate': fraction === undefined },
+		className
+	]}
+>
+	<div
+		class="progress-bar"
+		style:width={fraction === undefined ? undefined : `${fraction * 100}%`}
+	></div>
+</div>
+
+<style>
+	.progress {
+		width: 100%;
+		overflow: hidden;
+		background-color: var(--color-surface);
+		border-radius: 999px;
+	}
+
+	.progress--sm {
+		height: 4px;
+	}
+
+	.progress--md {
+		height: 8px;
+	}
+
+	.progress-bar {
+		height: 100%;
+		background-color: var(--color-accent);
+		border-radius: inherit;
+		transition: width 300ms ease;
+	}
+
+	.progress--indeterminate .progress-bar {
+		width: 40%;
+		animation: progress-slide 1.4s ease-in-out infinite;
+	}
+
+	@keyframes progress-slide {
+		from {
+			translate: -100% 0;
+		}
+
+		to {
+			translate: 250% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress-bar {
+			transition: none;
+		}
+
+		/* A full, dimmed bar instead of the movement */
+		.progress--indeterminate .progress-bar {
+			width: 100%;
+			opacity: 0.4;
+			animation: none;
+		}
+	}
+</style>

package/dist/components/progress/Progress.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Progress between 0 and `max`. Omit while the amount is unknown: the bar then runs back and forth. */
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md';
+    /** Accessible name, e.g. what is loading. */
+    label?: string;
+};
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;