sheer-ui 0.4.2 → 0.5.0

package/src/lib/blocks/alert-modal/alert-modal.svelte.ts

@@ -1,81 +0,0 @@
-import type { Snippet } from 'svelte';
-
-export type AlertModalVariant = 'destructive' | 'warning' | 'default';
-
-export interface AlertModalOptions {
-	title: string;
-	description: string;
-	actionLabel?: string;
-	cancelLabel?: string;
-	variant?: AlertModalVariant;
-	/** If set, user must type this text to enable the action button */
-	confirmText?: string;
-	/** Action handler. Omit for a plain acknowledgement dialog — confirming just closes it. */
-	onConfirm?: () => Promise<void> | void;
-	/** Optional snippet for custom body content between description and footer */
-	content?: Snippet;
-}
-
-export const VARIANT_DEFAULTS: Record<AlertModalVariant, string> = {
-	destructive: 'Remove',
-	warning: 'Continue',
-	default: 'OK',
-};
-
-export class AlertModalState {
-	open = $state(false);
-	loading = $state(false);
-	// raw: replaced wholesale by show()/close(), never mutated, and it carries a Snippet,
-	// which has no business inside a deep proxy
-	options = $state.raw<AlertModalOptions | null>(null);
-	confirmInput = $state('');
-
-	get canConfirm(): boolean {
-		if (!this.options) return false;
-		if (this.options.confirmText && this.confirmInput !== this.options.confirmText) return false;
-		return !this.loading;
-	}
-
-	get actionLabel(): string {
-		return this.options?.actionLabel ?? VARIANT_DEFAULTS[this.options?.variant ?? 'default'];
-	}
-
-	show(options: AlertModalOptions) {
-		this.options = options;
-		this.confirmInput = '';
-		this.loading = false;
-		this.open = true;
-	}
-
-	destructive(options: Omit<AlertModalOptions, 'variant'>) {
-		this.show({ ...options, variant: 'destructive' });
-	}
-
-	warning(options: Omit<AlertModalOptions, 'variant'>) {
-		this.show({ ...options, variant: 'warning' });
-	}
-
-	async handleConfirm() {
-		if (!this.options || !this.canConfirm) return;
-		this.loading = true;
-		try {
-			await this.options.onConfirm?.();
-			this.close();
-		} catch {
-			this.loading = false;
-		}
-	}
-
-	close() {
-		this.open = false;
-		this.loading = false;
-		this.options = null;
-		this.confirmInput = '';
-	}
-}
-
-export const alertModal = new AlertModalState();
-
-// Session-expiry recovery used to live here (isSessionExpired / recoverSession / watchSessionRejections). It's gone:
-// the server gate (@polumeyv/kit idpSessionGate) now redirects dead-session requests — navigations and remote
-// calls alike — straight to the IdP, so a logged-out user never surfaces a session error inside the app.

package/src/lib/blocks/copy-button/copy.svelte.ts

