@noahbaumgartner/svelte-ui 0.0.6 → 0.0.8

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.6",
+	"version": "0.0.8",
 	"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;