sheer-ui 0.0.0

package/src/lib/components/sonner/toast-state.svelte.ts

@@ -0,0 +1,217 @@
+import { BROWSER } from 'esm-env';
+import type { ExternalToast, HeightT, PromiseData, PromiseT, AnyComponent, ToastT, ToastTypes } from './types.js';
+import { untrack } from 'svelte';
+
+let toastsCounter = 0;
+
+type UpdateToastProps = {
+	id: number | string;
+	data: Partial<ToastT>;
+	type: ToastTypes;
+	message: string | AnyComponent | undefined;
+	dismissible: boolean;
+};
+
+type CreateToastData<T extends AnyComponent> = ExternalToast<T> & {
+	message?: string | T;
+	type?: ToastTypes;
+	promise?: PromiseT;
+};
+
+class ToastState {
+	toasts = $state<ToastT[]>([]);
+	heights = $state<HeightT[]>([]);
+
+	#findToastIdx = (id: number | string): number | null => {
+		const idx = this.toasts.findIndex((toast) => toast.id === id);
+		if (idx === -1) return null;
+		return idx;
+	};
+
+	readonly activeToasts = $derived.by(() => this.toasts.filter((toast) => !toast.dismiss));
+
+	addToast = (data: ToastT): void => {
+		if (!BROWSER) return;
+		this.toasts.unshift(data);
+	};
+
+	updateToast = ({ id, data, type, message, dismissible }: UpdateToastProps): void => {
+		const toastIdx = this.#findToastIdx(id);
+		if (toastIdx === null) return;
+
+		this.toasts[toastIdx] = {
+			...this.toasts[toastIdx],
+			...data,
+			id,
+			title: message,
+			type,
+			dismissible,
+			updated: true,
+		};
+	};
+
+	create = <T extends AnyComponent>(data: CreateToastData<T>): string | number => {
+		const { message, ...rest } = data;
+		const id = typeof data.id === 'number' || (data.id && data.id.length > 0) ? data.id : toastsCounter++;
+
+		const dismissible = data.dismissible ?? true;
+		const type = data.type ?? 'default';
+
+		untrack(() => {
+			const alreadyExists = this.#findToastIdx(id) !== null;
+
+			if (alreadyExists) {
+				this.updateToast({ id, data, type, message, dismissible });
+				return;
+			}
+
+			this.addToast({ ...rest, id, title: message, dismissible, type });
+		});
+
+		return id;
+	};
+
+	dismiss = (id?: number | string): string | number | undefined => {
+		untrack(() => {
+			if (id === undefined) {
+				this.toasts = this.toasts.map((toast) => ({ ...toast, dismiss: true }));
+				return;
+			}
+
+			const toastIdx = this.#findToastIdx(id);
+			if (toastIdx === null) return;
+
+			const toast = this.toasts[toastIdx];
+			if (!toast) return;
+
+			this.toasts[toastIdx] = {
+				...toast,
+				dismiss: true,
+			};
+		});
+
+		return id;
+	};
+
+	remove = (id?: number | string) => {
+		if (id === undefined) {
+			// remove all toasts
+			this.toasts = [];
+			return;
+		}
+		// remove a specific toast
+		const toastIdx = this.#findToastIdx(id);
+		if (toastIdx === null) return;
+		this.toasts.splice(toastIdx, 1);
+		return id;
+	};
+
+	promise = <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>): string | number | undefined => {
+		if (!data) {
+			// Nothing to show
+			return;
+		}
+		let id: string | number | undefined = undefined;
+		if (data.loading !== undefined) {
+			id = this.create({
+				...data,
+				promise,
+				type: 'loading',
+				message: typeof data.loading === 'string' ? data.loading : data.loading(),
+			});
+		}
+
+		const p = promise instanceof Promise ? promise : promise();
+
+		let shouldDismiss = id !== undefined;
+
+		p.then(
+			(response) => {
+				if (typeof response === 'object' && response && 'ok' in response && typeof response.ok === 'boolean' && !response.ok) {
+					shouldDismiss = false;
+					const message = constructPromiseErrorMessage(response);
+					this.create({ id, type: 'error', message });
+				} else if (data.success !== undefined) {
+					shouldDismiss = false;
+					const message = typeof data.success === 'function' ? data.success(response) : data.success;
+					this.create({ id, type: 'success', message });
+				}
+			},
+			(error) => {
+				if (data.error !== undefined) {
+					shouldDismiss = false;
+					const message = typeof data.error === 'function' ? data.error(error) : data.error;
+
+					this.create({ id, type: 'error', message });
+				}
+			},
+		).finally(() => {
+			if (shouldDismiss) {
+				// Toast is still in load state (and will be indefinitely — dismiss it)
+				this.dismiss(id);
+				id = undefined;
+			}
+
+			data.finally?.();
+		});
+
+		return id;
+	};
+
+	custom = <T extends AnyComponent>(component: T, data?: ExternalToast<T>): string | number => {
+		const id = data?.id || toastsCounter++;
+
+		this.create({ component, id, ...data });
+
+		return id;
+	};
+
+	removeHeight = (id: number | string) => {
+		this.heights = this.heights.filter((height) => height.toastId !== id);
+	};
+
+	setHeight = (data: HeightT) => {
+		const idx = this.heights.findIndex((height) => height.toastId === data.toastId);
+		// New heights go to the front, mirroring addToast's unshift so both arrays share the visual order.
+		if (idx === -1) {
+			this.heights.unshift(data);
+			return;
+		}
+		this.heights[idx] = data;
+	};
+
+	reset = () => {
+		this.toasts = [];
+		this.heights = [];
+	};
+}
+
+const hasStatus = (value: unknown): value is { status: unknown } => value !== null && typeof value === 'object' && 'status' in value;
+
+const constructPromiseErrorMessage = (error: unknown) =>
+	hasStatus(error) ? `HTTP error! Status: ${error.status}` : `Error! ${String(error)}`;
+
+export const toastState = new ToastState();
+
+const basicToast = <T extends AnyComponent>(message: string | T, data?: ExternalToast<T>) =>
+	toastState.create({
+		message,
+		...data,
+	});
+const createTypedToast =
+	(type: ToastTypes) =>
+	<T extends AnyComponent>(message: string | T, data?: ExternalToast<T>) =>
+		toastState.create({ ...data, type, message });
+
+export const toast = Object.assign(basicToast, {
+	success: createTypedToast('success'),
+	info: createTypedToast('info'),
+	warning: createTypedToast('warning'),
+	error: createTypedToast('error'),
+	loading: createTypedToast('loading'),
+	message: createTypedToast('default'),
+	custom: toastState.custom,
+	promise: toastState.promise,
+	dismiss: toastState.dismiss,
+	getActiveToasts: () => toastState.activeToasts,
+});

