@noahbaumgartner/svelte-ui 0.0.7 → 0.0.9

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;

package/dist/internal/icons/Moon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		[
+			'path',
+			{
+				d: 'M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'
+			}
+		]
+	]}
+/>

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

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

package/dist/internal/icons/Pause.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['rect', { x: 14, y: 3, width: 5, height: 18, rx: 1 }],
+		['rect', { x: 5, y: 3, width: 5, height: 18, rx: 1 }]
+	]}
+/>

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

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

package/dist/internal/icons/Play.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		[
+			'path',
+			{ d: 'M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z' }
+		]
+	]}
+/>

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

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

package/dist/internal/icons/Sun.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['circle', { cx: 12, cy: 12, r: 4 }],
+		['path', { d: 'M12 2v2' }],
+		['path', { d: 'M12 20v2' }],
+		['path', { d: 'm4.93 4.93 1.41 1.41' }],
+		['path', { d: 'm17.66 17.66 1.41 1.41' }],
+		['path', { d: 'M2 12h2' }],
+		['path', { d: 'M20 12h2' }],
+		['path', { d: 'm6.34 17.66-1.41 1.41' }],
+		['path', { d: 'm19.07 4.93-1.41 1.41' }]
+	]}
+/>

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

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

package/dist/styles/tokens.css

@@ -45,4 +45,11 @@
 		color-scheme: dark;
 		--color-destructive: #f87171;
 	}
+
+	/* Page-coloured track, light handle. Standard properties let macOS draw its
+	   rounded overlay scrollbar, which only shows while scrolling. */
+	:root {
+		scrollbar-width: auto;
+		scrollbar-color: color-mix(in srgb, var(--ui-base), var(--ui-ink) 40%) var(--color-bg);
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@noahbaumgartner/svelte-ui",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"license": "MIT",
 	"author": "Noah Baumgartner",
 	"repository": {
@@ -41,12 +41,14 @@
 		},
 		"./tokens.css": "./dist/styles/tokens.css"
 	},
+	"dependencies": {
+		"@lucide/svelte": "^1.47.0"
+	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@lucide/svelte": "^1.47.0",
 		"@storybook/addon-a11y": "^10.6.0",
 		"@storybook/addon-docs": "^10.6.0",
 		"@storybook/addon-svelte-csf": "latest",

package/dist/components/entry/Entry.svelte

@@ -1,94 +0,0 @@
-<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;
-		ref?: HTMLDivElement | null;
-	};
-
-	let {
-		title,
-		meta,
-		class: className,
-		children,
-		footer,
-		ref = $bindable(null),
-		...rest
-	}: Props = $props();
-</script>
-
-<div {...rest} bind:this={ref} 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>
-	@layer svelte-ui {
-		.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: 10px;
-		}
-
-		.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

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