@noahbaumgartner/svelte-ui 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.17.1 create --template library --types ts --add storybook vitest="usages:unit,component" eslint prettier --install npm svelte-ui
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/components/alert-dialog/AlertDialog.svelte

@@ -0,0 +1,161 @@
+<script module lang="ts">
+	export type AlertDialogTriggerProps = {
+		onclick: () => void;
+		'aria-haspopup': 'dialog';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		/** Whether the dialog is open. Bindable. Escape closes it. */
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. Omit to control `open` yourself. */
+		trigger?: Snippet<[AlertDialogTriggerProps]>;
+		/** The Buttons, primary first and least destructive last; the last one gets the focus on open. Call `close` to close the dialog. */
+		actions: Snippet<[close: () => void]>;
+		/** Extra content between the description and the buttons. */
+		children?: Snippet;
+	};
+
+	let { open = $bindable(false), title, description, trigger, actions, children }: Props = $props();
+
+	const id = $props.id();
+	let dialogEl: HTMLDialogElement;
+
+	const triggerProps: AlertDialogTriggerProps = {
+		onclick: () => (open = true),
+		'aria-haspopup': 'dialog'
+	};
+
+	function close() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (open && !dialogEl.open) {
+			dialogEl.showModal();
+			Array.from(dialogEl.querySelectorAll<HTMLElement>('.alert-dialog-actions :is(button, a)'))
+				.at(-1)
+				?.focus();
+		} else if (!open && dialogEl.open) {
+			dialogEl.close();
+		}
+	});
+</script>
+
+{@render trigger?.(triggerProps)}
+
+<dialog
+	bind:this={dialogEl}
+	role="alertdialog"
+	aria-labelledby="{id}-title"
+	aria-describedby={description ? `${id}-description` : undefined}
+	class="alert-dialog"
+	onkeydown={(event) => {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		close();
+	}}
+	oncancel={(event) => {
+		event.preventDefault();
+		close();
+	}}
+	onclose={() => (open = false)}
+>
+	<h2 id="{id}-title" class="alert-dialog-title">{title}</h2>
+	{#if description}
+		<p id="{id}-description" class="alert-dialog-description">{description}</p>
+	{/if}
+	{#if children}
+		<div class="alert-dialog-body">{@render children()}</div>
+	{/if}
+	<div class="alert-dialog-actions">
+		{@render actions(close)}
+	</div>
+</dialog>
+
+<style>
+	/* Locks page scrolling while open; the gutter keeps the layout from shifting */
+	:global(html:has(.alert-dialog[open])) {
+		overflow: hidden;
+		scrollbar-gutter: stable;
+	}
+
+	.alert-dialog {
+		box-sizing: border-box;
+		width: calc(100% - 32px);
+		max-width: 420px;
+		padding: 20px;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 14px;
+		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
+		outline: none;
+		opacity: 0;
+		scale: 0.95;
+		transition:
+			opacity 140ms ease,
+			scale 140ms ease,
+			display 140ms allow-discrete,
+			overlay 140ms allow-discrete;
+	}
+
+	.alert-dialog[open] {
+		opacity: 1;
+		scale: 1;
+	}
+
+	.alert-dialog::backdrop {
+		background-color: rgba(0, 0, 0, 0);
+		transition:
+			background-color 140ms ease,
+			display 140ms allow-discrete,
+			overlay 140ms allow-discrete;
+	}
+
+	.alert-dialog[open]::backdrop {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	@starting-style {
+		.alert-dialog[open] {
+			opacity: 0;
+			scale: 0.95;
+		}
+
+		.alert-dialog[open]::backdrop {
+			background-color: rgba(0, 0, 0, 0);
+		}
+	}
+
+	.alert-dialog-title {
+		margin: 0;
+		font-size: 15px;
+		font-weight: 600;
+	}
+
+	.alert-dialog-description {
+		margin: 6px 0 0;
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--color-text-muted);
+	}
+
+	.alert-dialog-body {
+		margin-top: 16px;
+		font-size: 13px;
+	}
+
+	.alert-dialog-actions {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 4px;
+		margin-top: 20px;
+	}
+</style>

package/dist/components/alert-dialog/AlertDialog.svelte.d.ts

@@ -0,0 +1,20 @@
+export type AlertDialogTriggerProps = {
+    onclick: () => void;
+    'aria-haspopup': 'dialog';
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether the dialog is open. Bindable. Escape closes it. */
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. Omit to control `open` yourself. */
+    trigger?: Snippet<[AlertDialogTriggerProps]>;
+    /** The Buttons, primary first and least destructive last; the last one gets the focus on open. Call `close` to close the dialog. */
+    actions: Snippet<[close: () => void]>;
+    /** Extra content between the description and the buttons. */
+    children?: Snippet;
+};
+declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { User } from '@lucide/svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		src?: string;
+		/** Describes the person; also the accessible name when the fallback is shown. */
+		alt: string;
+		/** Shown when there is no `src` or the image fails to load, e.g. initials. Defaults to a user icon. */
+		fallback?: string;
+		size?: 'sm' | 'md' | 'lg';
+	};
+
+	let { src, alt, fallback, size = 'md', class: className, ...rest }: Props = $props();
+
+	let failedSrc = $state<string>();
+</script>
+
+<span {...rest} class={['avatar', `avatar--${size}`, className]}>
+	{#if src && src !== failedSrc}
+		<img class="avatar-image" {src} {alt} onerror={() => (failedSrc = src)} />
+	{:else}
+		<span class="avatar-fallback" role="img" aria-label={alt}>
+			{#if fallback}
+				{fallback}
+			{:else}
+				<User class="avatar-icon" aria-hidden="true" />
+			{/if}
+		</span>
+	{/if}
+</span>
+
+<style>
+	.avatar {
+		display: inline-flex;
+		flex-shrink: 0;
+		overflow: hidden;
+		background-color: var(--color-surface);
+		color: var(--color-text-secondary);
+		user-select: none;
+	}
+
+	.avatar--sm {
+		width: 24px;
+		height: 24px;
+		border-radius: 8px;
+		font-size: 10px;
+	}
+
+	.avatar--md {
+		width: 32px;
+		height: 32px;
+		border-radius: 10px;
+		font-size: 12px;
+	}
+
+	.avatar--lg {
+		width: 40px;
+		height: 40px;
+		border-radius: 12px;
+		font-size: 14px;
+	}
+
+	.avatar-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.avatar-fallback {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		font-family: inherit;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
+
+	.avatar-fallback :global(.avatar-icon) {
+		width: 60%;
+		height: 60%;
+	}
+</style>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    src?: string;
+    /** Describes the person; also the accessible name when the fallback is shown. */
+    alt: string;
+    /** Shown when there is no `src` or the image fails to load, e.g. initials. Defaults to a user icon. */
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { LucideIcon } from '@lucide/svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		variant?: 'primary' | 'secondary';
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		children: Snippet;
+	};
+
+	let { variant = 'secondary', icon: Icon, class: className, children, ...rest }: Props = $props();
+</script>
+
+<span {...rest} class={['badge', `badge--${variant}`, className]}>
+	{#if Icon}<Icon class="badge-icon" aria-hidden="true" />{/if}
+	{@render children()}
+</span>
+
+<style>
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		width: fit-content;
+		padding: 2px 8px;
+		font-family: inherit;
+		font-size: 12px;
+		border-radius: 6px;
+		user-select: none;
+	}
+
+	.badge--primary {
+		background-color: var(--color-accent);
+		color: var(--color-accent-foreground);
+	}
+
+	.badge--secondary {
+		background-color: var(--color-surface);
+		color: var(--color-text);
+	}
+
+	.badge :global(.badge-icon) {
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/badge/Badge.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    variant?: 'primary' | 'secondary';
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    children: Snippet;
+};
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** `BreadcrumbItem`s and `BreadcrumbEllipsis`es. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<nav aria-label="Breadcrumb" {...rest} class={['breadcrumb', className]}>
+	<ol class="breadcrumb-list">
+		{@render children()}
+	</ol>
+</nav>
+
+<style>
+	.breadcrumb-list {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: 13px;
+		color: var(--color-text-muted);
+		overflow-wrap: anywhere;
+	}
+
+	/* Each item renders its own trailing separator; the last one has nothing to separate */
+	.breadcrumb-list :global(.breadcrumb-separator:last-child) {
+		display: none;
+	}
+</style>

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** `BreadcrumbItem`s and `BreadcrumbEllipsis`es. */
+    children: Snippet;
+};
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/BreadcrumbEllipsis.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import Button from '../button/Button.svelte';
+	import ContextMenu from '../context-menu/ContextMenu.svelte';
+	import BreadcrumbSeparator from './BreadcrumbSeparator.svelte';
+
+	type Props = {
+		/** Accessible name of the menu trigger. */
+		label?: string;
+		/** `ContextMenuItem`s for the collapsed items. */
+		children: Snippet;
+	};
+
+	let { label = 'More', children }: Props = $props();
+</script>
+
+<li class="breadcrumb-ellipsis">
+	<ContextMenu>
+		{#snippet trigger(props)}
+			<Button {...props} variant="ghost" size="sm" icon={Ellipsis} {label} />
+		{/snippet}
+		{@render children()}
+	</ContextMenu>
+</li>
+<BreadcrumbSeparator />
+
+<style>
+	.breadcrumb-ellipsis {
+		display: inline-flex;
+	}
+</style>

package/dist/components/breadcrumb/BreadcrumbEllipsis.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Accessible name of the menu trigger. */
+    label?: string;
+    /** `ContextMenuItem`s for the collapsed items. */
+    children: Snippet;
+};
+declare const BreadcrumbEllipsis: import("svelte").Component<Props, {}, "">;
+type BreadcrumbEllipsis = ReturnType<typeof BreadcrumbEllipsis>;
+export default BreadcrumbEllipsis;

package/dist/components/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LucideIcon } from '@lucide/svelte';
+	import BreadcrumbSeparator from './BreadcrumbSeparator.svelte';
+
+	type Props = {
+		/** Links the item. Without it, the item is the current page. */
+		href?: string;
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		children: Snippet;
+	};
+
+	let { href, icon: Icon, children }: Props = $props();
+</script>
+
+{#snippet content()}
+	{#if Icon}<Icon class="breadcrumb-item-icon" aria-hidden="true" />{/if}
+	{@render children()}
+{/snippet}
+
+<li class="breadcrumb-item">
+	{#if href}
+		<!-- href comes from the consumer, who resolves it; this library has no routes -->
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a {href} class="breadcrumb-link">{@render content()}</a>
+	{:else}
+		<span aria-current="page" class="breadcrumb-page">{@render content()}</span>
+	{/if}
+</li>
+<BreadcrumbSeparator />
+
+<style>
+	.breadcrumb-item {
+		display: inline-flex;
+	}
+
+	.breadcrumb-link,
+	.breadcrumb-page {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.breadcrumb-link {
+		color: inherit;
+		text-decoration: none;
+		outline: none;
+		border-radius: 4px;
+		transition: color 200ms ease;
+	}
+
+	.breadcrumb-link:hover {
+		color: var(--color-text);
+	}
+
+	.breadcrumb-link:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.breadcrumb-page {
+		color: var(--color-text);
+	}
+
+	.breadcrumb-item :global(.breadcrumb-item-icon) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = {
+    /** Links the item. Without it, the item is the current page. */
+    href?: string;
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    children: Snippet;
+};
+declare const BreadcrumbItem: import("svelte").Component<Props, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/components/breadcrumb/BreadcrumbSeparator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+</script>
+
+<li role="presentation" aria-hidden="true" class="breadcrumb-separator">
+	<ChevronRight />
+</li>
+
+<style>
+	.breadcrumb-separator {
+		display: flex;
+	}
+
+	.breadcrumb-separator :global(svg) {
+		width: 14px;
+		height: 14px;
+	}
+</style>

package/dist/components/breadcrumb/BreadcrumbSeparator.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BreadcrumbSeparator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BreadcrumbSeparator = InstanceType<typeof BreadcrumbSeparator>;
+export default BreadcrumbSeparator;