@noahbaumgartner/svelte-ui 0.0.7 → 0.0.8

package/dist/components/table-of-contents/TableOfContents.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import ChevronDown from '../../internal/icons/ChevronDown.svelte';
+
+	let {
+		container,
+		variant = 'sidebar'
+	}: {
+		container: HTMLElement | undefined;
+		variant?: 'sidebar' | 'mobile';
+	} = $props();
+
+	type TocItem = { id: string; text: string; level: number };
+
+	let items: TocItem[] = $state([]);
+	let activeId: string | null = $state(null);
+	let expanded = $state(false);
+
+	let activeItem = $derived(items.find((item) => item.id === activeId) ?? items[0]);
+
+	function slugify(text: string) {
+		return text
+			.toLowerCase()
+			.trim()
+			.replace(/[äáàâ]/g, 'a')
+			.replace(/[öóòô]/g, 'o')
+			.replace(/[üúùû]/g, 'u')
+			.replace(/ß/g, 'ss')
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '');
+	}
+
+	$effect(() => {
+		if (!container) return;
+
+		const headings = Array.from(container.querySelectorAll('h1, h2')) as HTMLElement[];
+		const usedIds = new SvelteSet<string>();
+
+		items = headings.map((heading) => {
+			if (!heading.id) {
+				let id = slugify(heading.textContent ?? '');
+				let unique = id;
+				let i = 2;
+				while (usedIds.has(unique)) {
+					unique = `${id}-${i}`;
+					i++;
+				}
+				heading.id = unique;
+			}
+			usedIds.add(heading.id);
+			return {
+				id: heading.id,
+				text: heading.textContent ?? '',
+				level: heading.tagName === 'H1' ? 1 : 2
+			};
+		});
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						activeId = (entry.target as HTMLElement).id;
+						break;
+					}
+				}
+			},
+			{ rootMargin: '0px 0px -70% 0px', threshold: 0 }
+		);
+
+		headings.forEach((heading) => observer.observe(heading));
+
+		return () => observer.disconnect();
+	});
+
+	const scrollOffset = $derived(variant === 'mobile' ? 130 : 64);
+
+	async function handleClick(event: MouseEvent, id: string) {
+		event.preventDefault();
+		expanded = false;
+		// Wait for the mobile panel's collapse to actually reach the DOM before
+		// measuring the heading position, otherwise the still-expanded panel's
+		// extra height gets baked into the scroll target and it overshoots.
+		await tick();
+		const target = document.getElementById(id);
+		if (!target) return;
+		const top = target.getBoundingClientRect().top + window.scrollY - scrollOffset;
+
+		// Mobile Safari can silently drop a new smooth scroll if one is still
+		// animating, so snap to the current position first to clear it before
+		// requesting the next smooth scroll on the following frame.
+		window.scrollTo({ top: window.scrollY, behavior: 'instant' });
+		requestAnimationFrame(() => {
+			window.scrollTo({ top, behavior: 'smooth' });
+		});
+
+		history.replaceState(null, '', `#${id}`);
+	}
+</script>
+
+{#if items.length > 0}
+	{#if variant === 'mobile'}
+		<div class="toc-mobile">
+			{#if expanded}
+				<div class="toc-mobile-trigger">
+					<a
+						href="#{items[0].id}"
+						class="toc-item toc-mobile-title"
+						class:toc-item--sub={items[0].level === 2}
+						class:toc-item--active={activeId === items[0].id}
+						onclick={(event) => handleClick(event, items[0].id)}
+					>
+						{items[0].text}
+					</a>
+					<button
+						type="button"
+						class="toc-mobile-chevron-btn"
+						onclick={() => (expanded = !expanded)}
+						aria-expanded={expanded}
+						aria-label="Inhaltsverzeichnis einklappen"
+					>
+						<ChevronDown class="toc-mobile-chevron" style="transform: rotate(180deg)" />
+					</button>
+				</div>
+			{:else}
+				<button
+					type="button"
+					class="toc-mobile-trigger"
+					onclick={() => (expanded = !expanded)}
+					aria-expanded={expanded}
+					aria-label="Inhaltsverzeichnis ausklappen"
+				>
+					<span class="toc-mobile-title">{activeItem?.text}</span>
+					<ChevronDown class="toc-mobile-chevron" />
+				</button>
+			{/if}
+
+			{#if expanded}
+				<nav class="toc-mobile-panel" aria-label="Inhaltsverzeichnis">
+					{#each items.slice(1) as item (item.id)}
+						<a
+							href="#{item.id}"
+							class="toc-item"
+							class:toc-item--sub={item.level === 2}
+							class:toc-item--active={activeId === item.id}
+							onclick={(event) => handleClick(event, item.id)}
+						>
+							{item.text}
+						</a>
+					{/each}
+				</nav>
+			{/if}
+		</div>
+	{:else}
+		<nav class="toc" aria-label="Inhaltsverzeichnis">
+			{#each items as item (item.id)}
+				<a
+					href="#{item.id}"
+					class="toc-item"
+					class:toc-item--sub={item.level === 2}
+					class:toc-item--active={activeId === item.id}
+					onclick={(event) => handleClick(event, item.id)}
+				>
+					{item.text}
+				</a>
+			{/each}
+		</nav>
+	{/if}
+{/if}
+
+<style>
+	.toc {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		user-select: none;
+	}
+
+	.toc-item {
+		font-size: 12px;
+		color: var(--color-text-muted);
+		text-decoration: none;
+		line-height: 1.4;
+		border-radius: 4px;
+		outline: none;
+		transition: color 150ms ease;
+	}
+
+	.toc-item:hover {
+		color: var(--color-text);
+	}
+
+	.toc-item:focus-visible {
+		outline: 2px solid var(--color-ink);
+		outline-offset: 2px;
+	}
+
+	.toc-item--sub {
+		padding-left: 16px;
+	}
+
+	.toc-item--active {
+		color: var(--color-text);
+		font-weight: 600;
+	}
+
+	.toc-mobile {
+		background-color: var(--color-bg);
+		border-bottom: 1px solid var(--color-border);
+		user-select: none;
+	}
+
+	.toc-mobile-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		width: 100%;
+		padding: 14px 24px;
+		font-size: 14px;
+	}
+
+	button.toc-mobile-trigger {
+		background-color: transparent;
+		border: none;
+		font: inherit;
+		font-size: 14px;
+		color: var(--color-text);
+		text-align: left;
+		outline: none;
+		cursor: pointer;
+	}
+
+	button.toc-mobile-trigger:focus-visible {
+		outline: 2px solid var(--color-ink);
+		outline-offset: -2px;
+	}
+
+	.toc-mobile-title {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	a.toc-mobile-title {
+		font-size: 14px;
+	}
+
+	span.toc-mobile-title {
+		color: var(--color-text);
+	}
+
+	.toc-mobile-chevron-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		padding: 0;
+		background-color: transparent;
+		border: none;
+		border-radius: 4px;
+		color: var(--color-text);
+		outline: none;
+		cursor: pointer;
+	}
+
+	.toc-mobile-chevron-btn:focus-visible {
+		outline: 2px solid var(--color-ink);
+		outline-offset: 2px;
+	}
+
+	.toc-mobile-trigger :global(.toc-mobile-chevron) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		transition: transform 200ms ease;
+	}
+
+	.toc-mobile-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 4px 24px 20px;
+	}
+
+	.toc-mobile-panel .toc-item {
+		font-size: 14px;
+	}
+
+	@media (min-width: 640px) {
+		.toc-mobile {
+			display: none;
+		}
+	}
+</style>

package/dist/components/table-of-contents/TableOfContents.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    container: HTMLElement | undefined;
+    variant?: 'sidebar' | 'mobile';
+};
+declare const TableOfContents: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

package/dist/components/theme-toggle/ThemeToggle.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Sun from '../../internal/icons/Sun.svelte';
+	import Moon from '../../internal/icons/Moon.svelte';
+	import Button from '../button/Button.svelte';
+
+	type Theme = 'light' | 'dark';
+
+	/** Accessible name of the button for each current theme; the click switches to the other one. */
+	let {
+		labels = { light: 'Theme: Light', dark: 'Theme: Dark' }
+	}: { labels?: Record<Theme, string> } = $props();
+
+	let theme: Theme = $state('light');
+
+	const icons = { light: Sun, dark: Moon };
+
+	onMount(() => {
+		const query = window.matchMedia('(prefers-color-scheme: dark)');
+		const systemTheme = (): Theme => (query.matches ? 'dark' : 'light');
+
+		const stored = localStorage.getItem('theme');
+		theme = stored === 'light' || stored === 'dark' ? stored : systemTheme();
+
+		// Without an explicit choice the toggle keeps following the system.
+		const onSystemChange = () => {
+			if (!localStorage.getItem('theme')) theme = systemTheme();
+		};
+		query.addEventListener('change', onSystemChange);
+		return () => query.removeEventListener('change', onSystemChange);
+	});
+
+	function toggle() {
+		theme = theme === 'light' ? 'dark' : 'light';
+		document.documentElement.dataset.theme = theme;
+		localStorage.setItem('theme', theme);
+	}
+</script>
+
+<Button variant="ghost" size="lg" icon={icons[theme]} label={labels[theme]} onclick={toggle} />

package/dist/components/theme-toggle/ThemeToggle.svelte.d.ts

@@ -0,0 +1,7 @@
+type Theme = 'light' | 'dark';
+type $$ComponentProps = {
+    labels?: Record<Theme, string>;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/timeline/Timeline.svelte

@@ -0,0 +1,122 @@
+<script module lang="ts">
+	export type TimelineItem = {
+		/** Muted text left of the item, e.g. "2021 - 2025". */
+		period: string;
+		/** Rendered as an `<h3>`. */
+		title: string;
+		/** Muted line below the title, e.g. a company or institution. */
+		subtitle?: string;
+		/** Turns the subtitle into a Link. */
+		href?: string;
+		description?: string;
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Link from '../link/Link.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+		/** Rendered as an `<h2>` next to the list. */
+		title?: string;
+		items: TimelineItem[];
+		ref?: HTMLElement | null;
+	};
+
+	let { title, items, class: className, ref = $bindable(null), ...rest }: Props = $props();
+</script>
+
+<section {...rest} bind:this={ref} class={['timeline', className]}>
+	{#if title}
+		<h2 class="timeline-title">{title}</h2>
+	{/if}
+	<ol class="timeline-list">
+		{#each items as item (item.title + item.period)}
+			<li class="timeline-item">
+				<span class="timeline-period">{item.period}</span>
+				<div class="timeline-body">
+					<h3 class="timeline-item-title">{item.title}</h3>
+					{#if item.subtitle}
+						<p class="timeline-subtitle">
+							{#if item.href}
+								<Link href={item.href}>{item.subtitle}</Link>
+							{:else}
+								{item.subtitle}
+							{/if}
+						</p>
+					{/if}
+					{#if item.description}
+						<p class="timeline-description">{item.description}</p>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ol>
+</section>
+
+<style>
+	.timeline {
+		display: grid;
+		gap: 32px;
+	}
+
+	.timeline-title {
+		font-size: clamp(24px, 2vw + 16px, 32px);
+		font-weight: 500;
+		letter-spacing: -0.01em;
+	}
+
+	.timeline-list {
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.timeline-item {
+		display: grid;
+		gap: 8px;
+		padding-block: 24px;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.timeline-period {
+		font-size: 14px;
+		color: var(--color-text-muted);
+	}
+
+	.timeline-body {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.timeline-item-title {
+		font-size: 20px;
+		font-weight: 500;
+	}
+
+	.timeline-subtitle {
+		font-size: 15px;
+		color: var(--color-text-muted);
+	}
+
+	.timeline-description {
+		margin-top: 8px;
+		max-width: 640px;
+	}
+
+	@media (min-width: 768px) {
+		.timeline {
+			grid-template-columns: 1fr 2fr;
+			gap: 64px;
+		}
+
+		.timeline-item {
+			grid-template-columns: 180px 1fr;
+			gap: 32px;
+			padding-block: 32px;
+		}
+
+		.timeline-period {
+			padding-top: 4px;
+		}
+	}
+</style>

package/dist/components/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,21 @@
+export type TimelineItem = {
+    /** Muted text left of the item, e.g. "2021 - 2025". */
+    period: string;
+    /** Rendered as an `<h3>`. */
+    title: string;
+    /** Muted line below the title, e.g. a company or institution. */
+    subtitle?: string;
+    /** Turns the subtitle into a Link. */
+    href?: string;
+    description?: string;
+};
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    /** Rendered as an `<h2>` next to the list. */
+    title?: string;
+    items: TimelineItem[];
+    ref?: HTMLElement | null;
+};
+declare const Timeline: import("svelte").Component<Props, {}, "ref">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/icon.d.ts

@@ -1,12 +1,12 @@
-import type { Component } from 'svelte';
+import type { LucideIcon, LucideProps } from '@lucide/svelte';
+export type { LucideProps as IconProps };
 /**
- * A Svelte component that renders an icon, from any icon library
- * (`@lucide/svelte`, `phosphor-svelte`, an inline SVG component, …).
+ * A Svelte component that renders an icon and takes the props of a Lucide icon
+ * (`size`, `strokeWidth`, `class`, `aria-hidden`, …). Any `@lucide/svelte` icon
+ * qualifies, as does an inline SVG component typed with `IconProps` (see
+ * `icons/`).
  *
  * Components only pass `class` and `aria-hidden`; the size comes from CSS, so
  * the icon should fill its box (`width`/`height: 1em` or a fixed size is fine).
  */
-export type IconComponent = Component<{
-    class?: string;
-    'aria-hidden'?: boolean | 'true' | 'false';
-}>;
+export type IconComponent = LucideIcon;

package/dist/icons/GithubIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { IconProps } from '../icon.js';
+
+	// Lucide dropped its brand icons in v1, so the GitHub mark lives here. It
+	// takes the same props as a Lucide icon so it can be passed as `icon`.
+	let { size = 24, strokeWidth = 2, class: className, ...rest }: IconProps = $props();
+</script>
+
+<svg
+	{...rest}
+	class={className}
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width={strokeWidth}
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path
+		d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+	/>
+	<path d="M9 18c-4.51 2-5-2-7-2" />
+</svg>

package/dist/icons/GithubIcon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from '../icon.js';
+declare const GithubIcon: import("svelte").Component<IconProps, {}, "">;
+type GithubIcon = ReturnType<typeof GithubIcon>;
+export default GithubIcon;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export type { IconComponent } from './icon.js';
+export type { IconComponent, IconProps } from './icon.js';
+export { default as GithubIcon } from './icons/GithubIcon.svelte';
 export { default as Accordion } from './components/accordion/Accordion.svelte';
 export { default as AccordionItem } from './components/accordion/AccordionItem.svelte';
 export { default as AlertDialog } from './components/alert-dialog/AlertDialog.svelte';
@@ -28,7 +29,6 @@ export { default as ContextMenuInfo } from './components/context-menu/ContextMen
 export { default as Dialog } from './components/dialog/Dialog.svelte';
 export { default as Drawer } from './components/drawer/Drawer.svelte';
 export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
-export { default as Entry } from './components/entry/Entry.svelte';
 export { default as Field } from './components/field/Field.svelte';
 export { default as FieldContent } from './components/field/FieldContent.svelte';
 export { default as FieldDescription } from './components/field/FieldDescription.svelte';
@@ -41,18 +41,21 @@ export { default as Footer } from './components/footer/Footer.svelte';
 export { default as FooterColumn } from './components/footer/FooterColumn.svelte';
 export { default as Image } from './components/image/Image.svelte';
 export { default as Input } from './components/input/Input.svelte';
+export { default as Lightbox } from './components/lightbox/Lightbox.svelte';
 export { default as Kbd } from './components/kbd/Kbd.svelte';
 export { default as KbdGroup } from './components/kbd/KbdGroup.svelte';
 export { default as InputGroup } from './components/input-group/InputGroup.svelte';
 export { default as InputGroupAddon } from './components/input-group/InputGroupAddon.svelte';
 export { default as Label } from './components/label/Label.svelte';
 export { default as Link } from './components/link/Link.svelte';
+export { default as MediaPreview } from './components/media-preview/MediaPreview.svelte';
 export { default as MeshGradient } from './components/mesh-gradient/MeshGradient.svelte';
 export { default as Navbar } from './components/navbar/Navbar.svelte';
 export { default as NavigationMenu } from './components/navigation-menu/NavigationMenu.svelte';
 export { default as NavigationMenuItem } from './components/navigation-menu/NavigationMenuItem.svelte';
 export { default as NavigationMenuLink } from './components/navigation-menu/NavigationMenuLink.svelte';
 export { default as NumberStepper } from './components/number-stepper/NumberStepper.svelte';
+export { default as PageHeader } from './components/page-header/PageHeader.svelte';
 export { default as Popover } from './components/popover/Popover.svelte';
 export { default as PreviewCard } from './components/preview-card/PreviewCard.svelte';
 export { default as Progress } from './components/progress/Progress.svelte';
@@ -77,10 +80,13 @@ export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
 export { default as Spinner } from './components/spinner/Spinner.svelte';
 export { default as Switch } from './components/switch/Switch.svelte';
 export { default as Table, type TableColumn, type TableSort, type TableSortValue } from './components/table/Table.svelte';
+export { default as TableOfContents } from './components/table-of-contents/TableOfContents.svelte';
 export { default as Tabs, type TabsOption } from './components/tabs/Tabs.svelte';
 export { default as Textarea } from './components/textarea/Textarea.svelte';
 export { default as Toaster } from './components/toaster/Toaster.svelte';
 export { toast, type ToastOptions, type ToastAction } from './components/toaster/toast.svelte.js';
+export { default as ThemeToggle } from './components/theme-toggle/ThemeToggle.svelte';
+export { default as Timeline, type TimelineItem } from './components/timeline/Timeline.svelte';
 export { default as Toggle } from './components/toggle/Toggle.svelte';
 export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
 export { default as TimePicker } from './components/time-picker/TimePicker.svelte';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { default as GithubIcon } from './icons/GithubIcon.svelte';
 export { default as Accordion } from './components/accordion/Accordion.svelte';
 export { default as AccordionItem } from './components/accordion/AccordionItem.svelte';
 export { default as AlertDialog } from './components/alert-dialog/AlertDialog.svelte';
@@ -27,7 +28,6 @@ export { default as ContextMenuInfo } from './components/context-menu/ContextMen
 export { default as Dialog } from './components/dialog/Dialog.svelte';
 export { default as Drawer } from './components/drawer/Drawer.svelte';
 export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
-export { default as Entry } from './components/entry/Entry.svelte';
 export { default as Field } from './components/field/Field.svelte';
 export { default as FieldContent } from './components/field/FieldContent.svelte';
 export { default as FieldDescription } from './components/field/FieldDescription.svelte';
@@ -40,18 +40,21 @@ export { default as Footer } from './components/footer/Footer.svelte';
 export { default as FooterColumn } from './components/footer/FooterColumn.svelte';
 export { default as Image } from './components/image/Image.svelte';
 export { default as Input } from './components/input/Input.svelte';
+export { default as Lightbox } from './components/lightbox/Lightbox.svelte';
 export { default as Kbd } from './components/kbd/Kbd.svelte';
 export { default as KbdGroup } from './components/kbd/KbdGroup.svelte';
 export { default as InputGroup } from './components/input-group/InputGroup.svelte';
 export { default as InputGroupAddon } from './components/input-group/InputGroupAddon.svelte';
 export { default as Label } from './components/label/Label.svelte';
 export { default as Link } from './components/link/Link.svelte';
+export { default as MediaPreview } from './components/media-preview/MediaPreview.svelte';
 export { default as MeshGradient } from './components/mesh-gradient/MeshGradient.svelte';
 export { default as Navbar } from './components/navbar/Navbar.svelte';
 export { default as NavigationMenu } from './components/navigation-menu/NavigationMenu.svelte';
 export { default as NavigationMenuItem } from './components/navigation-menu/NavigationMenuItem.svelte';
 export { default as NavigationMenuLink } from './components/navigation-menu/NavigationMenuLink.svelte';
 export { default as NumberStepper } from './components/number-stepper/NumberStepper.svelte';
+export { default as PageHeader } from './components/page-header/PageHeader.svelte';
 export { default as Popover } from './components/popover/Popover.svelte';
 export { default as PreviewCard } from './components/preview-card/PreviewCard.svelte';
 export { default as Progress } from './components/progress/Progress.svelte';
@@ -75,10 +78,13 @@ export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
 export { default as Spinner } from './components/spinner/Spinner.svelte';
 export { default as Switch } from './components/switch/Switch.svelte';
 export { default as Table } from './components/table/Table.svelte';
+export { default as TableOfContents } from './components/table-of-contents/TableOfContents.svelte';
 export { default as Tabs } from './components/tabs/Tabs.svelte';
 export { default as Textarea } from './components/textarea/Textarea.svelte';
 export { default as Toaster } from './components/toaster/Toaster.svelte';
 export { toast } from './components/toaster/toast.svelte.js';
+export { default as ThemeToggle } from './components/theme-toggle/ThemeToggle.svelte';
+export { default as Timeline } from './components/timeline/Timeline.svelte';
 export { default as Toggle } from './components/toggle/Toggle.svelte';
 export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
 export { default as TimePicker } from './components/time-picker/TimePicker.svelte';

package/dist/internal/icons/Monitor.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['rect', { width: 20, height: 14, x: 2, y: 3, rx: 2 }],
+		['line', { x1: 8, x2: 16, y1: 21, y2: 21 }],
+		['line', { x1: 12, x2: 12, y1: 17, y2: 21 }]
+	]}
+/>

package/dist/internal/icons/Monitor.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Monitor: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Monitor = ReturnType<typeof Monitor>;
+export default Monitor;