@@ -1,52 +0,0 @@
-/** Copy text to the clipboard with a temporary copied/failed feedback window. */
-export class UseClipboard {
-	#status = $state<'idle' | 'copied' | 'failed'>('idle');
-	#lastCopied = $state<string>();
-	#timeout: ReturnType<typeof setTimeout> | undefined;
-	/** Each copy takes a ticket; a late resolution or stale reset timer checks it before touching state. */
-	#ticket = 0;
-
-	/** Time in ms the copied/failed status holds before returning to idle. */
-	delay: number;
-
-	constructor(delay = 2000) {
-		this.delay = delay;
-	}
-
-	/** `'idle'` until a copy settles, then `'copied'` or `'failed'` for {@link delay} ms. */
-	get status() {
-		return this.#status;
-	}
-
-	/** Whether the copied feedback window is active. */
-	get copied() {
-		return this.#status === 'copied';
-	}
-
-	/** The last successfully copied text. */
-	get lastCopied() {
-		return this.#lastCopied;
-	}
-
-	/** Copies the given text to the user's clipboard. Resolves `true` on success. */
-	async copy(text: string | number): Promise<boolean> {
-		const ticket = ++this.#ticket;
-		clearTimeout(this.#timeout);
-		this.#status = 'idle';
-
-		let ok = true;
-		try {
-			await navigator.clipboard.writeText(text.toString());
-		} catch {
-			ok = false;
-		}
-
-		// A newer copy started while this one was in flight — it owns the feedback window.
-		if (ticket !== this.#ticket) return ok;
-
-		if (ok) this.#lastCopied = text.toString();
-		this.#status = ok ? 'copied' : 'failed';
-		this.#timeout = setTimeout(() => ticket === this.#ticket && (this.#status = 'idle'), this.delay);
-		return ok;
-	}
-}

package/src/lib/blocks/date-picker/index.ts

@@ -1,13 +0,0 @@
-import DatePicker from './date-picker.svelte';
-import DatePickerWithPresets from './date-picker-with-presets.svelte';
-import RangeDatePicker from './range-date-picker.svelte';
-export {
-	DatePicker,
-	DatePickerWithPresets,
-	RangeDatePicker,
-	//
-	DatePicker as Root,
-	DatePickerWithPresets as WithPresets,
-	RangeDatePicker as Range,
-};
-export type { DateRange } from '../../internal/index.js';

package/src/lib/blocks/time-picker/index.ts

@@ -1,16 +0,0 @@
-import TimeInput from './time-input.svelte';
-import TimePicker from './time-picker.svelte';
-import TimeRangeInput from './time-range-input.svelte';
-import TimeRangePicker from './time-range-picker.svelte';
-
-export {
-	TimePicker,
-	TimeRangePicker,
-	TimeInput,
-	TimeRangeInput,
-	//
-	TimePicker as Root,
-	TimeRangePicker as Range,
-	TimeInput as Input,
-	TimeRangeInput as RangeInput,
-};

package/src/lib/blocks/time-picker/time-slots.ts

@@ -1,61 +0,0 @@
-/**
- * Time-slot helpers for the time-picker components — comparison, duration, and slot generation over
- * ISO 8601 "HH:MM" wall-clock strings. Block-internal; the minute math and `formatTimeDisplay` (the
- * wire/display formatter) live in `../../time`.
- */
-import { tryTimeToMinutes, minutesToTime, formatTimeDisplay } from '../../time';
-
-export type TimeSlot = { value: string; label: string };
-export type SlotRange = { start: string; end: string };
-export type TimeSlotPreset = 'business' | 'extended' | 'full' | 'custom';
-
-/** Sign of (time1 − time2): negative if earlier, 0 if equal or either is malformed, positive if later. */
-export function compareTime(time1: string, time2: string): number {
-	const a = tryTimeToMinutes(time1);
-	const b = tryTimeToMinutes(time2);
-	if (a === null || b === null) return 0;
-	return a - b;
-}
-
-export const isTimeInRange = (time: string, minTime: string, maxTime: string): boolean =>
-	compareTime(time, minTime) >= 0 && compareTime(time, maxTime) <= 0;
-
-/** Duration in minutes from startTime to endTime (0 if either is malformed). */
-export function getTimeDuration(startTime: string, endTime: string): number {
-	const start = tryTimeToMinutes(startTime);
-	const end = tryTimeToMinutes(endTime);
-	if (start === null || end === null) return 0;
-	return end - start;
-}
-
-export function generateTimeSlots(startHour: number, endHour: number, interval: number, use24Hour = false): TimeSlot[] {
-	const slots: TimeSlot[] = [];
-	const span = (endHour - startHour) * 60;
-	// `elapsed` bounds the loop in minutes (so endHour === 24 works); `minutesToTime` wraps at midnight
-	// and zero-pads for us.
-	for (let elapsed = 0; elapsed < span; elapsed += interval) {
-		const min = startHour * 60 + elapsed;
-		slots.push({ value: minutesToTime(min), label: formatTimeDisplay(min, { use24Hour }) });
-	}
-	return slots;
-}
-
-export const b_HOURS: TimeSlot[] = generateTimeSlots(9, 17, 60);
-export const EXTENDED_HOURS: TimeSlot[] = generateTimeSlots(7, 21, 60);
-
-type ResolveTimeSlotsOptions = {
-	slots: TimeSlot[] | undefined;
-	preset: TimeSlotPreset;
-	interval: number;
-	startHour: number;
-	endHour: number;
-	use24Hour?: boolean;
-};
-
-export const resolveTimeSlots = ({ slots, preset, interval, startHour, endHour, use24Hour = false }: ResolveTimeSlotsOptions) => {
-	if (slots) return slots;
-	// the baked constants carry 12-hour labels; 24-hour display regenerates the preset
-	if (preset === 'business') return use24Hour ? generateTimeSlots(9, 17, 60, true) : b_HOURS;
-	if (preset === 'extended') return use24Hour ? generateTimeSlots(7, 21, 60, true) : EXTENDED_HOURS;
-	return preset === 'full' ? generateTimeSlots(0, 24, interval, use24Hour) : generateTimeSlots(startHour, endHour, interval, use24Hour);
-};

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

@@ -1,11 +0,0 @@
-export { default as Root } from './components/accordion.svelte';
-export { default as Item } from './components/accordion-item.svelte';
-export { default as Trigger } from './components/accordion-trigger.svelte';
-export { default as Content } from './components/accordion-content.svelte';
-
-export type {
-	AccordionRootProps as RootProps,
-	AccordionItemProps as ItemProps,
-	AccordionTriggerProps as TriggerProps,
-	AccordionContentProps as ContentProps,
-} from './types.js';

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

@@ -1,19 +0,0 @@
-import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
-import type { WithElementRef } from '../../internal/utils.js';
-import type { SelectionType } from '../../internal/selection.svelte.js';
-
-export type AccordionRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-	/** 'single' keeps one item open: opening an item closes the open one. Fixed at mount. */
-	type?: SelectionType;
-	/** The open item value(s) — string for single, string[] for multiple. Bindable. */
-	value?: string | string[];
-};
-
-export type AccordionItemProps = WithElementRef<SvelteHTMLElements['details'], HTMLDetailsElement> & {
-	value: string;
-	disabled?: boolean;
-};
-
-export type AccordionTriggerProps = WithElementRef<SvelteHTMLElements['summary']>;
-
-export type AccordionContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

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

@@ -1,17 +0,0 @@
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-import Action from './alert-action.svelte';
-export { alertVariants, type AlertVariant } from './alert.svelte';
-
-export {
-	Root,
-	Description,
-	Title,
-	Action,
-	//
-	Root as Alert,
-	Description as AlertDescription,
-	Title as AlertTitle,
-	Action as AlertAction,
-};

package/src/lib/components/avatar/avatar.svelte.ts

@@ -1,154 +0,0 @@
-import { createContext, untrack } from 'svelte';
-import { DOMContext, type ReadableBox, type WritableBox, attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
-import type { HTMLImgAttributes } from 'svelte/elements';
-import type { AvatarImageLoadingStatus } from './types.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { createBitsAttrs } from '../../internal/attrs.js';
-
-const avatarAttrs = createBitsAttrs({
-	component: 'avatar',
-	parts: ['root', 'image', 'fallback'],
-});
-
-type CrossOrigin = HTMLImgAttributes['crossorigin'];
-type ReferrerPolicy = HTMLImgAttributes['referrerpolicy'];
-type AvatarImageSrc = string | null | undefined;
-
-interface AvatarRootStateOpts extends WithRefOpts {
-	delayMs: ReadableBox<number>;
-	loadingStatus: WritableBox<AvatarImageLoadingStatus>;
-}
-
-const [getAvatarRoot, setAvatarRoot] = createContext<AvatarRootState>();
-
-export class AvatarRootState {
-	static create(opts: AvatarRootStateOpts) {
-		return setAvatarRoot(new AvatarRootState(opts));
-	}
-
-	readonly opts: AvatarRootStateOpts;
-	readonly domContext: DOMContext;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: AvatarRootStateOpts) {
-		this.opts = opts;
-		this.domContext = new DOMContext(this.opts.ref);
-		this.loadImage = this.loadImage.bind(this);
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy) {
-		if (this.opts.loadingStatus.current === 'loaded') return;
-		let imageTimerId: number;
-		const image = new Image();
-
-		image.src = src;
-		if (crossorigin !== undefined) image.crossOrigin = crossorigin;
-		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
-
-		this.opts.loadingStatus.current = 'loading';
-		image.onload = () => {
-			imageTimerId = this.domContext.setTimeout(() => {
-				this.opts.loadingStatus.current = 'loaded';
-			}, this.opts.delayMs.current);
-		};
-		image.onerror = () => {
-			this.opts.loadingStatus.current = 'error';
-		};
-		return () => {
-			if (!imageTimerId) return;
-			this.domContext.clearTimeout(imageTimerId);
-		};
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				[avatarAttrs.root]: '',
-				'data-status': this.opts.loadingStatus.current,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface AvatarImageStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			src: AvatarImageSrc;
-			crossOrigin: CrossOrigin;
-			referrerPolicy: ReferrerPolicy;
-		}> {}
-
-export class AvatarImageState {
-	static create(opts: AvatarImageStateOpts) {
-		return new AvatarImageState(opts, getAvatarRoot());
-	}
-	readonly opts: AvatarImageStateOpts;
-	readonly root: AvatarRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: AvatarImageStateOpts, root: AvatarRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
-
-		$effect.pre(() => {
-			const src = this.opts.src.current;
-			const crossOrigin = this.opts.crossOrigin.current;
-			untrack(() => {
-				if (!src) {
-					this.root.opts.loadingStatus.current = 'error';
-					return;
-				}
-				this.root.loadImage(src, crossOrigin, this.opts.referrerPolicy.current);
-			});
-		});
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				style: {
-					display: this.root.opts.loadingStatus.current === 'loaded' ? 'block' : 'none',
-				},
-				'data-status': this.root.opts.loadingStatus.current,
-				[avatarAttrs.image]: '',
-				src: this.opts.src.current,
-				crossorigin: this.opts.crossOrigin.current,
-				referrerpolicy: this.opts.referrerPolicy.current,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface AvatarFallbackStateOpts extends WithRefOpts {}
-export class AvatarFallbackState {
-	static create(opts: AvatarFallbackStateOpts) {
-		return new AvatarFallbackState(opts, getAvatarRoot());
-	}
-
-	readonly opts: AvatarFallbackStateOpts;
-	readonly root: AvatarRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: AvatarFallbackStateOpts, root: AvatarRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	readonly style = $derived.by(() => (this.root.opts.loadingStatus.current === 'loaded' ? { display: 'none' } : undefined));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				style: this.style,
-				'data-status': this.root.opts.loadingStatus.current,
-				[avatarAttrs.fallback]: '',
-				...this.attachment,
-			}) as const,
-	);
-}