package/src/lib/components/sonner/types.ts

@@ -0,0 +1,384 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { ClassValue, HTMLAttributes, HTMLOlAttributes, MouseEventHandler } from 'svelte/elements';
+
+export type FixMe = unknown;
+
+type Expand<T> = T extends object ? (T extends infer O ? { [K in keyof O]: O[K] } : never) : T;
+
+// We need this to consistently be this wide.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyComponent = Component<any, any, string>;
+
+export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
+
+export type PromiseT<Data = unknown> = Promise<Data> | (() => Promise<Data>);
+
+export type PromiseData<ToastData = unknown> = ExternalToast & {
+	/**
+	 * The loading message or a function that returns the message or
+	 * a custom toast component.
+	 */
+	loading?: string | (() => AnyComponent | string);
+	/**
+	 * The success message or a function that returns the message or
+	 * a custom toast component.
+	 */
+	success?: string | ((data: ToastData) => AnyComponent | string);
+	/**
+	 * The error message or a function that returns the message or
+	 * a custom toast component.
+	 */
+	error?: string | ((error: unknown) => AnyComponent | string);
+	/**
+	 * A function that is called when the promise is finally resolved or rejected.
+	 */
+	finally?: () => void | Promise<void>;
+};
+
+export type ToastAction = {
+	label: string | AnyComponent;
+	onClick: MouseEventHandler<HTMLButtonElement>;
+	actionButtonStyle?: string;
+};
+
+export const isAction = (action: ToastAction | AnyComponent | undefined): action is ToastAction =>
+	(action as ToastAction).label !== undefined;
+
+export type ToastT<T extends AnyComponent = AnyComponent> = {
+	id: number | string;
+	title?: string | AnyComponent;
+	type: ToastTypes;
+	icon?: AnyComponent | null;
+	component?: AnyComponent;
+	componentProps?: ComponentProps<T>;
+	richColors?: boolean;
+	invert?: boolean;
+	closeButton?: boolean;
+	dismissible?: boolean;
+	/**
+	 * @deprecated Use `dismissible` instead.
+	 */
+	dismissable?: boolean;
+	important?: boolean;
+	description?: string | AnyComponent;
+	duration?: number;
+	action?: ToastAction | AnyComponent;
+	cancel?: ToastAction | AnyComponent;
+	onDismiss?: (toast: ToastT) => void;
+	onAutoClose?: (toast: ToastT) => void;
+	promise?: PromiseT;
+	cancelButtonStyle?: string;
+	actionButtonStyle?: string;
+	style?: string;
+	unstyled?: boolean;
+	class?: ClassValue;
+	classes?: ToastClasses;
+	descriptionClass?: ClassValue;
+	position?: Position;
+	dismiss?: boolean;
+	/**
+	 * @internal This is used to determine if the toast has been updated to determine when to reset timer. Hacky but works.
+	 */
+	updated?: boolean;
+};
+
+export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+
+export type HeightT = {
+	height: number;
+	toastId: number | string;
+};
+
+export type Theme = 'light' | 'dark';
+
+export type ToastToDismiss = {
+	id: number | string;
+	dismiss: boolean;
+};
+
+export type ExternalToast<T extends AnyComponent = AnyComponent> = Omit<ToastT<T>, 'id' | 'type' | 'title' | 'promise' | 'updated'> & {
+	id?: number | string;
+};
+
+type Offset =
+	| {
+			top?: string | number;
+			right?: string | number;
+			bottom?: string | number;
+			left?: string | number;
+	  }
+	| string
+	| number;
+
+export type ToastIcon = Snippet | null;
+
+type ToastIcons = {
+	/**
+	 * The icon to use for the success toast,
+	 * can be either a snippet, a component, or `null` to not render an icon.
+	 */
+	successIcon?: ToastIcon;
+
+	/**
+	 * The icon to use for the info toast,
+	 * can be either a snippet, a component, or `null` to not render an icon.
+	 */
+	infoIcon?: ToastIcon;
+
+	/**
+	 * The icon to use for the warning toast,
+	 * can be either a snippet, a component, or `null` to not render an icon.
+	 */
+	warningIcon?: ToastIcon;
+
+	/**
+	 * The icon to use for the error toast,
+	 * can be either a snippet, a component, or `null` to not render an icon.
+	 */
+	errorIcon?: ToastIcon;
+
+	/**
+	 * The icon to use for the loading toast,
+	 * can be either a snippet, a component, or `null` to not render an icon.
+	 */
+	loadingIcon?: ToastIcon;
+
+	/**
+	 * The icon to use for the close button,
+	 * can be either a snippet, a component, or `null` to not render an icon.
+	 */
+	closeIcon?: ToastIcon;
+};
+
+export type ToasterProps = {
+	/**
+	 * Dark toasts in light mode and vice versa.
+	 *
+	 * @default false
+	 */
+	invert?: boolean;
+
+	/**
+	 * Toast's theme, either light, dark, or system.
+	 *
+	 * If using [mode-watcher](https://mode-watcher.sveco.dev), you can set this to the
+	 * `userPrefersMode.current` to automatically switch themes based on those preferences.
+	 *
+	 * @default 'light'
+	 */
+	theme?: 'light' | 'dark' | 'system';
+
+	/**
+	 * Place where the toasts will be rendered
+	 *
+	 * @default 'bottom-right'
+	 */
+	position?: Position;
+
+	/**
+	 * Keyboard shortcut that will move focus to the toaster area.
+	 *
+	 * @default '⌥/alt + T'
+	 */
+	hotkey?: string[];
+
+	/**
+	 * Makes error and success state more colorful
+	 *
+	 * @default false
+	 */
+	richColors?: boolean;
+
+	/**
+	 * Toasts will be expanded by default
+	 *
+	 * @default false
+	 */
+	expand?: boolean;
+
+	/**
+	 * The duration of the toast in milliseconds.
+	 *
+	 * @default 4000
+	 */
+	duration?: number;
+
+	/**
+	 * Gap between toasts when expanded, in pixels.
+	 *
+	 * @default '14px'
+	 */
+	gap?: number;
+
+	/**
+	 * Amount of visible toasts
+	 *
+	 * @default 3
+	 */
+	visibleToasts?: number;
+
+	/**
+	 * Adds a close button to all toasts, shows on hover
+	 *
+	 * @default false
+	 */
+	closeButton?: boolean;
+
+	/**
+	 * These will act as default options for all toasts.
+	 *
+	 * @default {}
+	 */
+	toastOptions?: ToastOptions;
+
+	/**
+	 * Offset from the edges of the screen.
+	 *
+	 * @default '32px'
+	 */
+	offset?: Offset;
+
+	/**
+	 * Offset from the edges of the screen for mobile devices.
+	 *
+	 * @default '16px'
+	 */
+	mobileOffset?: Offset;
+
+	/**
+	 * Pause the toast timer when the page is hidden, e.g. when the user switches
+	 * tabs. Toasts will not expire while the page is hidden.
+	 *
+	 * @default false
+	 */
+	pauseWhenPageIsHidden?: boolean;
+
+	/**
+	 * Directionality of toast's text
+	 *
+	 * @default 'auto'
+	 */
+	dir?: 'ltr' | 'rtl' | 'auto';
+
+	/**
+	 * The directions in which the toast can be swiped.
+	 *
+	 * @default ['top', 'right', 'bottom', 'left']
+	 */
+	swipeDirections?: SwipeDirection[];
+
+	/**
+	 * The aria-label to use for the container element, which will
+	 * be combined with the hotkey, if provided like so:
+	 *
+	 * ```svelte
+	 * <section aria-label="{containerAriaLabel} {hotkeyLabel}"
+	 * </section>
+	 * ```
+	 *
+	 * @default 'Notifications'
+	 */
+	containerAriaLabel?: string;
+
+	/**
+	 * The aria label for the close button.
+	 *
+	 * @default 'Close toast'
+	 */
+	closeButtonAriaLabel?: string;
+} & HTMLOlAttributes;
+
+export type ToastOptions = {
+	/**
+	 * The classes applied to the toast element.
+	 */
+	class?: ClassValue;
+
+	/**
+	 * The classes applied to the toast description element.
+	 */
+	descriptionClass?: ClassValue;
+
+	/**
+	 * The CSS styles applied to the toast element.
+	 */
+	style?: string;
+
+	/**
+	 * The CSS styles applied to the cancel button element.
+	 */
+	cancelButtonStyle?: string;
+
+	/**
+	 * The CSS styles applied to the action button element.
+	 */
+	actionButtonStyle?: string;
+
+	/**
+	 * The duration of the toast in milliseconds.
+	 */
+	duration?: number;
+
+	/**
+	 * Whether the toast should be unstyled or not.
+	 */
+	unstyled?: boolean;
+
+	/**
+	 * Classes to apply to the various elements of the toast.
+	 */
+	classes?: Expand<ToastClasses>;
+
+	/**
+	 * The aria label for the close button.
+	 */
+	closeButtonAriaLabel?: string;
+
+	/**
+	 * Whether to show the close button.
+	 */
+	closeButton?: boolean;
+};
+
+/**
+ * The classes applied to the various elements of the toast.
+ */
+export type ToastClasses = {
+	toast?: ClassValue;
+	title?: ClassValue;
+	description?: ClassValue;
+	loader?: ClassValue;
+	closeButton?: ClassValue;
+	cancelButton?: ClassValue;
+	actionButton?: ClassValue;
+	icon?: ClassValue;
+	content?: ClassValue;
+} & ToastTypeClasses;
+
+type ToastTypeClasses = Partial<Record<ToastTypes, ClassValue>>;
+
+export type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+
+export type ToastProps = {
+	toast: ToastT;
+	index: number;
+	swipeDirections?: SwipeDirection[];
+	expanded: boolean;
+	invert: boolean;
+	position: Position;
+	visibleToasts: number;
+	expandByDefault: boolean;
+	closeButton: boolean;
+	interacting: boolean;
+	cancelButtonStyle: string;
+	actionButtonStyle: string;
+	duration: number;
+	class: ClassValue;
+	descriptionClass: ClassValue;
+	classes: ToastClasses;
+	unstyled: boolean;
+	closeButtonAriaLabel: string;
+	defaultRichColors: boolean;
+	pauseWhenPageIsHidden: boolean;
+} & HTMLAttributes<HTMLLIElement> &
+	ToastIcons;

