@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/sidebar/SidebarInset.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The page content next to the sidebar. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<main {...rest} class={['sidebar-inset', className]}>
+	{@render children()}
+</main>
+
+<style>
+	.sidebar-inset {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+		background-color: var(--color-bg);
+	}
+</style>

package/dist/components/sidebar/SidebarInset.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The page content next to the sidebar. */
+    children: Snippet;
+};
+declare const SidebarInset: import("svelte").Component<Props, {}, "">;
+type SidebarInset = ReturnType<typeof SidebarInset>;
+export default SidebarInset;

package/dist/components/sidebar/SidebarMenu.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+		/** `SidebarMenuItem`s. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ul {...rest} class={['sidebar-menu', className]}>
+	{@render children()}
+</ul>
+
+<style>
+	.sidebar-menu {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+</style>

package/dist/components/sidebar/SidebarMenu.svelte.d.ts

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

package/dist/components/sidebar/SidebarMenuItem.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import type { LucideIcon } from '@lucide/svelte';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import Button from '../button/Button.svelte';
+	import ContextMenu from '../context-menu/ContextMenu.svelte';
+
+	type Props = {
+		/** Links the item. Ignored when the item has `items`. */
+		href?: string;
+		/** Any Lucide icon (import from `svelte-ui/icons`). Stays visible when the sidebar is collapsed to icons. */
+		icon?: LucideIcon;
+		/** Marks the item as the current page. */
+		active?: boolean;
+		/** Short count or status at the end of the item, e.g. unread messages. */
+		badge?: string | number;
+		/** Nested `SidebarMenuItem`s, shown in a submenu the item toggles. */
+		items?: Snippet;
+		/** Whether the submenu is open. Bindable. */
+		expanded?: boolean;
+		/** `ContextMenuItem`s for a menu revealed on hover. */
+		menu?: Snippet;
+		onclick?: () => void;
+		children: Snippet;
+	};
+
+	let {
+		href,
+		icon: Icon,
+		active = false,
+		badge,
+		items,
+		expanded = $bindable(false),
+		menu,
+		onclick,
+		children
+	}: Props = $props();
+
+	const id = $props.id();
+	let classes = $derived(['sidebar-menu-button', { 'sidebar-menu-button--active': active }]);
+
+	function toggle() {
+		expanded = !expanded;
+		onclick?.();
+	}
+</script>
+
+{#snippet content()}
+	{#if Icon}<Icon class="sidebar-menu-item-icon" aria-hidden="true" />{/if}
+	<span class="sidebar-menu-item-label">{@render children()}</span>
+	{#if badge !== undefined}<span class="sidebar-menu-item-badge">{badge}</span>{/if}
+	{#if items}<ChevronRight class="sidebar-menu-item-chevron" aria-hidden="true" />{/if}
+{/snippet}
+
+<li class={['sidebar-menu-item', { 'sidebar-menu-item--has-menu': menu }]}>
+	{#if items}
+		<button
+			type="button"
+			aria-expanded={expanded}
+			aria-controls={expanded ? `${id}-items` : undefined}
+			class={classes}
+			onclick={toggle}
+		>
+			{@render content()}
+		</button>
+	{:else 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} aria-current={active ? 'page' : undefined} class={classes} {onclick}>
+			{@render content()}
+		</a>
+	{:else}
+		<button type="button" aria-current={active ? 'page' : undefined} class={classes} {onclick}>
+			{@render content()}
+		</button>
+	{/if}
+
+	{#if menu}
+		<div class="sidebar-menu-item-menu">
+			<ContextMenu align="end">
+				{#snippet trigger(props)}
+					<Button {...props} variant="ghost" size="sm" icon={Ellipsis} label="More" />
+				{/snippet}
+				{@render menu()}
+			</ContextMenu>
+		</div>
+	{/if}
+
+	{#if items && expanded}
+		<ul id="{id}-items" class="sidebar-menu-sub" transition:slide={{ duration: 200 }}>
+			{@render items()}
+		</ul>
+	{/if}
+</li>
+
+<style>
+	.sidebar-menu-item {
+		position: relative;
+		min-width: 0;
+	}
+
+	.sidebar-menu-button {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		height: 32px;
+		padding: 0 8px;
+		box-sizing: border-box;
+		overflow: hidden;
+		background-color: transparent;
+		border: none;
+		border-radius: 8px;
+		font: inherit;
+		font-size: 13px;
+		color: var(--color-text-secondary);
+		text-align: left;
+		text-decoration: none;
+		outline: none;
+		cursor: pointer;
+		transition:
+			background-color 150ms ease,
+			color 150ms ease,
+			width 200ms ease;
+	}
+
+	.sidebar-menu-button:hover {
+		background-color: var(--color-surface);
+		color: var(--color-text);
+	}
+
+	.sidebar-menu-button:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	.sidebar-menu-button--active {
+		background-color: var(--color-surface);
+		color: var(--color-text);
+		font-weight: 500;
+	}
+
+	.sidebar-menu-item--has-menu > .sidebar-menu-button {
+		padding-right: 36px;
+	}
+
+	.sidebar-menu-item :global(.sidebar-menu-item-icon) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	.sidebar-menu-item-label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.sidebar-menu-item-badge {
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-text-muted);
+	}
+
+	.sidebar-menu-item :global(.sidebar-menu-item-chevron) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		color: var(--color-text-muted);
+		transition: rotate 200ms ease;
+	}
+
+	.sidebar-menu-button[aria-expanded='true'] :global(.sidebar-menu-item-chevron) {
+		rotate: 90deg;
+	}
+
+	/* Menu trigger, shown while the item is hovered or the menu has focus */
+	.sidebar-menu-item-menu {
+		position: absolute;
+		top: 2px;
+		right: 2px;
+		opacity: 0;
+		transition: opacity 150ms ease;
+	}
+
+	.sidebar-menu-item:hover > .sidebar-menu-item-menu,
+	.sidebar-menu-item-menu:focus-within {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		.sidebar-menu-item-menu {
+			opacity: 1;
+		}
+	}
+
+	.sidebar-menu-sub {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 2px 0 2px 15px;
+		padding: 0 0 0 8px;
+		list-style: none;
+		border-left: 1px solid var(--color-border);
+	}
+
+	/* Collapsed to icons: a square button with the label clipped (it stays the accessible name) */
+	:global(.sidebar--collapsed-icon) .sidebar-menu-item .sidebar-menu-button {
+		width: 32px;
+		padding: 0 8px;
+	}
+
+	:global(.sidebar--collapsed-icon) .sidebar-menu-item-menu,
+	:global(.sidebar--collapsed-icon) .sidebar-menu-sub {
+		display: none;
+	}
+</style>

package/dist/components/sidebar/SidebarMenuItem.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = {
+    /** Links the item. Ignored when the item has `items`. */
+    href?: string;
+    /** Any Lucide icon (import from `svelte-ui/icons`). Stays visible when the sidebar is collapsed to icons. */
+    icon?: LucideIcon;
+    /** Marks the item as the current page. */
+    active?: boolean;
+    /** Short count or status at the end of the item, e.g. unread messages. */
+    badge?: string | number;
+    /** Nested `SidebarMenuItem`s, shown in a submenu the item toggles. */
+    items?: Snippet;
+    /** Whether the submenu is open. Bindable. */
+    expanded?: boolean;
+    /** `ContextMenuItem`s for a menu revealed on hover. */
+    menu?: Snippet;
+    onclick?: () => void;
+    children: Snippet;
+};
+declare const SidebarMenuItem: import("svelte").Component<Props, {}, "expanded">;
+type SidebarMenuItem = ReturnType<typeof SidebarMenuItem>;
+export default SidebarMenuItem;

package/dist/components/sidebar/SidebarProvider.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setSidebarContext } from './context.js';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Whether the sidebar is expanded on desktop. Bindable. */
+		open?: boolean;
+		/** A `Sidebar` and a `SidebarInset`. Size them with the `--sidebar-width`, `--sidebar-width-icon` and `--sidebar-height` custom properties. */
+		children: Snippet;
+	};
+
+	let { open = $bindable(true), class: className, children, ...rest }: Props = $props();
+
+	const id = $props.id();
+	let mobile = $state(false);
+	let openMobile = $state(false);
+
+	setSidebarContext({
+		id: `${id}-sidebar`,
+		get open() {
+			return open;
+		},
+		get mobile() {
+			return mobile;
+		},
+		get openMobile() {
+			return openMobile;
+		},
+		toggle: () => {
+			if (mobile) openMobile = !openMobile;
+			else open = !open;
+		},
+		closeMobile: () => (openMobile = false)
+	});
+
+	$effect(() => {
+		const query = window.matchMedia('(max-width: 767px)');
+		const update = () => {
+			mobile = query.matches;
+			openMobile = false;
+		};
+		update();
+		query.addEventListener('change', update);
+		return () => query.removeEventListener('change', update);
+	});
+</script>
+
+<div {...rest} class={['sidebar-provider', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.sidebar-provider {
+		--sidebar-width: 256px;
+		--sidebar-width-icon: 48px;
+		--sidebar-height: 100svh;
+		display: flex;
+		width: 100%;
+		min-height: var(--sidebar-height);
+	}
+</style>

package/dist/components/sidebar/SidebarProvider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Whether the sidebar is expanded on desktop. Bindable. */
+    open?: boolean;
+    /** A `Sidebar` and a `SidebarInset`. Size them with the `--sidebar-width`, `--sidebar-width-icon` and `--sidebar-height` custom properties. */
+    children: Snippet;
+};
+declare const SidebarProvider: import("svelte").Component<Props, {}, "open">;
+type SidebarProvider = ReturnType<typeof SidebarProvider>;
+export default SidebarProvider;

package/dist/components/sidebar/SidebarSeparator.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Separator from '../separator/Separator.svelte';
+</script>
+
+<Separator decorative={false} style="margin: 0 8px;" />

package/dist/components/sidebar/SidebarSeparator.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 SidebarSeparator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarSeparator = InstanceType<typeof SidebarSeparator>;
+export default SidebarSeparator;

package/dist/components/sidebar/SidebarTrigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import PanelLeft from '@lucide/svelte/icons/panel-left';
+	import Button from '../button/Button.svelte';
+	import { getSidebarContext } from './context.js';
+
+	type Props = {
+		/** Accessible name of the button. */
+		label?: string;
+	};
+
+	let { label = 'Toggle sidebar' }: Props = $props();
+
+	const sidebar = getSidebarContext();
+</script>
+
+<Button
+	variant="ghost"
+	size="sm"
+	icon={PanelLeft}
+	{label}
+	aria-controls={sidebar.id}
+	aria-expanded={sidebar.mobile ? sidebar.openMobile : sidebar.open}
+	onclick={sidebar.toggle}
+/>

package/dist/components/sidebar/SidebarTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    /** Accessible name of the button. */
+    label?: string;
+};
+declare const SidebarTrigger: import("svelte").Component<Props, {}, "">;
+type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
+export default SidebarTrigger;

package/dist/components/sidebar/context.d.ts

@@ -0,0 +1,15 @@
+export type SidebarContext = {
+    /** Id of the sidebar element. */
+    readonly id: string;
+    /** Whether the sidebar is expanded on desktop. */
+    readonly open: boolean;
+    /** Below 768px the sidebar turns into a drawer. */
+    readonly mobile: boolean;
+    /** Whether the drawer is shown on mobile. */
+    readonly openMobile: boolean;
+    /** Collapses or expands the sidebar, or opens or closes the drawer on mobile. */
+    toggle: () => void;
+    /** Closes the drawer on mobile, e.g. after navigating. */
+    closeMobile: () => void;
+};
+export declare const getSidebarContext: () => SidebarContext, setSidebarContext: (context: SidebarContext) => SidebarContext;

package/dist/components/sidebar/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getSidebarContext, setSidebarContext] = createContext();

package/dist/components/skeleton/Skeleton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<div {...rest} aria-hidden="true" class={['skeleton', className]}></div>
+
+<style>
+	.skeleton {
+		flex-shrink: 0;
+		border-radius: 6px;
+		background-color: var(--color-surface);
+		animation: skeleton-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes skeleton-pulse {
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/spinner/Spinner.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		size?: 'sm' | 'md' | 'lg';
+		/** Accessible name. Ignored when the spinner is `aria-hidden`, e.g. inside a loading Button. */
+		label?: string;
+	};
+
+	let { size = 'md', label = 'Loading', class: className, ...rest }: Props = $props();
+</script>
+
+<span {...rest} role="status" aria-label={label} class={['spinner', `spinner--${size}`, className]}
+></span>
+
+<style>
+	@property --spinner-angle {
+		syntax: '<angle>';
+		initial-value: 0deg;
+		inherits: false;
+	}
+
+	.spinner {
+		--spinner-size: 16px;
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+		width: var(--spinner-size);
+		height: var(--spinner-size);
+	}
+
+	.spinner--sm {
+		--spinner-size: 14px;
+	}
+
+	.spinner--lg {
+		--spinner-size: 20px;
+	}
+
+	.spinner::before,
+	.spinner::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		box-sizing: border-box;
+		border: calc(var(--spinner-size) / 8) solid currentColor;
+		border-radius: 30%;
+	}
+
+	/* Track */
+	.spinner::before {
+		opacity: 0.2;
+	}
+
+	/* Handle: a conic mask whose head is opaque and whose tail fades out */
+	.spinner::after {
+		mask: conic-gradient(from var(--spinner-angle), transparent 0% 60%, #000 100%);
+		animation: spinner-rotate 1s linear infinite;
+	}
+
+	@keyframes spinner-rotate {
+		to {
+			--spinner-angle: 360deg;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.spinner::after {
+			animation-duration: 3s;
+		}
+	}
+</style>

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible name. Ignored when the spinner is `aria-hidden`, e.g. inside a loading Button. */
+    label?: string;
+};
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/switch/Switch.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLInputAttributes, 'type' | 'role'>;
+
+	let { checked = $bindable(false), class: className, ...rest }: Props = $props();
+</script>
+
+<span class={['switch', className]}>
+	<input {...rest} type="checkbox" role="switch" bind:checked />
+	<span class="switch-thumb" aria-hidden="true"></span>
+</span>
+
+<style>
+	.switch {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		width: 36px;
+		height: 22px;
+	}
+
+	input {
+		appearance: none;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		background-color: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: 9px;
+		outline: none;
+		cursor: pointer;
+		transition:
+			background-color 200ms ease,
+			border-color 200ms ease;
+	}
+
+	input:checked {
+		background-color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	input:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	input[aria-invalid='true'] {
+		border-color: var(--color-destructive);
+	}
+
+	input:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* Radius is the track's 9px minus the 4px inset, so the corners stay concentric */
+	.switch-thumb {
+		position: absolute;
+		top: 4px;
+		left: 4px;
+		width: 14px;
+		height: 14px;
+		background-color: var(--color-base);
+		border-radius: 5px;
+		pointer-events: none;
+		transition:
+			transform 200ms ease,
+			background-color 200ms ease;
+	}
+
+	input:checked + .switch-thumb {
+		background-color: var(--color-accent-foreground);
+		transform: translateX(14px);
+	}
+
+	input:disabled + .switch-thumb {
+		opacity: 0.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		input,
+		.switch-thumb {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/switch/Switch.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type' | 'role'>;
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;