package/src/lib/components/avatar/components/avatar-fallback.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { AvatarFallbackProps } from '../types.js';
-	import { AvatarFallbackState } from '../avatar.svelte.js';
-	import { createId } from '../../../internal/create-id.js';
-
-	const uid = $props.id();
-
-	let { children, child, id = createId(uid), ref = $bindable(null), ...restProps }: AvatarFallbackProps = $props();
-
-	const fallbackState = AvatarFallbackState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-	});
-
-	const mergedProps = $derived(
-		mergeProps(
-			{
-				'data-slot': 'avatar-fallback',
-				class: 'bg-muted grid size-full place-items-center rounded-full',
-			},
-			restProps,
-			fallbackState.props,
-		),
-	);
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<span {...mergedProps}>
-		{@render children?.()}
-	</span>
-{/if}

package/src/lib/components/avatar/components/avatar-image.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { AvatarImageProps } from '../types.js';
-	import { AvatarImageState } from '../avatar.svelte.js';
-	import { createId } from '../../../internal/create-id.js';
-
-	const uid = $props.id();
-
-	let {
-		src,
-		child,
-		id = createId(uid),
-		ref = $bindable(null),
-		crossorigin = undefined,
-		referrerpolicy = undefined,
-		...restProps
-	}: AvatarImageProps = $props();
-
-	const imageState = AvatarImageState.create({
-		src: boxWith(() => src),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		crossOrigin: boxWith(() => crossorigin),
-		referrerPolicy: boxWith(() => referrerpolicy),
-	});
-
-	const mergedProps = $derived(
-		mergeProps(
-			{
-				'data-slot': 'avatar-image',
-				class: 'aspect-square size-full',
-			},
-			restProps,
-			imageState.props,
-		),
-	);
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<img {...mergedProps} {src} />
-{/if}