package/src/lib/components/switch/index.ts

@@ -0,0 +1,8 @@
+import Root from './switch.svelte';
+export type { SwitchProps } from './switch.svelte';
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

package/src/lib/components/switch/switch.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	import { join } from 'overrule';
+	import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+
+	export type SwitchProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+		ref?: HTMLInputElement | null;
+		id?: string;
+		class?: ClassValue | null;
+		checked?: boolean;
+		disabled?: boolean | null;
+		required?: boolean;
+		name?: string;
+		value?: string;
+		onCheckedChange?: (checked: boolean) => void;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		id,
+		class: className,
+		checked = $bindable(false),
+		disabled = false,
+		required = false,
+		name = undefined,
+		value = 'on',
+		onCheckedChange,
+		...restProps
+	}: SwitchProps = $props();
+
+	// Mirrors the native-checkbox switch: a real <input type="checkbox" role="switch"> is the
+	// interactive, focusable, form-participating element (focus lands on it, so the track's
+	// has-focus-visible ring only shows for keyboard focus, matching :focus-visible on a
+	// bare control), overlaid invisibly on the styled track + thumb.
+	const shared = $derived({
+		'data-disabled': disabled ? '' : undefined,
+		'data-state': checked ? 'checked' : 'unchecked',
+		'data-required': required ? '' : undefined,
+	});
+</script>
+
+<span
+	data-slot="switch"
+	data-switch-root=""
+	{...shared}
+	{...restProps}
+	class={join(
+		// Sizing is driven by one variable: --switch-size is the track height; width is
+		// 1.75x it, the thumb fills the height, and travel is 0.75x it (W - thumb). Override
+		// --switch-size alone to rescale the whole control. See the thumb span below.
+		'relative [--switch-size:1.15rem] data-checked:bg-primary data-unchecked:bg-border has-focus-visible:border-ring has-focus-visible:ring-ring/50 dark:data-unchecked:bg-border/80 inline-flex h-(--switch-size) w-[calc(var(--switch-size)*1.75)] shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none has-focus-visible:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+		className,
+	)}>
+	<input
+		bind:this={ref}
+		bind:checked
+		type="checkbox"
+		role="switch"
+		data-slot="switch-input"
+		data-switch-input=""
+		{...shared}
+		{id}
+		{name}
+		{value}
+		{disabled}
+		{required}
+		aria-required={required ? 'true' : 'false'}
+		onchange={() => onCheckedChange?.(checked)}
+		class="peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed" />
+
+	<span
+		data-slot="switch-thumb"
+		data-switch-thumb=""
+		{...shared}
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block size-[calc(var(--switch-size)-2px)] rounded-full ring-0 transition-transform data-checked:translate-x-[calc(var(--switch-size)*0.75)] data-unchecked:translate-x-0"
+	></span>
+</span>

package/src/lib/components/table/index.ts

@@ -0,0 +1,28 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};