@noahbaumgartner/svelte-ui 0.0.4 → 0.0.5

package/dist/components/empty-state/EmptyState.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { LucideIcon } from '@lucide/svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		title: string;
+		description?: string;
+		/** `outline` has a dashed border, for empty areas that can be filled. */
+		variant?: 'secondary' | 'outline';
+		/** Optional actions below the text, e.g. a Button that creates the first entry. */
+		children?: Snippet;
+	};
+
+	let {
+		icon: Icon,
+		title,
+		description,
+		variant = 'secondary',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div {...rest} class={['empty-state', `empty-state--${variant}`, className]}>
+	{#if Icon}<Icon class="empty-state-icon" aria-hidden="true" />{/if}
+	<p class="empty-state-title">{title}</p>
+	{#if description}<p class="empty-state-description">{description}</p>{/if}
+	{#if children}<div class="empty-state-actions">{@render children()}</div>{/if}
+</div>
+
+<style>
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 6px;
+		box-sizing: border-box;
+		padding: 32px 16px;
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--color-text);
+		text-align: center;
+		border-radius: 14px;
+	}
+
+	.empty-state--secondary {
+		background-color: var(--color-surface);
+		border: 1px solid transparent;
+	}
+
+	.empty-state--outline {
+		border: 1px dashed var(--color-border-strong);
+	}
+
+	.empty-state :global(.empty-state-icon) {
+		width: 20px;
+		height: 20px;
+		margin-bottom: 4px;
+		color: var(--color-text-muted);
+	}
+
+	p {
+		max-width: 44ch;
+		margin: 0;
+	}
+
+	.empty-state-title {
+		font-weight: 500;
+	}
+
+	.empty-state-description {
+		color: var(--color-text-muted);
+	}
+
+	.empty-state-actions {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 8px;
+		margin-top: 8px;
+	}
+</style>

package/dist/components/empty-state/EmptyState.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    /** `outline` has a dashed border, for empty areas that can be filled. */
+    variant?: 'secondary' | 'outline';
+    /** Optional actions below the text, e.g. a Button that creates the first entry. */
+    children?: Snippet;
+};
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/entry/Entry.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** Rendered as an `<h3>`. */
+		title: string;
+		/** Muted text next to the title, e.g. a period like "2021 - 2025". */
+		meta?: string;
+		/** The description. */
+		children?: Snippet;
+		/** Below the description, e.g. a Link. */
+		footer?: Snippet;
+	};
+
+	let { title, meta, class: className, children, footer, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['entry', className]}>
+	<div class="entry-heading">
+		<h3 class="entry-title">{title}</h3>
+		{#if meta}
+			<span class="entry-meta">{meta}</span>
+		{/if}
+	</div>
+	{#if children}
+		<p class="entry-description">{@render children()}</p>
+	{/if}
+	{#if footer}
+		<div class="entry-footer">{@render footer()}</div>
+	{/if}
+</div>
+
+<style>
+	.entry {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 10px;
+		box-sizing: border-box;
+		padding: 24px;
+		color: var(--color-text);
+		border: 1px solid var(--color-border-strong);
+		border-radius: 14px;
+	}
+
+	.entry-heading {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		column-gap: 8px;
+	}
+
+	.entry-title {
+		margin: 0;
+		font-size: 20px;
+		font-weight: 500;
+	}
+
+	.entry-meta {
+		font-size: 14px;
+		color: var(--color-text-muted);
+		white-space: nowrap;
+	}
+
+	.entry-description {
+		margin: 0;
+		max-width: 640px;
+	}
+
+	.entry-footer {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 8px;
+	}
+
+	@media (min-width: 768px) {
+		.entry {
+			padding: 32px;
+		}
+	}
+</style>

package/dist/components/entry/Entry.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** Rendered as an `<h3>`. */
+    title: string;
+    /** Muted text next to the title, e.g. a period like "2021 - 2025". */
+    meta?: string;
+    /** The description. */
+    children?: Snippet;
+    /** Below the description, e.g. a Link. */
+    footer?: Snippet;
+};
+declare const Entry: import("svelte").Component<Props, {}, "">;
+type Entry = ReturnType<typeof Entry>;
+export default Entry;

package/dist/components/footer/Footer.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+		/** Message in the panel, rendered as an `<h2>`; `\n` breaks the line. */
+		title?: string;
+		/** Owner shown below the panel as "© <current year> <copyright>". */
+		copyright?: string;
+		/** FooterColumns. */
+		children?: Snippet;
+	};
+
+	let { title, copyright, class: className, children, ...rest }: Props = $props();
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer {...rest} class={['footer', className]}>
+	<div class="footer-panel">
+		{#if title}
+			<h2 class="footer-title">{title}</h2>
+		{/if}
+		{#if children}
+			<div class="footer-columns">{@render children()}</div>
+		{/if}
+	</div>
+	{#if copyright}
+		<p class="footer-copyright">© {year} {copyright}</p>
+	{/if}
+</footer>
+
+<style>
+	.footer {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		font-size: 14px;
+	}
+
+	.footer-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		box-sizing: border-box;
+		min-height: 256px;
+		padding: 40px;
+		color: #fff;
+		background-color: #000;
+		border-radius: 14px;
+	}
+
+	.footer-title {
+		margin: 0;
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 1.25;
+		white-space: pre-line;
+		user-select: none;
+	}
+
+	.footer-columns {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+	}
+
+	.footer-copyright {
+		margin: 0;
+		text-align: center;
+		color: var(--color-text-muted);
+		user-select: none;
+	}
+
+	@media (min-width: 640px) {
+		.footer-panel {
+			flex-direction: row;
+		}
+
+		.footer-title {
+			flex: 1;
+		}
+
+		.footer-columns {
+			flex: 1;
+			flex-direction: row;
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /** Message in the panel, rendered as an `<h2>`; `\n` breaks the line. */
+    title?: string;
+    /** Owner shown below the panel as "© <current year> <copyright>". */
+    copyright?: string;
+    /** FooterColumns. */
+    children?: Snippet;
+};
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

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;