package/src/lib/components/avatar/components/avatar.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { AvatarRootProps } from '../types.js';
-	import { AvatarRootState } from '../avatar.svelte.js';
-	import { createId } from '../../../internal/create-id.js';
-
-	const uid = $props.id();
-
-	let {
-		delayMs = 0,
-		loadingStatus = $bindable('loading'),
-		onLoadingStatusChange,
-		child,
-		children,
-		id = createId(uid),
-		ref = $bindable(null),
-		...restProps
-	}: AvatarRootProps = $props();
-
-	const rootState = AvatarRootState.create({
-		delayMs: boxWith(() => delayMs),
-		loadingStatus: boxWith(
-			() => loadingStatus,
-			(v) => {
-				if (loadingStatus !== v) {
-					loadingStatus = v;
-					onLoadingStatusChange?.(v);
-				}
-			},
-		),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-	});
-
-	const mergedProps = $derived(
-		mergeProps(
-			{
-				'data-slot': 'avatar',
-				class: 'relative flex size-8 shrink-0 overflow-hidden rounded-full',
-			},
-			restProps,
-			rootState.props,
-		),
-	);
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}

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

@@ -1,9 +0,0 @@
-export { default as Root } from './components/avatar.svelte';
-export { default as Image } from './components/avatar-image.svelte';
-export { default as Fallback } from './components/avatar-fallback.svelte';
-
-export type {
-	AvatarRootProps as RootProps,
-	AvatarImageProps as ImageProps,
-	AvatarFallbackProps as FallbackProps,
-} from './types.js';

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

