@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/composer/ComposerAttachment.svelte

@@ -0,0 +1,173 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import { useComposer } from './context.js';
+
+	export type ComposerAttachmentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		file: File;
+		/** Accessible name of the remove button. Receives the file's name. */
+		removeLabel?: (name: string) => string;
+		sx?: Sx;
+	};
+
+	/** "840 B", "24 KB", "3.2 MB" */
+	export function formatSize(bytes: number): string {
+		if (bytes < 1000) return `${bytes} B`;
+		if (bytes < 1_000_000) return `${Math.round(bytes / 1000)} KB`;
+		return `${(bytes / 1_000_000).toFixed(1)} MB`;
+	}
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		// A chip: the thumbnail's radius plus the padding, so the corners sit concentric
+		chip: {
+			position: 'relative',
+			boxSizing: 'border-box',
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			maxWidth: '13.75rem',
+			height: '2.75rem',
+			padding: '0.375rem',
+			// Clear of the remove button on the corner
+			paddingInlineEnd: '1rem',
+			borderRadius: radius.xl,
+			backgroundColor: colors.surface,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			cursor: 'default',
+			opacity: { default: 1, '@starting-style': 0 },
+			scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.94 } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+			transitionDuration: motion.base,
+			transitionTimingFunction: motion.easeOut
+		},
+		thumb: {
+			display: 'grid',
+			placeItems: 'center',
+			flexShrink: 0,
+			width: '2rem',
+			height: '2rem',
+			overflow: 'hidden',
+			borderRadius: radius.sm,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.textMuted
+		},
+		image: {
+			display: 'block',
+			width: '100%',
+			height: '100%',
+			objectFit: 'cover'
+		},
+		text: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '2px',
+			minWidth: 0,
+			lineHeight: 1.2
+		},
+		name: {
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap',
+			color: colors.text,
+			fontSize: font.sizeSm,
+			fontWeight: font.weightMedium
+		},
+		meta: {
+			color: colors.textSubtle,
+			fontFamily: font.mono,
+			fontSize: '0.6875rem',
+			fontVariantNumeric: 'tabular-nums'
+		},
+		// A small round button on the corner, out of the way of the name
+		remove: {
+			position: 'absolute',
+			top: '-6px',
+			insetInlineEnd: '-6px',
+			display: 'grid',
+			placeItems: 'center',
+			width: '1.25rem',
+			height: '1.25rem',
+			margin: 0,
+			padding: 0,
+			borderWidth: 0,
+			borderRadius: radius.full,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, 0 1px 2px ${colors.shade}`,
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text }
+			},
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent',
+			// A 32px target, without growing the visible circle
+			'::after': { content: '""', position: 'absolute', inset: '-6px' },
+			transitionProperty: 'color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		file,
+		removeLabel = (name) => `Remove ${name}`,
+		sx,
+		class: className,
+		...rest
+	}: ComposerAttachmentProps = $props();
+
+	const composer = useComposer('Attachment');
+	const isImage = $derived(file.type.startsWith('image/'));
+	const extension = $derived(/\.([a-z0-9]{1,6})$/i.exec(file.name)?.[1]?.toUpperCase());
+
+	// A preview for images, released as soon as the chip goes
+	let preview = $state<string>();
+	$effect(() => {
+		if (!isImage) return;
+		const url = URL.createObjectURL(file);
+		preview = url;
+		return () => URL.revokeObjectURL(url);
+	});
+</script>
+
+<div
+	data-slot="composer-attachment"
+	{...rest}
+	{...attrs([styles.chip, shared.edged, sx], className)}
+>
+	<span {...stylex.attrs(styles.thumb)}>
+		{#if preview}
+			<img src={preview} alt="" {...stylex.attrs(styles.image)} />
+		{:else}
+			<Glyph name="file" />
+		{/if}
+	</span>
+	<span {...stylex.attrs(styles.text)}>
+		<span {...stylex.attrs(styles.name)} title={file.name}>{file.name}</span>
+		<span {...stylex.attrs(styles.meta)}>
+			{extension ? `${extension} · ` : ''}{formatSize(file.size)}
+		</span>
+	</span>
+	<button
+		type="button"
+		aria-label={removeLabel(file.name)}
+		{...stylex.attrs(styles.remove, shared.focusable)}
+		onclick={() => {
+			composer.removeFile(file);
+			composer.announce(`Removed ${file.name}`);
+			// The chip and its button are gone; the text is the natural place to land
+			composer.focus();
+		}}
+	>
+		<Glyph name="close" size={12} stroke={1.75} />
+	</button>
+</div>

package/dist/components/composer/ComposerAttachment.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ComposerAttachmentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    file: File;
+    /** Accessible name of the remove button. Receives the file's name. */
+    removeLabel?: (name: string) => string;
+    sx?: Sx;
+};
+/** "840 B", "24 KB", "3.2 MB" */
+export declare function formatSize(bytes: number): string;
+declare const ComposerAttachment: import("svelte").Component<ComposerAttachmentProps, {}, "">;
+type ComposerAttachment = ReturnType<typeof ComposerAttachment>;
+export default ComposerAttachment;

package/dist/components/composer/ComposerAttachments.svelte

@@ -0,0 +1,63 @@
+<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 ComposerAttachment from './ComposerAttachment.svelte';
+	import { useComposer } from './context.js';
+
+	export type ComposerAttachmentsProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+		/** Accessible name of the list. */
+		label?: string;
+		sx?: Sx;
+		/** Your own rendering of each file, in place of a Composer.Attachment. */
+		children?: Snippet<[File]>;
+	};
+
+	const styles = stylex.create({
+		list: {
+			display: 'flex',
+			flexWrap: 'wrap',
+			gap: '0.5rem',
+			margin: 0,
+			// Room above for the remove buttons, which sit on the chips' corners
+			paddingTop: '0.375rem',
+			paddingInline: '2px',
+			paddingBottom: '2px',
+			listStyleType: 'none'
+		},
+		item: { display: 'flex', minWidth: 0 }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label = 'Attachments',
+		sx,
+		class: className,
+		children,
+		...rest
+	}: ComposerAttachmentsProps = $props();
+
+	const composer = useComposer('Attachments');
+	$effect(() => composer.registerAttachments());
+</script>
+
+{#if composer.files.length}
+	<ul
+		aria-label={label}
+		data-slot="composer-attachments"
+		{...rest}
+		{...attrs([styles.list, sx], className)}
+	>
+		{#each composer.files as file (file)}
+			<li {...stylex.attrs(styles.item)}>
+				{#if children}
+					{@render children(file)}
+				{:else}
+					<ComposerAttachment {file} />
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}

package/dist/components/composer/ComposerAttachments.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ComposerAttachmentsProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    /** Accessible name of the list. */
+    label?: string;
+    sx?: Sx;
+    /** Your own rendering of each file, in place of a Composer.Attachment. */
+    children?: Snippet<[File]>;
+};
+declare const ComposerAttachments: import("svelte").Component<ComposerAttachmentsProps, {}, "">;
+type ComposerAttachments = ReturnType<typeof ComposerAttachments>;
+export default ComposerAttachments;