@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/popover/Popover.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type Attachment } from 'svelte/attachments';
+export type PopoverTriggerProps = {
+    onclick?: () => void;
+    onpointerenter?: (event: PointerEvent) => void;
+    onpointerleave?: () => void;
+    onfocus?: () => void;
+    onblur?: (event: FocusEvent) => void;
+    'aria-haspopup'?: 'dialog';
+    'aria-expanded'?: boolean;
+    'aria-controls'?: string;
+    [key: symbol]: Attachment<HTMLElement>;
+};
+import type { Snippet } from 'svelte';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type Props = {
+    /** Whether the popover is open. Bindable. */
+    open?: boolean;
+    /** Opens on hover and keyboard focus instead of on click, like a hover card. */
+    hover?: boolean;
+    /** Milliseconds to wait on hover before opening. Only used with `hover`. */
+    delay?: number;
+    /** Preferred side; flips to the opposite one when there is not enough room. */
+    side?: Side;
+    /** Alignment along the trigger's edge. */
+    align?: 'start' | 'center' | 'end';
+    title?: string;
+    description?: string;
+    /** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. */
+    trigger: Snippet<[PopoverTriggerProps]>;
+    children?: Snippet;
+};
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/radio-group/RadioGroup.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setRadioGroupContext } from './context.js';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Value of the selected RadioGroupItem. */
+		value?: string;
+		/** Form field name. Generated when omitted. */
+		name?: string;
+		disabled?: boolean;
+		required?: boolean;
+		orientation?: 'vertical' | 'horizontal';
+		/** Horizontal Fields, each with a RadioGroupItem and a Label. */
+		children: Snippet;
+	};
+
+	let {
+		value = $bindable(),
+		name,
+		disabled = false,
+		required = false,
+		orientation = 'vertical',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const fallbackName = $props.id();
+
+	setRadioGroupContext({
+		get name() {
+			return name ?? fallbackName;
+		},
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get required() {
+			return required;
+		},
+		select: (next) => {
+			value = next;
+		}
+	});
+</script>
+
+<div
+	{...rest}
+	role="radiogroup"
+	aria-disabled={disabled || undefined}
+	aria-required={required || undefined}
+	aria-orientation={orientation}
+	class={['radio-group', `radio-group--${orientation}`, className]}
+>
+	{@render children()}
+</div>
+
+<style>
+	.radio-group {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.radio-group--horizontal {
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 12px 24px;
+	}
+
+	.radio-group--horizontal > :global(.field) {
+		width: auto;
+	}
+
+	/* aria-invalid is not allowed on a radio, so the group carries it */
+	.radio-group[aria-invalid='true'] :global(.radio input) {
+		border-color: var(--color-destructive);
+	}
+
+	.radio-group[aria-invalid='true'] :global(.label) {
+		color: var(--color-destructive);
+	}
+</style>

package/dist/components/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Value of the selected RadioGroupItem. */
+    value?: string;
+    /** Form field name. Generated when omitted. */
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    /** Horizontal Fields, each with a RadioGroupItem and a Label. */
+    children: Snippet;
+};
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/radio-group/RadioGroupItem.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getRadioGroupContext } from './context.js';
+
+	type Props = Omit<HTMLInputAttributes, 'type' | 'name' | 'value' | 'checked'> & {
+		value: string;
+	};
+
+	let { value, disabled, class: className, ...rest }: Props = $props();
+
+	const group = getRadioGroupContext();
+</script>
+
+<span class={['radio', className]}>
+	<input
+		{...rest}
+		type="radio"
+		name={group.name}
+		{value}
+		checked={group.value === value}
+		disabled={group.disabled || disabled}
+		required={group.required}
+		onchange={(event) => {
+			if (event.currentTarget.checked) group.select(value);
+			rest.onchange?.(event);
+		}}
+	/>
+	<span class="radio-indicator" aria-hidden="true"></span>
+</span>
+
+<style>
+	.radio {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		width: 16px;
+		height: 16px;
+	}
+
+	input {
+		appearance: none;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		background-color: transparent;
+		border: 1px solid var(--color-border-strong);
+		border-radius: 50%;
+		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:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.radio-indicator {
+		position: absolute;
+		inset: 4.5px;
+		background-color: var(--color-accent-foreground);
+		border-radius: 50%;
+		pointer-events: none;
+		transform: scale(0);
+		transition: transform 200ms ease;
+	}
+
+	input:checked + .radio-indicator {
+		transform: scale(1);
+	}
+
+	input:checked:disabled + .radio-indicator {
+		opacity: 0.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		input,
+		.radio-indicator {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/radio-group/RadioGroupItem.svelte.d.ts

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

package/dist/components/radio-group/context.d.ts

@@ -0,0 +1,9 @@
+export type RadioGroupContext = {
+    /** Shared `name` of the radios, so the browser handles arrow keys and single selection. */
+    readonly name: string;
+    readonly value: string | undefined;
+    readonly disabled: boolean;
+    readonly required: boolean;
+    select: (value: string) => void;
+};
+export declare const getRadioGroupContext: () => RadioGroupContext, setRadioGroupContext: (context: RadioGroupContext) => RadioGroupContext;

package/dist/components/radio-group/context.js

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

package/dist/components/separator/Separator.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Direction of the line. */
+		orientation?: 'horizontal' | 'vertical';
+		/** Purely visual line, hidden from assistive technology. Set to false when it separates content semantically. */
+		decorative?: boolean;
+	};
+
+	let {
+		orientation = 'horizontal',
+		decorative = true,
+		class: className,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	{...rest}
+	role={decorative ? 'none' : 'separator'}
+	aria-orientation={decorative || orientation === 'horizontal' ? undefined : orientation}
+	data-orientation={orientation}
+	class={['separator', `separator--${orientation}`, className]}
+></div>
+
+<style>
+	.separator {
+		flex-shrink: 0;
+		background-color: var(--color-border);
+	}
+
+	.separator--horizontal {
+		height: 1px;
+	}
+
+	.separator--vertical {
+		width: 1px;
+		align-self: stretch;
+	}
+</style>

package/dist/components/separator/Separator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Direction of the line. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Purely visual line, hidden from assistive technology. Set to false when it separates content semantically. */
+    decorative?: boolean;
+};
+declare const Separator: import("svelte").Component<Props, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/sidebar/Sidebar.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { fade } from 'svelte/transition';
+	import { getSidebarContext } from './context.js';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		side?: 'left' | 'right';
+		/** `floating` detaches the sidebar from the edge as a rounded panel. */
+		variant?: 'sidebar' | 'floating';
+		/** What collapsing does: slide out (`offcanvas`), shrink to icons (`icon`) or nothing (`none`). */
+		collapsible?: 'offcanvas' | 'icon' | 'none';
+		/** `SidebarHeader`, `SidebarContent` and `SidebarFooter`. */
+		children: Snippet;
+	};
+
+	let {
+		side = 'left',
+		variant = 'sidebar',
+		collapsible = 'offcanvas',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const sidebar = getSidebarContext();
+
+	let collapsed = $derived(!sidebar.mobile && !sidebar.open && collapsible !== 'none');
+	let hidden = $derived(
+		sidebar.mobile ? !sidebar.openMobile : collapsed && collapsible === 'offcanvas'
+	);
+
+	$effect(() => {
+		if (!sidebar.openMobile) return;
+
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === 'Escape') sidebar.closeMobile();
+		}
+
+		window.addEventListener('keydown', handleKeydown);
+		return () => window.removeEventListener('keydown', handleKeydown);
+	});
+</script>
+
+{#if sidebar.mobile && sidebar.openMobile}
+	<button
+		type="button"
+		tabindex="-1"
+		aria-label="Close sidebar"
+		class="sidebar-backdrop"
+		onclick={sidebar.closeMobile}
+		transition:fade={{ duration: 200 }}
+	></button>
+{/if}
+
+<aside
+	{...rest}
+	id={sidebar.id}
+	inert={hidden}
+	data-state={collapsed ? 'collapsed' : 'expanded'}
+	class={[
+		'sidebar',
+		`sidebar--${side}`,
+		`sidebar--${variant}`,
+		`sidebar--collapsible-${collapsible}`,
+		collapsed && `sidebar--collapsed-${collapsible}`,
+		sidebar.mobile && 'sidebar--mobile',
+		sidebar.openMobile && 'sidebar--open-mobile',
+		className
+	]}
+>
+	<div class="sidebar-inner">
+		{@render children()}
+	</div>
+</aside>
+
+<style>
+	.sidebar {
+		position: sticky;
+		top: 0;
+		display: flex;
+		flex-shrink: 0;
+		width: var(--sidebar-width);
+		height: var(--sidebar-height);
+		overflow: hidden;
+		transition: width 200ms ease;
+	}
+
+	/* The inner panel keeps its width while the outer one shrinks, so it slides out instead of squashing */
+	.sidebar--left {
+		justify-content: flex-end;
+	}
+
+	.sidebar--right {
+		order: 1;
+		justify-content: flex-start;
+	}
+
+	.sidebar--collapsed-offcanvas {
+		width: 0;
+	}
+
+	.sidebar--collapsed-icon {
+		width: var(--sidebar-width-icon);
+	}
+
+	.sidebar-inner {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		box-sizing: border-box;
+		width: var(--sidebar-width);
+		height: 100%;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+	}
+
+	.sidebar--collapsible-icon .sidebar-inner {
+		width: 100%;
+	}
+
+	/* Variants */
+
+	.sidebar--sidebar.sidebar--left .sidebar-inner {
+		border-right: 1px solid var(--color-border);
+	}
+
+	.sidebar--sidebar.sidebar--right .sidebar-inner {
+		border-left: 1px solid var(--color-border);
+	}
+
+	.sidebar--floating .sidebar-inner {
+		width: calc(var(--sidebar-width) - 16px);
+		height: calc(100% - 16px);
+		margin: 8px;
+		border: 1px solid var(--color-border);
+		border-radius: 12px;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+	}
+
+	.sidebar--floating.sidebar--collapsible-icon .sidebar-inner {
+		width: calc(100% - 16px);
+	}
+
+	.sidebar--floating.sidebar--collapsed-icon {
+		width: calc(var(--sidebar-width-icon) + 16px);
+	}
+
+	/* Mobile drawer */
+
+	.sidebar--mobile {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 50;
+		height: auto;
+		transform: translateX(-100%);
+		transition: transform 200ms ease;
+	}
+
+	.sidebar--mobile.sidebar--right {
+		left: auto;
+		right: 0;
+		transform: translateX(100%);
+	}
+
+	.sidebar--mobile.sidebar--open-mobile {
+		transform: none;
+	}
+
+	.sidebar-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 49;
+		padding: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		border: none;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    side?: 'left' | 'right';
+    /** `floating` detaches the sidebar from the edge as a rounded panel. */
+    variant?: 'sidebar' | 'floating';
+    /** What collapsing does: slide out (`offcanvas`), shrink to icons (`icon`) or nothing (`none`). */
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    /** `SidebarHeader`, `SidebarContent` and `SidebarFooter`. */
+    children: Snippet;
+};
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/sidebar/SidebarContent.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** `SidebarGroup`s. Scrolls when it overflows. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['sidebar-content', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.sidebar-content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	:global(.sidebar--collapsed-icon) .sidebar-content {
+		overflow: hidden;
+	}
+</style>

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

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

package/dist/components/sidebar/SidebarFooter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['sidebar-footer', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.sidebar-footer {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+	}
+</style>

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

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

package/dist/components/sidebar/SidebarGroup.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Heading of the group. Hidden while the sidebar is collapsed to icons. */
+		label?: string;
+		/** Usually a `SidebarMenu`. */
+		children: Snippet;
+	};
+
+	let { label, class: className, children, ...rest }: Props = $props();
+
+	const id = $props.id();
+</script>
+
+<div
+	{...rest}
+	role="group"
+	aria-labelledby={label ? `${id}-label` : undefined}
+	class={['sidebar-group', className]}
+>
+	{#if label}<div id="{id}-label" class="sidebar-group-label">{label}</div>{/if}
+	{@render children()}
+</div>
+
+<style>
+	.sidebar-group {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		padding: 8px;
+	}
+
+	.sidebar-group-label {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: 32px;
+		padding: 0 8px;
+		overflow: hidden;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--color-text-muted);
+		white-space: nowrap;
+		transition:
+			margin-top 200ms ease,
+			opacity 200ms ease;
+	}
+
+	:global(.sidebar--collapsed-icon) .sidebar-group-label {
+		margin-top: -32px;
+		opacity: 0;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Heading of the group. Hidden while the sidebar is collapsed to icons. */
+    label?: string;
+    /** Usually a `SidebarMenu`. */
+    children: Snippet;
+};
+declare const SidebarGroup: import("svelte").Component<Props, {}, "">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/components/sidebar/SidebarHeader.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['sidebar-header', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.sidebar-header {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+	}
+</style>

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

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