@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/suggestions/SuggestionsItem.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { 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 { getSuggestionsContext } from './context.js';
+
+	export type SuggestionsItemProps = Omit<HTMLButtonAttributes, 'children' | 'value'> & {
+		/** The prompt this stands for. Shown as the label too, unless there are `children`. */
+		value: string;
+		sx?: Sx;
+		ref?: HTMLButtonElement | null;
+		/** A shorter label, or an icon and a label. */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	// They rise into place one after another, the first time they are shown
+	const arrive = stylex.keyframes({
+		from: { opacity: 0, translate: '0 6px' },
+		to: { opacity: 1, translate: '0 0' }
+	});
+	const fade = stylex.keyframes({
+		from: { opacity: 0 },
+		to: { opacity: 1 }
+	});
+
+	const styles = stylex.create({
+		item: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			flexShrink: 0,
+			gap: '0.375rem',
+			minHeight: '2rem',
+			margin: 0,
+			paddingInline: '0.75rem',
+			borderWidth: 0,
+			borderRadius: `calc(${radius.xl} * 4 / 3)`,
+			backgroundColor: {
+				default: colors.surface,
+				':hover': { default: null, [HOVER]: colors.hover }
+			},
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text }
+			},
+			fontFamily: 'inherit',
+			fontSize: font.sizeSm,
+			fontWeight: font.weightMedium,
+			lineHeight: 1,
+			whiteSpace: 'nowrap',
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent',
+			animationName: { default: fade, [MOTION]: arrive },
+			animationDuration: motion.slow,
+			animationTimingFunction: motion.easeOut,
+			animationFillMode: 'backwards',
+			// Capped, so a long list does not keep the last ones waiting
+			animationDelay: 'calc(min(var(--narvi-suggestion-index, 0), 6) * 40ms)',
+			scale: { default: null, ':active': { default: null, [MOTION]: 0.97 } },
+			transitionProperty: {
+				default: 'background-color, color',
+				[MOTION]: 'scale, background-color, color'
+			},
+			transitionDuration: motion.base,
+			transitionTimingFunction: { default: 'ease', [MOTION]: `${motion.easeOut}, ease, ease` }
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		value,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		onclick,
+		...rest
+	}: SuggestionsItemProps = $props();
+
+	const suggestions = getSuggestionsContext();
+	const index = suggestions?.next() ?? 0;
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	data-slot="suggestion"
+	{...rest}
+	{...attrs([styles.item, shared.focusable, sx], className)}
+	style:--narvi-suggestion-index={index}
+	onclick={(event) => {
+		onclick?.(event);
+		if (!event.defaultPrevented) suggestions?.select(value);
+	}}
+>
+	{#if children}{@render children()}{:else}{value}{/if}
+</button>

package/dist/components/suggestions/SuggestionsItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SuggestionsItemProps = Omit<HTMLButtonAttributes, 'children' | 'value'> & {
+    /** The prompt this stands for. Shown as the label too, unless there are `children`. */
+    value: string;
+    sx?: Sx;
+    ref?: HTMLButtonElement | null;
+    /** A shorter label, or an icon and a label. */
+    children?: Snippet;
+};
+declare const SuggestionsItem: import("svelte").Component<SuggestionsItemProps, {}, "ref">;
+type SuggestionsItem = ReturnType<typeof SuggestionsItem>;
+export default SuggestionsItem;

package/dist/components/suggestions/SuggestionsRoot.svelte

@@ -0,0 +1,80 @@
+<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 { setSuggestionsContext } from './context.js';
+
+	export type SuggestionsRootProps = Omit<
+		HTMLAttributes<HTMLDivElement>,
+		'children' | 'onselect'
+	> & {
+		/** Called with an item's `value` when the person picks it. */
+		onselect?: (value: string) => void;
+		/**
+		 * `wrap` lets the items run onto more lines. `scroll` keeps them on one
+		 * line that scrolls sideways, which suits a narrow screen above the input.
+		 */
+		layout?: 'wrap' | 'scroll';
+		/** Accessible name for the group. */
+		label?: string;
+		sx?: Sx;
+		/** Suggestions.Item buttons. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		root: {
+			display: 'flex',
+			// Pills keep their own height, however tall the space they are placed in
+			alignItems: 'flex-start',
+			alignContent: 'flex-start',
+			gap: '0.5rem',
+			minWidth: 0
+		},
+		wrap: {
+			flexWrap: 'wrap',
+			justifyContent: 'center'
+		},
+		// The row fades out at its edges, a sign there is more to scroll to
+		scroll: {
+			flexWrap: 'nowrap',
+			overflowX: 'auto',
+			// Room for the focus ring, which the scroller would otherwise clip
+			padding: '0.25rem',
+			margin: '-4px',
+			scrollbarWidth: 'none',
+			maskImage:
+				'linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		onselect,
+		layout = 'wrap',
+		label = 'Suggestions',
+		sx,
+		class: className,
+		children,
+		...rest
+	}: SuggestionsRootProps = $props();
+
+	let count = 0;
+
+	setSuggestionsContext({
+		select: (value) => onselect?.(value),
+		next: () => count++
+	});
+</script>
+
+<div
+	role="group"
+	aria-label={label}
+	data-slot="suggestions"
+	{...rest}
+	{...attrs([styles.root, styles[layout], sx], className)}
+>
+	{@render children?.()}
+</div>

package/dist/components/suggestions/SuggestionsRoot.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SuggestionsRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onselect'> & {
+    /** Called with an item's `value` when the person picks it. */
+    onselect?: (value: string) => void;
+    /**
+     * `wrap` lets the items run onto more lines. `scroll` keeps them on one
+     * line that scrolls sideways, which suits a narrow screen above the input.
+     */
+    layout?: 'wrap' | 'scroll';
+    /** Accessible name for the group. */
+    label?: string;
+    sx?: Sx;
+    /** Suggestions.Item buttons. */
+    children?: Snippet;
+};
+declare const SuggestionsRoot: import("svelte").Component<SuggestionsRootProps, {}, "">;
+type SuggestionsRoot = ReturnType<typeof SuggestionsRoot>;
+export default SuggestionsRoot;

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

@@ -0,0 +1,7 @@
+export type SuggestionsContext = {
+    select(value: string): void;
+    /** Each item takes the next place in line, so they can arrive one after another. */
+    next(): number;
+};
+export declare function setSuggestionsContext(context: SuggestionsContext): void;
+export declare function getSuggestionsContext(): SuggestionsContext | undefined;

package/dist/components/suggestions/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.suggestions');
+export function setSuggestionsContext(context) {
+    setContext(KEY, context);
+}
+export function getSuggestionsContext() {
+    return getContext(KEY);
+}

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

@@ -0,0 +1,5 @@
+import Item from './SuggestionsItem.svelte';
+import Root from './SuggestionsRoot.svelte';
+export { Root, Item, Root as SuggestionsRoot, Item as SuggestionsItem };
+export type { SuggestionsItemProps } from './SuggestionsItem.svelte';
+export type { SuggestionsRootProps } from './SuggestionsRoot.svelte';

package/dist/components/suggestions/index.js

@@ -0,0 +1,5 @@
+import Item from './SuggestionsItem.svelte';
+import Root from './SuggestionsRoot.svelte';
+export { Root, Item, 
+//
+Root as SuggestionsRoot, Item as SuggestionsItem };

package/dist/components/switch/Switch.svelte

@@ -0,0 +1,175 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type SwitchProps = Omit<HTMLInputAttributes, 'type' | 'role' | 'children'> & {
+		checked?: boolean;
+		disabled?: boolean;
+		/** A second, quieter line under the label. */
+		description?: string;
+		/** Applied to the outermost element: the label when there is one, else the input. */
+		sx?: Sx;
+		ref?: HTMLInputElement | null;
+		/** Label content. Without it, give the switch an `aria-label`. */
+		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 FORCED = '@media (forced-colors: active)';
+
+	const styles = stylex.create({
+		root: {
+			display: 'inline-flex',
+			alignItems: 'flex-start',
+			gap: '0.625rem',
+			color: colors.text,
+			fontFamily: font.body,
+			fontSize: font.sizeMd,
+			lineHeight: '1.25rem',
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent'
+		},
+		rootDisabled: {
+			color: colors.textSubtle,
+			cursor: 'not-allowed'
+		},
+		description: {
+			display: 'block',
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug
+		},
+		input: {
+			position: 'relative',
+			flexShrink: 0,
+			boxSizing: 'border-box',
+			width: '2rem',
+			height: '1.125rem',
+			margin: 0,
+			marginBlock: '1px',
+			borderWidth: 0,
+			borderRadius: radius.full,
+			backgroundColor: {
+				default: colors.edge,
+				':hover': { default: null, [HOVER]: colors.edgeHover },
+				[FORCED]: { default: 'Canvas', ':checked': 'Highlight' }
+			},
+			backgroundImage: {
+				default: 'none',
+				':checked': `linear-gradient(180deg, ${colors.ithil}, ${colors.ithilStrong})`,
+				[FORCED]: 'none'
+			},
+			boxShadow: {
+				default: `inset 0 1px 2px ${colors.shade}`,
+				':checked': `inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 8px ${colors.glow}`
+			},
+			forcedColorAdjust: 'none',
+			appearance: 'none',
+			cursor: { default: 'pointer', ':disabled': 'not-allowed' },
+			opacity: { default: 1, ':disabled': 0.5 },
+			outlineStyle: 'solid',
+			outlineWidth: { default: '1px', ':focus-visible': '2px' },
+			outlineColor: {
+				default: 'transparent',
+				':focus-visible': colors.focusRing,
+				[FORCED]: { default: 'ButtonText', ':focus-visible': 'Highlight' }
+			},
+			outlineOffset: { default: '-1px', ':focus-visible': '2px' },
+			transitionProperty: 'background-color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease',
+			// Thumb. It travels and stretches with transforms, so nothing is laid out
+			// again while it moves. The direction and the stretch both mirror in RTL.
+			'::before': {
+				content: '""',
+				position: 'absolute',
+				top: '2px',
+				insetInlineStart: '2px',
+				width: '0.875rem',
+				height: '0.875rem',
+				translate: {
+					default: '0 0',
+					':checked': { default: '14px 0', ':dir(rtl)': '-14px 0' }
+				},
+				// While pressed, the thumb stretches towards where it is about to go
+				scale: { default: null, ':active': { default: null, [MOTION]: '1.2 1' } },
+				transformOrigin: {
+					default: 'left center',
+					':dir(rtl)': 'right center',
+					':checked': { default: 'right center', ':dir(rtl)': 'left center' }
+				},
+				borderRadius: radius.full,
+				backgroundColor: {
+					default: '#fff',
+					':checked': colors.onIthil,
+					[FORCED]: { default: 'ButtonText', ':checked': 'HighlightText' }
+				},
+				boxShadow: '0 1px 2px rgb(0 0 0 / 0.4)',
+				transitionProperty: {
+					default: 'background-color',
+					[MOTION]: 'translate, scale, transform-origin, background-color'
+				},
+				transitionDuration: '200ms',
+				transitionTimingFunction: motion.easeOut
+			}
+		},
+		// Without a label, extend the hit area to 40px tall
+		standalone: {
+			marginBlock: 0,
+			'::after': {
+				content: '""',
+				position: 'absolute',
+				insetInline: '-4px',
+				insetBlock: '-11px'
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		checked = $bindable(false),
+		disabled = false,
+		description,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: SwitchProps = $props();
+</script>
+
+{#if children}
+	<label {...attrs([styles.root, disabled && styles.rootDisabled, sx], className)}>
+		<input
+			bind:this={ref}
+			bind:checked
+			type="checkbox"
+			role="switch"
+			{disabled}
+			{...rest}
+			{...stylex.attrs(styles.input)}
+		/>
+		<span>
+			{@render children()}
+			{#if description}
+				<span {...stylex.attrs(styles.description)}>{description}</span>
+			{/if}
+		</span>
+	</label>
+{:else}
+	<input
+		bind:this={ref}
+		bind:checked
+		type="checkbox"
+		role="switch"
+		{disabled}
+		{...rest}
+		{...attrs([styles.input, styles.standalone, sx], className)}
+	/>
+{/if}

package/dist/components/switch/Switch.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SwitchProps = Omit<HTMLInputAttributes, 'type' | 'role' | 'children'> & {
+    checked?: boolean;
+    disabled?: boolean;
+    /** A second, quieter line under the label. */
+    description?: string;
+    /** Applied to the outermost element: the label when there is one, else the input. */
+    sx?: Sx;
+    ref?: HTMLInputElement | null;
+    /** Label content. Without it, give the switch an `aria-label`. */
+    children?: Snippet;
+};
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,170 @@
+<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 { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type TabItem = { value: string; label: string; count?: number; disabled?: boolean };
+
+	export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		tabs: TabItem[];
+		/** The selected tab's value. Bindable. Defaults to the first tab. */
+		value?: string;
+		/** Accessible name for the row of tabs. */
+		label: string;
+		sx?: Sx;
+		/** The panel for the selected tab. It receives the selected value. */
+		children?: Snippet<[string]>;
+	};
+
+	// StyleX needs these in the same file to evaluate them at build time
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const FORCED = '@media (forced-colors: active)';
+
+	const styles = stylex.create({
+		root: {
+			minWidth: 0,
+			fontFamily: font.body
+		},
+		list: {
+			WebkitAppRegion: 'no-drag',
+			display: 'flex',
+			gap: '1.25rem',
+			borderBottomWidth: '1px',
+			borderBottomStyle: 'solid',
+			borderBottomColor: colors.line
+		},
+		tab: {
+			position: 'relative',
+			flexShrink: 0,
+			minHeight: '2.125rem',
+			margin: 0,
+			padding: 0,
+			borderWidth: 0,
+			borderRadius: radius.xs,
+			backgroundColor: 'transparent',
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text }
+			},
+			fontFamily: 'inherit',
+			fontSize: font.sizeMd,
+			fontWeight: font.weightMedium,
+			lineHeight: 1,
+			whiteSpace: 'nowrap',
+			cursor: { default: 'pointer', ':disabled': 'not-allowed' },
+			opacity: { default: 1, ':disabled': 0.5 },
+			WebkitTapHighlightColor: 'transparent',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		},
+		// The selected tab is marked by a lit line sitting on the list's rule
+		selected: {
+			color: colors.text,
+			'::after': {
+				content: '""',
+				position: 'absolute',
+				insetInline: 0,
+				bottom: '-1px',
+				height: '2px',
+				borderRadius: '2px',
+				backgroundColor: { default: colors.ithil, [FORCED]: 'Highlight' },
+				boxShadow: `0 0 8px ${colors.glow}`,
+				forcedColorAdjust: 'none'
+			}
+		},
+		count: {
+			marginInlineStart: '0.375rem',
+			color: colors.textSubtle,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			fontVariantNumeric: 'tabular-nums'
+		},
+		panel: {
+			paddingTop: '0.875rem',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		tabs,
+		value = $bindable(),
+		label,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: TabsProps = $props();
+
+	const uid = $props.id();
+	const selected = $derived(value ?? tabs[0]?.value);
+	let list = $state<HTMLDivElement | null>(null);
+
+	// Arrow keys move through the tabs and select as they go; Home and End jump to the ends.
+	function onkeydown(event: KeyboardEvent) {
+		const enabled = tabs.filter((tab) => !tab.disabled);
+		const current = enabled.findIndex((tab) => tab.value === selected);
+		const rtl = list ? getComputedStyle(list).direction === 'rtl' : false;
+		const step = { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 }[event.key];
+		let next: number;
+		if (step) next = (current + step + enabled.length) % enabled.length;
+		else if (event.key === 'Home') next = 0;
+		else if (event.key === 'End') next = enabled.length - 1;
+		else return;
+		event.preventDefault();
+		value = enabled[next].value;
+		list?.querySelector<HTMLElement>(`[data-value="${CSS.escape(enabled[next].value)}"]`)?.focus();
+	}
+</script>
+
+<div {...rest} {...attrs([styles.root, sx], className)}>
+	<div
+		bind:this={list}
+		role="tablist"
+		aria-label={label}
+		{onkeydown}
+		{...stylex.attrs(styles.list)}
+	>
+		{#each tabs as tab (tab.value)}
+			{@const active = tab.value === selected}
+			<button
+				type="button"
+				role="tab"
+				id="{uid}-tab-{tab.value}"
+				data-value={tab.value}
+				aria-selected={active}
+				aria-controls={children ? `${uid}-panel` : undefined}
+				tabindex={active ? 0 : -1}
+				disabled={tab.disabled}
+				onclick={() => (value = tab.value)}
+				{...stylex.attrs(styles.tab, active && styles.selected)}
+			>
+				{tab.label}{#if tab.count !== undefined}<span {...stylex.attrs(styles.count)}
+						>{tab.count}</span
+					>{/if}
+			</button>
+		{/each}
+	</div>
+	{#if children && selected !== undefined}
+		<div
+			role="tabpanel"
+			id="{uid}-panel"
+			aria-labelledby="{uid}-tab-{selected}"
+			tabindex="0"
+			{...stylex.attrs(styles.panel)}
+		>
+			{@render children(selected)}
+		</div>
+	{/if}
+</div>

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type TabItem = {
+    value: string;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+};
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    tabs: TabItem[];
+    /** The selected tab's value. Bindable. Defaults to the first tab. */
+    value?: string;
+    /** Accessible name for the row of tabs. */
+    label: string;
+    sx?: Sx;
+    /** The panel for the selected tab. It receives the selected value. */
+    children?: Snippet<[string]>;
+};
+declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;