@@ -1,46 +0,0 @@
-import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type {
-	BitsPrimitiveDivAttributes,
-	BitsPrimitiveImgAttributes,
-	BitsPrimitiveSpanAttributes,
-} from "../../internal/attribute-types.js";
-
-export type AvatarImageLoadingStatus = "loading" | "loaded" | "error";
-
-export type AvatarRootPropsWithoutHTML = WithChild<{
-	/**
-	 * The delay in milliseconds to wait before showing the avatar once
-	 * the image has loaded. This can be used to prevent sudden flickering
-	 * of the image if it loads quickly.
-	 *
-	 * @default 0
-	 */
-	delayMs?: number;
-
-	/**
-	 * The loading status of the image.
-	 *
-	 * If you are confident that the image exists and will load successfully, you can
-	 * set this to `"loaded"` to skip the loading process (which shows the fallback)
-	 * and immediately show the image.
-	 *
-	 * @default "loading"
-	 */
-	loadingStatus?: AvatarImageLoadingStatus;
-
-	/**
-	 * A callback invoked when the loading status of the image changes.
-	 */
-	onLoadingStatusChange?: OnChangeFn<AvatarImageLoadingStatus>;
-}>;
-
-export type AvatarRootProps = AvatarRootPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, AvatarRootPropsWithoutHTML>;
-
-export type AvatarImagePropsWithoutHTML = WithChild;
-export type AvatarImageProps = AvatarImagePropsWithoutHTML &
-	Without<BitsPrimitiveImgAttributes, AvatarImagePropsWithoutHTML>;
-
-export type AvatarFallbackPropsWithoutHTML = WithChild;
-export type AvatarFallbackProps = AvatarFallbackPropsWithoutHTML &
-	Without<BitsPrimitiveSpanAttributes, AvatarFallbackPropsWithoutHTML>;

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

@@ -1,25 +0,0 @@
-import Root from './breadcrumb.svelte';
-import Ellipsis from './breadcrumb-ellipsis.svelte';
-import Item from './breadcrumb-item.svelte';
-import Link from './breadcrumb-link.svelte';
-import List from './breadcrumb-list.svelte';
-import Page from './breadcrumb-page.svelte';
-import Separator from './breadcrumb-separator.svelte';
-
-export {
-	Root,
-	Ellipsis,
-	Item,
-	Separator,
-	Link,
-	List,
-	Page,
-	//
-	Root as Breadcrumb,
-	Ellipsis as BreadcrumbEllipsis,
-	Item as BreadcrumbItem,
-	Separator as BreadcrumbSeparator,
-	Link as BreadcrumbLink,
-	List as BreadcrumbList,
-	Page as BreadcrumbPage,
-};

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

@@ -1,12 +0,0 @@
-import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
-
-export {
-	Root,
-	type ButtonProps as Props,
-	//
-	Root as Button,
-	buttonVariants,
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-};