@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/button/Button.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { LucideIcon } from '@lucide/svelte';
+	import Spinner from '../spinner/Spinner.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Renders an <a> instead of a <button>. External (http) links open in a new tab. */
+		href?: string;
+		target?: string;
+		rel?: string;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		/** Replaces the icon with a Spinner and blocks clicks. */
+		loading?: boolean;
+		/** `overlay` is a translucent, blurred, fully rounded button for use on top of images or media. */
+		variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'overlay';
+		size?: 'sm' | 'md' | 'lg';
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		/** Accessible name. Required when the button has no label (icon-only). */
+		label?: string;
+		children?: Snippet;
+	};
+
+	let {
+		href,
+		target,
+		rel,
+		type = 'button',
+		disabled = false,
+		loading = false,
+		variant = 'primary',
+		size = 'md',
+		icon: Icon,
+		label,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let iconOnly = $derived(!children);
+	let resolvedTarget = $derived(target ?? (href?.startsWith('http') ? '_blank' : undefined));
+	let resolvedRel = $derived(rel ?? (resolvedTarget === '_blank' ? 'noopener' : undefined));
+	let classes = $derived([
+		'button',
+		`button--${variant}`,
+		`button--${size}`,
+		{
+			'button--icon-only': iconOnly,
+			'button--no-icon': !Icon && !loading,
+			'button--loading': loading
+		},
+		className
+	]);
+</script>
+
+{#snippet content()}
+	{#if loading}
+		<Spinner class="button-spinner" aria-hidden="true" />
+	{:else if Icon}<Icon class="button-icon" aria-hidden="true" />{/if}
+	{#if children}<span class="button-label">{@render children()}</span>{/if}
+{/snippet}
+
+{#if href && !disabled && !loading}
+	<!-- href comes from the consumer, who resolves it; this library has no routes -->
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+	<a {...rest} {href} target={resolvedTarget} rel={resolvedRel} aria-label={label} class={classes}>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{...rest}
+		{type}
+		disabled={disabled || loading}
+		aria-busy={loading || undefined}
+		aria-label={label}
+		class={classes}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+<style>
+	.button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		min-width: 0;
+		box-sizing: border-box;
+		border: none;
+		border-radius: 10px;
+		font-family: inherit;
+		font-size: 13px;
+		text-decoration: none;
+		outline: none;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color 200ms ease,
+			color 200ms ease,
+			opacity 200ms ease;
+	}
+
+	.button:disabled {
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.button--loading:disabled {
+		cursor: progress;
+		opacity: 1;
+	}
+
+	.button-label {
+		overflow: hidden;
+		min-width: 0;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.button:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.button :global(.button-icon) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	/* 2px smaller than the icon it replaces */
+	.button :global(.button-spinner) {
+		--spinner-size: 14px;
+	}
+
+	.button--sm :global(.button-spinner) {
+		--spinner-size: 12px;
+	}
+
+	/* Sizes */
+
+	.button--lg {
+		height: 36px;
+		padding: 0 20px 0 16px;
+	}
+
+	.button--md {
+		height: 32px;
+		padding: 0 15px 0 11px;
+	}
+
+	.button--sm {
+		height: 28px;
+		padding: 0 12px 0 9px;
+		gap: 5px;
+		border-radius: 8px;
+		font-size: 12px;
+	}
+
+	.button--sm :global(.button-icon) {
+		width: 14px;
+		height: 14px;
+	}
+
+	.button--no-icon.button--sm {
+		padding: 0 12px;
+	}
+
+	.button--no-icon.button--lg {
+		padding: 0 20px;
+	}
+
+	.button--no-icon.button--md {
+		padding: 0 16px;
+	}
+
+	/* Icon-only is square */
+	.button--icon-only.button--lg {
+		width: 36px;
+		padding: 0;
+	}
+
+	.button--icon-only.button--md {
+		width: 32px;
+		padding: 0;
+	}
+
+	.button--icon-only.button--sm {
+		width: 28px;
+		padding: 0;
+	}
+
+	/* Variants */
+
+	.button--primary {
+		background-color: var(--color-accent);
+		color: var(--color-accent-foreground);
+	}
+
+	.button--primary:hover:not(:disabled) {
+		background-color: var(--color-accent-hover);
+	}
+
+	.button--secondary {
+		background-color: var(--color-surface);
+		color: var(--color-text);
+	}
+
+	.button--secondary:hover:not(:disabled) {
+		background-color: var(--color-surface-hover);
+	}
+
+	.button--outline {
+		border: 1px solid var(--color-border-strong);
+		background-color: transparent;
+		color: var(--color-text);
+	}
+
+	.button--outline:hover:not(:disabled) {
+		background-color: var(--color-surface);
+	}
+
+	.button--ghost {
+		background-color: transparent;
+		color: var(--color-text);
+	}
+
+	.button--ghost:hover:not(:disabled) {
+		background-color: var(--color-surface);
+	}
+
+	/* Pill with a label, circle when icon-only */
+	.button--overlay {
+		border-radius: 999px;
+		background-color: color-mix(in srgb, var(--color-surface) 60%, transparent);
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+		color: var(--color-text);
+	}
+
+	.button--overlay:hover:not(:disabled) {
+		background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
+	}
+</style>

package/dist/components/button/Button.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Renders an <a> instead of a <button>. External (http) links open in a new tab. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    /** Replaces the icon with a Spinner and blocks clicks. */
+    loading?: boolean;
+    /** `overlay` is a translucent, blurred, fully rounded button for use on top of images or media. */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'overlay';
+    size?: 'sm' | 'md' | 'lg';
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    /** Accessible name. Required when the button has no label (icon-only). */
+    label?: string;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/button-group/ButtonGroup.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		orientation?: 'horizontal' | 'vertical';
+		/** Accessible name for the group. */
+		label?: string;
+		/** Buttons, or ContextMenus with a Button trigger (split button). */
+		children: Snippet;
+	};
+
+	let { orientation = 'horizontal', label, class: className, children, ...rest }: Props = $props();
+</script>
+
+<div
+	{...rest}
+	role="group"
+	aria-label={label}
+	class={['button-group', `button-group--${orientation}`, className]}
+>
+	{@render children()}
+</div>
+
+<style>
+	.button-group {
+		display: inline-flex;
+		gap: 1px;
+		width: fit-content;
+	}
+
+	.button-group--vertical {
+		flex-direction: column;
+	}
+
+	/* Keep the focus ring above neighbouring buttons */
+	.button-group > :global(*) {
+		position: relative;
+	}
+
+	.button-group > :global(:is(:focus-visible, :has(:focus-visible))) {
+		z-index: 1;
+	}
+
+	.button-group--vertical > :global(*),
+	.button-group--vertical > :global(* > .button) {
+		width: 100%;
+	}
+
+	/* Outline buttons share their borders instead of sitting 1px apart */
+	.button-group:has(> :global(.button--outline), > :global(* > .button--outline)) {
+		gap: 0;
+	}
+
+	.button-group--horizontal > :global(.button--outline:not(:first-child)),
+	.button-group--horizontal > :global(:not(:first-child):has(> .button--outline)) {
+		margin-inline-start: -1px;
+	}
+
+	.button-group--vertical > :global(.button--outline:not(:first-child)),
+	.button-group--vertical > :global(:not(:first-child):has(> .button--outline)) {
+		margin-block-start: -1px;
+	}
+
+	/* Square the inner corners; `* > .button` reaches a ContextMenu's trigger */
+	.button-group--horizontal > :global(:not(:first-child)),
+	.button-group--horizontal > :global(:not(:first-child) > .button) {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+	.button-group--horizontal > :global(:not(:last-child)),
+	.button-group--horizontal > :global(:not(:last-child) > .button) {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+	.button-group--vertical > :global(:not(:first-child)),
+	.button-group--vertical > :global(:not(:first-child) > .button) {
+		border-start-start-radius: 0;
+		border-start-end-radius: 0;
+	}
+
+	.button-group--vertical > :global(:not(:last-child)),
+	.button-group--vertical > :global(:not(:last-child) > .button) {
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+	}
+</style>

package/dist/components/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    orientation?: 'horizontal' | 'vertical';
+    /** Accessible name for the group. */
+    label?: string;
+    /** Buttons, or ContextMenus with a Button trigger (split button). */
+    children: Snippet;
+};
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;