@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/avatar/AvatarImage.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { getAvatarContext } from './context.js';
+
+	export type AvatarImageProps = Omit<HTMLImgAttributes, 'src' | 'children'> & {
+		/** Image URL. While it is missing, loading or broken, the Fallback shows. */
+		src?: string | null;
+		sx?: Sx;
+		ref?: HTMLImageElement | null;
+	};
+
+	const styles = stylex.create({
+		// Laid over the fallback, so a loaded image simply covers it, even before
+		// the page has hydrated
+		image: {
+			position: 'absolute',
+			inset: 0,
+			display: 'block',
+			width: '100%',
+			height: '100%',
+			borderRadius: 'inherit',
+			objectFit: 'cover'
+		},
+		hidden: { display: 'none' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		src,
+		alt,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: AvatarImageProps = $props();
+
+	const avatar = getAvatarContext('Image');
+	let status = $state<'loading' | 'loaded' | 'error'>('loading');
+
+	// A new src starts over. An image that settled before hydration fires no
+	// events, so its state is read straight from the element.
+	$effect(() => {
+		if (!src) {
+			status = 'error';
+			return;
+		}
+		status = 'loading';
+		if (ref?.complete) status = ref.naturalWidth > 0 ? 'loaded' : 'error';
+	});
+
+	$effect(() => {
+		avatar.status = status;
+		return () => {
+			avatar.status = 'none';
+		};
+	});
+</script>
+
+{#if src}
+	<!-- The Root carries the person's name, so the picture itself is decorative by default -->
+	<img
+		bind:this={ref}
+		{src}
+		alt={alt ?? ''}
+		draggable="false"
+		data-slot="avatar-image"
+		onload={() => (status = 'loaded')}
+		onerror={() => (status = 'error')}
+		{...rest}
+		{...attrs([styles.image, status === 'error' && styles.hidden, sx], className)}
+	/>
+{/if}

package/dist/components/avatar/AvatarImage.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AvatarImageProps = Omit<HTMLImgAttributes, 'src' | 'children'> & {
+    /** Image URL. While it is missing, loading or broken, the Fallback shows. */
+    src?: string | null;
+    sx?: Sx;
+    ref?: HTMLImageElement | null;
+};
+declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "ref">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

package/dist/components/avatar/AvatarRoot.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { font, radius } from '../../tokens.stylex.js';
+	import { setAvatarContext, type AvatarImageStatus } from './context.js';
+
+	export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+	export type AvatarRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		/**
+		 * The person's name. It becomes the avatar's accessible name and picks the
+		 * colour behind the initials, so each person keeps theirs.
+		 */
+		name?: string;
+		size?: AvatarSize;
+		sx?: Sx;
+		ref?: HTMLSpanElement | null;
+		/** An Avatar.Image and an Avatar.Fallback. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		root: {
+			position: 'relative',
+			display: 'inline-grid',
+			flexShrink: 0,
+			overflow: 'hidden',
+			borderRadius: radius.full,
+			fontFamily: font.body,
+			fontWeight: font.weightSemibold,
+			lineHeight: 1,
+			userSelect: 'none',
+			verticalAlign: 'middle',
+			// One hairline over whatever is showing, image or fallback. Pure black or
+			// white, so it never picks up the colour underneath.
+			'::after': {
+				content: '""',
+				position: 'absolute',
+				inset: 0,
+				borderRadius: 'inherit',
+				boxShadow: 'inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.14))',
+				pointerEvents: 'none'
+			},
+			// Shadows vanish in forced-colours mode; this outline stands in for the edge
+			outlineStyle: 'solid',
+			outlineWidth: '1px',
+			outlineColor: 'transparent',
+			outlineOffset: '-1px'
+		}
+	});
+
+	const sizes = stylex.create({
+		sm: { width: '1.5rem', height: '1.5rem', fontSize: '0.625rem' },
+		md: { width: '1.75rem', height: '1.75rem', fontSize: '0.6875rem' },
+		lg: { width: '2.25rem', height: '2.25rem', fontSize: font.sizeSm },
+		xl: { width: '3.5rem', height: '3.5rem', fontSize: '1.125rem' }
+	});
+
+	// Blue through violet to teal: every hue sits comfortably beside the silver-blue accent.
+	function hueOf(name: string): number {
+		// FNV-1a: similar names still land far apart
+		let hash = 2166136261;
+		for (const char of name) hash = Math.imul(hash ^ (char.codePointAt(0) ?? 0), 16777619);
+		return 170 + ((hash >>> 0) % 150);
+	}
+</script>
+
+<script lang="ts">
+	let {
+		name,
+		size = 'md',
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: AvatarRootProps = $props();
+
+	let status = $state<AvatarImageStatus>('none');
+
+	setAvatarContext({
+		get status() {
+			return status;
+		},
+		set status(value) {
+			status = value;
+		},
+		get name() {
+			return name;
+		}
+	});
+</script>
+
+<!-- With a name, the whole avatar is one image with that name, and what is inside is not read out -->
+<span
+	bind:this={ref}
+	role={name ? 'img' : undefined}
+	aria-label={name}
+	data-slot="avatar"
+	data-status={status}
+	{...rest}
+	{...attrs([styles.root, sizes[size], sx], className)}
+	style:--narvi-avatar-hue={name ? hueOf(name) : undefined}
+>
+	{@render children?.()}
+</span>

package/dist/components/avatar/AvatarRoot.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /**
+     * The person's name. It becomes the avatar's accessible name and picks the
+     * colour behind the initials, so each person keeps theirs.
+     */
+    name?: string;
+    size?: AvatarSize;
+    sx?: Sx;
+    ref?: HTMLSpanElement | null;
+    /** An Avatar.Image and an Avatar.Fallback. */
+    children?: Snippet;
+};
+declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "ref">;
+type AvatarRoot = ReturnType<typeof AvatarRoot>;
+export default AvatarRoot;

package/dist/components/avatar/context.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Where the image stands. `none` until an Avatar.Image is placed; Fallback hides
+ * only once the image has actually loaded.
+ */
+export type AvatarImageStatus = 'none' | 'loading' | 'loaded' | 'error';
+export type AvatarContext = {
+    status: AvatarImageStatus;
+    readonly name: string | undefined;
+};
+export declare function setAvatarContext(context: AvatarContext): void;
+export declare function getAvatarContext(part: string): AvatarContext;

package/dist/components/avatar/context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.avatar');
+export function setAvatarContext(context) {
+    setContext(KEY, context);
+}
+export function getAvatarContext(part) {
+    const context = getContext(KEY);
+    if (!context)
+        throw new Error(`<Avatar.${part}> must be placed inside <Avatar.Root>.`);
+    return context;
+}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,7 @@
+import Fallback from './AvatarFallback.svelte';
+import Image from './AvatarImage.svelte';
+import Root from './AvatarRoot.svelte';
+export { Root, Image, Fallback, Root as AvatarRoot, Image as AvatarImage, Fallback as AvatarFallback };
+export type { AvatarFallbackProps } from './AvatarFallback.svelte';
+export type { AvatarImageProps } from './AvatarImage.svelte';
+export type { AvatarRootProps, AvatarSize } from './AvatarRoot.svelte';

package/dist/components/avatar/index.js

@@ -0,0 +1,6 @@
+import Fallback from './AvatarFallback.svelte';
+import Image from './AvatarImage.svelte';
+import Root from './AvatarRoot.svelte';
+export { Root, Image, Fallback, 
+//
+Root as AvatarRoot, Image as AvatarImage, Fallback as AvatarFallback };

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+
+	export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+
+	export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		/** Colour of the dot. The words stay in the text colour, so they are always readable. */
+		tone?: BadgeTone;
+		/** Hides the dot, for a plain label or a count. */
+		plain?: boolean;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			gap: '0.375rem',
+			boxSizing: 'border-box',
+			minHeight: '1.375rem',
+			paddingInline: '0.5rem',
+			// A pill at the default scale, squarer when it is sharp
+			borderRadius: radius.xl,
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}`,
+			color: colors.textMuted,
+			fontFamily: font.body,
+			fontSize: font.sizeXs,
+			fontWeight: font.weightMedium,
+			fontVariantNumeric: 'tabular-nums',
+			lineHeight: 1,
+			whiteSpace: 'nowrap',
+			verticalAlign: 'middle'
+		},
+		dot: {
+			flexShrink: 0,
+			width: '0.375rem',
+			height: '0.375rem',
+			borderRadius: radius.full,
+			forcedColorAdjust: 'none'
+		},
+		lit: { color: colors.text }
+	});
+
+	const dots = stylex.create({
+		neutral: { backgroundColor: colors.textSubtle },
+		accent: { backgroundColor: colors.ithil, boxShadow: `0 0 8px ${colors.glow}` },
+		success: { backgroundColor: colors.success },
+		warning: { backgroundColor: colors.warning },
+		danger: { backgroundColor: colors.danger }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		tone = 'neutral',
+		plain = false,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: BadgeProps = $props();
+</script>
+
+<span
+	{...rest}
+	{...attrs([styles.base, shared.edged, tone === 'accent' && styles.lit, sx], className)}
+>
+	{#if !plain}
+		<span aria-hidden="true" {...stylex.attrs(styles.dot, dots[tone])}></span>
+	{/if}
+	{@render children?.()}
+</span>

package/dist/components/badge/Badge.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** Colour of the dot. The words stay in the text colour, so they are always readable. */
+    tone?: BadgeTone;
+    /** Hides the dot, for a plain label or a count. */
+    plain?: boolean;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/button/Button.svelte

@@ -0,0 +1,270 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import Spinner from '../spinner/Spinner.svelte';
+
+	export type ButtonVariant = 'primary' | 'secondary' | 'soft' | 'ghost' | 'danger';
+	export type ButtonSize = 'sm' | 'md' | 'lg';
+
+	export type ButtonProps = Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'children'> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		/** Shows a spinner and blocks interaction while keeping the button's width. */
+		loading?: boolean;
+		disabled?: boolean;
+		/** Square button for a single icon. Give it an `aria-label`. */
+		iconOnly?: boolean;
+		/** Renders a link styled as a button. */
+		href?: string;
+		sx?: Sx;
+		ref?: HTMLButtonElement | HTMLAnchorElement | null;
+		children?: Snippet;
+	};
+
+	// StyleX needs these in the same file to evaluate them at build time
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		base: {
+			position: 'relative',
+			display: 'inline-flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			flexShrink: 0,
+			boxSizing: 'border-box',
+			margin: 0,
+			borderWidth: 0,
+			fontFamily: font.body,
+			fontWeight: font.weightMedium,
+			lineHeight: 1,
+			whiteSpace: 'nowrap',
+			textDecoration: 'none',
+			cursor: 'pointer',
+			userSelect: 'none',
+			appearance: 'none',
+			WebkitTapHighlightColor: 'transparent',
+			// Press feedback, only for people who have not asked for less motion
+			scale: { default: null, ':active': { default: null, [MOTION]: 0.96 } },
+			// The press answers at once with a strong ease-out. Hover colours use a plain ease.
+			transitionProperty: {
+				default: 'background-color, color, filter',
+				[MOTION]: 'scale, background-color, color, filter'
+			},
+			transitionDuration: motion.base,
+			transitionTimingFunction: {
+				default: 'ease',
+				[MOTION]: `${motion.easeOut}, ease, ease, ease`
+			}
+		},
+
+		// Sizes. Small and medium extend their hit area to 40px without moving the layout.
+		sm: {
+			minHeight: '1.75rem',
+			paddingInline: '0.625rem',
+			gap: '0.375rem',
+			borderRadius: radius.sm,
+			fontSize: font.sizeSm,
+			'::after': { content: '""', position: 'absolute', insetInline: 0, insetBlock: '-6px' }
+		},
+		md: {
+			minHeight: '2rem',
+			paddingInline: '0.75rem',
+			gap: '0.4375rem',
+			borderRadius: radius.md,
+			fontSize: font.sizeMd,
+			'::after': { content: '""', position: 'absolute', insetInline: 0, insetBlock: '-4px' }
+		},
+		lg: {
+			minHeight: '2.5rem',
+			paddingInline: '1rem',
+			gap: '0.5rem',
+			borderRadius: radius.lg,
+			fontSize: '0.9375rem'
+		},
+		iconSm: { width: '1.75rem', paddingInline: 0 },
+		iconMd: { width: '2rem', paddingInline: 0 },
+		iconLg: { width: '2.5rem', paddingInline: 0 },
+
+		// Mithril: a small piece of bright metal
+		primary: {
+			color: colors.onMithril,
+			backgroundImage: `linear-gradient(180deg, ${colors.mithrilTop}, ${colors.mithrilBottom})`,
+			boxShadow: `inset 0 1px 0 ${colors.mithrilEdge}, inset 0 -1px 0 rgb(0 0 0 / 0.14), 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 22px -10px ${colors.mithrilDrop}`,
+			filter: { default: null, ':hover': { default: null, [HOVER]: 'brightness(1.06)' } },
+			// The deeper hover shadow is a layer of its own that fades in. Fading
+			// opacity is cheap; animating the shadow itself repaints it every frame.
+			'::before': {
+				content: '""',
+				position: 'absolute',
+				inset: 0,
+				borderRadius: 'inherit',
+				boxShadow: `0 12px 22px -10px ${colors.mithrilDrop}`,
+				opacity: { default: 0, ':hover': { default: null, [HOVER]: 1 } },
+				pointerEvents: 'none',
+				transitionProperty: 'opacity',
+				transitionDuration: motion.base,
+				transitionTimingFunction: 'ease'
+			}
+		},
+		secondary: {
+			color: colors.text,
+			backgroundColor: {
+				default: colors.surfaceRaised,
+				':hover': { default: null, [HOVER]: colors.hover }
+			},
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, inset 0 1px 0 ${colors.highlight}, 0 1px 2px ${colors.shade}`
+		},
+		soft: {
+			color: colors.ithil,
+			backgroundColor: {
+				default: colors.ithilSoft,
+				':hover': { default: null, [HOVER]: colors.focusHalo }
+			}
+		},
+		ghost: {
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text }
+			},
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, [HOVER]: colors.hover }
+			}
+		},
+		danger: {
+			color: colors.danger,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': {
+					default: null,
+					[HOVER]: `color-mix(in oklab, ${colors.danger} 12%, transparent)`
+				}
+			},
+			boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${colors.danger} 45%, transparent)`
+		},
+
+		// States
+		disabled: {
+			opacity: 0.5,
+			cursor: 'not-allowed',
+			pointerEvents: 'none'
+		},
+		loading: {
+			cursor: 'progress',
+			pointerEvents: 'none'
+		},
+		content: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			gap: 'inherit',
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, filter' },
+			transitionDuration: motion.base,
+			transitionTimingFunction: motion.easeOut
+		},
+		// A little blur as the label leaves, so label and spinner read as one change
+		// and not two things overlapping
+		contentHidden: {
+			opacity: 0,
+			filter: { default: null, [MOTION]: 'blur(2px)' }
+		},
+		// The spinner fades in as the label fades out. It leaves at once: when the
+		// work is done, the label should be back without delay.
+		spinner: {
+			position: 'absolute',
+			inset: 0,
+			display: 'grid',
+			placeItems: 'center',
+			opacity: { default: 1, '@starting-style': 0 },
+			scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.9 } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+			transitionDuration: motion.base,
+			transitionTimingFunction: motion.easeOut
+		}
+	});
+
+	const iconStyles = { sm: styles.iconSm, md: styles.iconMd, lg: styles.iconLg };
+</script>
+
+<script lang="ts">
+	let {
+		variant = 'secondary',
+		size = 'md',
+		loading = false,
+		disabled = false,
+		iconOnly = false,
+		href,
+		type = 'button',
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: ButtonProps = $props();
+
+	const inert = $derived(disabled || loading);
+
+	const rootAttrs = $derived(
+		attrs(
+			[
+				styles.base,
+				shared.focusable,
+				styles[size],
+				iconOnly && iconStyles[size],
+				styles[variant],
+				disabled && styles.disabled,
+				loading && styles.loading,
+				sx
+			],
+			className
+		)
+	);
+</script>
+
+{#snippet content()}
+	<span {...stylex.attrs(styles.content, loading && styles.contentHidden)}>
+		{@render children?.()}
+	</span>
+	{#if loading}
+		<span {...stylex.attrs(styles.spinner)}>
+			<Spinner size={16} label="Loading" />
+		</span>
+	{/if}
+{/snippet}
+
+{#if href !== undefined}
+	<a
+		bind:this={ref}
+		href={inert ? undefined : href}
+		role={inert ? 'link' : undefined}
+		aria-disabled={inert ? true : undefined}
+		aria-busy={loading ? true : undefined}
+		{...rest}
+		{...rootAttrs}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		{type}
+		disabled={disabled || undefined}
+		aria-disabled={loading ? true : undefined}
+		aria-busy={loading ? true : undefined}
+		{...rest}
+		{...rootAttrs}
+		onclick={loading
+			? (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			: rest.onclick}
+	>
+		{@render content()}
+	</button>
+{/if}

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ButtonVariant = 'primary' | 'secondary' | 'soft' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonProps = Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'children'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Shows a spinner and blocks interaction while keeping the button's width. */
+    loading?: boolean;
+    disabled?: boolean;
+    /** Square button for a single icon. Give it an `aria-label`. */
+    iconOnly?: boolean;
+    /** Renders a link styled as a button. */
+    href?: string;
+    sx?: Sx;
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;