sheer-ui 0.0.0

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

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,57 @@
+<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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,46 @@
+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/badge/badge.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { declareVariants, type VariantProps } from 'overrule';
+
+	export const badgeVariants = declareVariants({
+		base: 'h-5 gap-1 rounded-4xl border px-2 py-0.5 text-xs font-medium has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-3 [&>svg]:pointer-events-none',
+		variants: {
+			variant: {
+				default: 'border-transparent focus-visible:ring-ring/50 bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'border-transparent focus-visible:ring-ring/50 bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive:
+					'border-transparent bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+				outline: 'border-border focus-visible:ring-ring/50 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'border-transparent focus-visible:ring-ring/50 hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'border-transparent focus-visible:ring-ring/50 text-primary underline-offset-4 hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={badgeVariants({ variant, class: className })}
+	{...restProps}>
+	{@render children?.()}
+</svelte:element>

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

@@ -0,0 +1 @@
+export { default as Badge, type BadgeVariant, badgeVariants } from './badge.svelte';

package/src/lib/components/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef, WithoutChildren } from '../../internal/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
+	role="presentation"
+	aria-hidden="true"
+	class={join('grid size-9 place-items-center', className)}
+	{...restProps}>
+	<EllipsisIcon class="size-4" />
+	<span class="sr-only">More</span>
+</span>

package/src/lib/components/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="breadcrumb-item" class={join('inline-flex items-center gap-1.5', className)} {...restProps}>
+	{@render children?.()}
+</li>

package/src/lib/components/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		'data-slot': 'breadcrumb-link',
+		class: join('hover:text-foreground transition-colors', className),
+		href,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}

package/src/lib/components/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	data-slot="breadcrumb-list"
+	class={join('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5', className)}
+	{...restProps}>
+	{@render children?.()}
+</ol>

package/src/lib/components/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-page"
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={join('text-foreground font-normal', className)}
+	{...restProps}>
+	{@render children?.()}
+</span>

package/src/lib/components/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={join('[&>svg]:size-3.5', className)}
+	{...restProps}>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<ChevronRightIcon />
+	{/if}
+</li>

package/src/lib/components/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav bind:this={ref} data-slot="breadcrumb" class={className} aria-label="breadcrumb" {...restProps}>
+	{@render children?.()}
+</nav>

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

@@ -0,0 +1,25 @@
+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/button.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import type { WithElementRef } from '../../internal/utils.js';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { buttonVariants, type ButtonVariant, type ButtonSize } from './variants';
+	export { buttonVariants, type ButtonVariant, type ButtonSize };
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+			/** Disables the button and displays a leading spinner. */
+			loading?: boolean;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		loading,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={buttonVariants({ variant, size, class: className })}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={buttonVariants({ variant, size, class: className })}
+		{type}
+		disabled={disabled || loading}
+		aria-busy={loading || undefined}
+		{...restProps}>
+		{#if loading}<Loader2Icon class="animate-spin" />{/if}
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,12 @@
+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,
+};