@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/dialog/styles.js

@@ -0,0 +1,136 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, font, motion, radius, space } from '../../tokens.stylex.js';
+const MOTION = '@media (prefers-reduced-motion: no-preference)';
+const FORCED = '@media (forced-colors: active)';
+const CLOSED = ':is([data-state="closed"])';
+export const dialog = stylex.create({
+    overlay: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 50,
+        backgroundColor: 'light-dark(rgb(20 23 28 / 0.32), rgb(0 0 0 / 0.56))',
+        backdropFilter: 'blur(2px)',
+        opacity: { default: 1, '@starting-style': 0, [CLOSED]: 0 },
+        transitionProperty: 'opacity',
+        transitionDuration: { default: motion.base, [CLOSED]: motion.fast },
+        transitionTimingFunction: motion.easeOut
+    },
+    // Centred, and never past the window: 2rem of margin, the body scrolls inside
+    content: {
+        position: 'fixed',
+        insetInline: 0,
+        top: '50%',
+        zIndex: 51,
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        width: 'calc(100vw - 2rem)',
+        maxHeight: 'calc(100dvh - 4rem)',
+        marginInline: 'auto',
+        translate: '0 -50%',
+        borderRadius: radius.frame,
+        backgroundColor: colors.bgRaised,
+        boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, inset 0 1px 0 ${colors.highlight}, 0 24px 64px -16px rgb(0 0 0 / 0.5)`,
+        color: colors.text,
+        fontFamily: font.body,
+        fontSize: font.sizeMd,
+        lineHeight: font.leadingNormal,
+        outlineStyle: 'solid',
+        outlineWidth: { default: 0, [FORCED]: '1px' },
+        outlineColor: 'CanvasText',
+        // A modal is not tied to a trigger, so it grows from its own centre
+        opacity: { default: 1, '@starting-style': 0, [CLOSED]: 0 },
+        scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.96, [CLOSED]: 0.98 } },
+        transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+        transitionDuration: { default: motion.base, [CLOSED]: motion.fast },
+        transitionTimingFunction: motion.easeOut
+    },
+    sm: { maxWidth: '24rem' },
+    md: { maxWidth: '32rem' },
+    lg: { maxWidth: '44rem' },
+    // A sheet: the full height of the window, along one edge
+    sheet: {
+        top: 0,
+        bottom: 0,
+        width: 'min(26rem, calc(100vw - 2rem))',
+        maxHeight: 'none',
+        marginInline: 0,
+        translate: 'none',
+        borderRadius: 0,
+        scale: null,
+        transitionProperty: { default: 'opacity', [MOTION]: 'opacity, translate' },
+        transitionDuration: { default: motion.slow, [CLOSED]: motion.base },
+        transitionTimingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)'
+    },
+    end: {
+        insetInlineStart: 'auto',
+        insetInlineEnd: 0,
+        translate: {
+            default: null,
+            [MOTION]: {
+                default: '0 0',
+                '@starting-style': '100% 0',
+                [CLOSED]: '100% 0'
+            }
+        }
+    },
+    start: {
+        insetInlineStart: 0,
+        insetInlineEnd: 'auto',
+        translate: {
+            default: null,
+            [MOTION]: {
+                default: '0 0',
+                '@starting-style': '-100% 0',
+                [CLOSED]: '-100% 0'
+            }
+        }
+    },
+    header: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.375rem',
+        flexShrink: 0,
+        paddingTop: space.x6,
+        paddingInline: space.x6,
+        // Room for the close button in the corner
+        paddingInlineEnd: '3.5rem'
+    },
+    title: {
+        margin: 0,
+        color: colors.text,
+        fontSize: font.sizeXl,
+        fontWeight: font.weightSemibold,
+        lineHeight: font.leadingSnug
+    },
+    description: {
+        margin: 0,
+        color: colors.textMuted,
+        fontSize: font.sizeMd,
+        lineHeight: font.leadingNormal
+    },
+    body: {
+        flexGrow: 1,
+        minHeight: 0,
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        paddingBlock: space.x4,
+        paddingInline: space.x6,
+        scrollbarWidth: 'thin'
+    },
+    footer: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        gap: space.x2,
+        flexShrink: 0,
+        paddingTop: space.x2,
+        paddingBottom: space.x6,
+        paddingInline: space.x6
+    },
+    close: {
+        position: 'absolute',
+        top: '0.875rem',
+        insetInlineEnd: '0.875rem'
+    }
+});

package/dist/components/divider/Divider.svelte

@@ -0,0 +1,42 @@
+<!-- A labelled break in a timeline: a new day, or "Context compacted". -->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font } from '../../tokens.stylex.js';
+
+	export type DividerProps = {
+		label: string;
+		icon?: Snippet;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const styles = stylex.create({
+		divider: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.75rem',
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			fontWeight: font.weightMedium,
+			whiteSpace: 'nowrap',
+			'::before': { content: '""', flexGrow: 1, height: '1px', backgroundColor: colors.line },
+			'::after': { content: '""', flexGrow: 1, height: '1px', backgroundColor: colors.line }
+		},
+		label: { display: 'inline-flex', alignItems: 'center', gap: '0.375rem' }
+	});
+</script>
+
+<script lang="ts">
+	let { label, icon, sx, class: className }: DividerProps = $props();
+</script>
+
+<div
+	role="separator"
+	aria-label={label}
+	data-slot="divider"
+	{...attrs([styles.divider, sx], className)}
+>
+	<span aria-hidden="true" {...stylex.attrs(styles.label)}>{@render icon?.()}{label}</span>
+</div>

package/dist/components/divider/Divider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type DividerProps = {
+    label: string;
+    icon?: Snippet;
+    sx?: Sx;
+    class?: string;
+};
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/empty-state/EmptyState.svelte

@@ -0,0 +1,82 @@
+<!-- Nothing here yet: what this place is for, and how to fill it. -->
+<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, radius, space } from '../../tokens.stylex.js';
+
+	export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		title: string;
+		description?: string;
+		/** An icon or picture above the title. */
+		media?: Snippet;
+		/** What to do: a button or two. */
+		actions?: Snippet;
+		sx?: Sx;
+	};
+
+	const styles = stylex.create({
+		empty: {
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'center',
+			justifyContent: 'center',
+			gap: space.x2,
+			paddingBlock: space.x10,
+			paddingInline: space.x6,
+			textAlign: 'center',
+			textWrap: 'balance'
+		},
+		media: {
+			display: 'grid',
+			placeItems: 'center',
+			width: '2.75rem',
+			height: '2.75rem',
+			marginBottom: space.x2,
+			borderRadius: radius.xl,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.textMuted
+		},
+		title: {
+			margin: 0,
+			color: colors.text,
+			fontSize: font.sizeLg,
+			fontWeight: font.weightSemibold
+		},
+		description: {
+			maxWidth: '26rem',
+			margin: 0,
+			color: colors.textMuted,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingNormal
+		},
+		actions: {
+			display: 'flex',
+			flexWrap: 'wrap',
+			justifyContent: 'center',
+			gap: space.x2,
+			marginTop: space.x3
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		description,
+		media,
+		actions,
+		sx,
+		class: className,
+		...rest
+	}: EmptyStateProps = $props();
+</script>
+
+<div data-slot="empty-state" {...rest} {...attrs([styles.empty, sx], className)}>
+	{#if media}<div {...stylex.attrs(styles.media)}>{@render media()}</div>{/if}
+	<p {...stylex.attrs(styles.title)}>{title}</p>
+	{#if description}<p {...stylex.attrs(styles.description)}>{description}</p>{/if}
+	{#if actions}<div {...stylex.attrs(styles.actions)}>{@render actions()}</div>{/if}
+</div>

package/dist/components/empty-state/EmptyState.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 EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    title: string;
+    description?: string;
+    /** An icon or picture above the title. */
+    media?: Snippet;
+    /** What to do: a button or two. */
+    actions?: Snippet;
+    sx?: Sx;
+};
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/field/Field.svelte

@@ -0,0 +1,132 @@
+<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 } from '../../tokens.stylex.js';
+	import { setFieldContext } from './context.js';
+
+	export type FieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Visible label, linked to the control inside. */
+		label: string;
+		/** Help text shown under the control. */
+		description?: string;
+		/** Error message. When set, the control is marked invalid. */
+		error?: string | null;
+		required?: boolean;
+		/** Marks the field as optional beside the label. */
+		optional?: boolean;
+		disabled?: boolean;
+		/** `id` for the control. Generated when omitted. */
+		id?: string;
+		sx?: Sx;
+		/** The control: an Input, Textarea, or any element that reads the field context. */
+		children: Snippet;
+	};
+
+	const styles = stylex.create({
+		root: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.375rem',
+			minWidth: 0,
+			fontFamily: font.body
+		},
+		labelRow: {
+			display: 'flex',
+			alignItems: 'baseline',
+			justifyContent: 'space-between',
+			gap: '0.75rem'
+		},
+		label: {
+			color: colors.text,
+			fontSize: font.sizeSm,
+			fontWeight: font.weightMedium,
+			lineHeight: font.leadingSnug
+		},
+		labelDisabled: {
+			color: colors.textSubtle
+		},
+		required: {
+			marginInlineStart: '0.1875rem',
+			color: colors.danger
+		},
+		optional: {
+			color: colors.textSubtle,
+			fontSize: font.sizeSm,
+			lineHeight: font.leadingSnug
+		},
+		description: {
+			margin: 0,
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug,
+			textWrap: 'pretty'
+		},
+		error: {
+			margin: 0,
+			color: colors.danger,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug,
+			textWrap: 'pretty'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		description,
+		error,
+		required = false,
+		optional = false,
+		disabled = false,
+		id,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: FieldProps = $props();
+
+	const uid = $props.id();
+	const controlId = $derived(id ?? `${uid}-control`);
+	const descriptionId = `${uid}-description`;
+	const errorId = `${uid}-error`;
+
+	setFieldContext({
+		get id() {
+			return controlId;
+		},
+		get describedBy() {
+			const ids = [description ? descriptionId : null, error ? errorId : null].filter(Boolean);
+			return ids.length ? ids.join(' ') : undefined;
+		},
+		get invalid() {
+			return Boolean(error);
+		},
+		get disabled() {
+			return disabled;
+		},
+		get required() {
+			return required;
+		}
+	});
+</script>
+
+<div {...rest} {...attrs([styles.root, sx], className)}>
+	<div {...stylex.attrs(styles.labelRow)}>
+		<label for={controlId} {...stylex.attrs(styles.label, disabled && styles.labelDisabled)}>
+			{label}{#if required}<span aria-hidden="true" {...stylex.attrs(styles.required)}>*</span>{/if}
+		</label>
+		{#if optional}
+			<span {...stylex.attrs(styles.optional)}>Optional</span>
+		{/if}
+	</div>
+	{@render children()}
+	{#if description}
+		<p id={descriptionId} {...stylex.attrs(styles.description)}>{description}</p>
+	{/if}
+	{#if error}
+		<p id={errorId} {...stylex.attrs(styles.error)}>{error}</p>
+	{/if}
+</div>

package/dist/components/field/Field.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type FieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Visible label, linked to the control inside. */
+    label: string;
+    /** Help text shown under the control. */
+    description?: string;
+    /** Error message. When set, the control is marked invalid. */
+    error?: string | null;
+    required?: boolean;
+    /** Marks the field as optional beside the label. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** `id` for the control. Generated when omitted. */
+    id?: string;
+    sx?: Sx;
+    /** The control: an Input, Textarea, or any element that reads the field context. */
+    children: Snippet;
+};
+declare const Field: import("svelte").Component<FieldProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

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

@@ -0,0 +1,12 @@
+export type FieldContext = {
+    /** `id` for the control, matching the label's `for`. */
+    readonly id: string;
+    /** Space-separated ids of the description and error, when present. */
+    readonly describedBy: string | undefined;
+    readonly invalid: boolean;
+    readonly disabled: boolean;
+    readonly required: boolean;
+};
+export declare function setFieldContext(context: FieldContext): void;
+/** Returns the surrounding Field, if the control is inside one. */
+export declare function getFieldContext(): FieldContext | undefined;

package/dist/components/field/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('narvi.field');
+export function setFieldContext(context) {
+    setContext(KEY, context);
+}
+/** Returns the surrounding Field, if the control is inside one. */
+export function getFieldContext() {
+    return getContext(KEY);
+}

package/dist/components/frame/Frame.svelte

@@ -0,0 +1,88 @@
+<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 FrameProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+		/** Element to render. */
+		as?: 'div' | 'section' | 'article';
+		/** Heading shown above the content. */
+		title?: string;
+		/** A short note at the far end of the header, set in monospace. */
+		tag?: string;
+		/** Heading level for the title. */
+		level?: 2 | 3 | 4 | 5 | 6;
+		sx?: Sx;
+		/** What the frame holds: usually one Card. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// A tray around an inset panel. Its radius is the Card's radius plus this padding.
+		root: {
+			display: 'flex',
+			flexDirection: 'column',
+			boxSizing: 'border-box',
+			minWidth: 0,
+			padding: '0.3125rem',
+			borderRadius: radius.frame,
+			backgroundColor: colors.surface,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, inset 0 1px 0 ${colors.highlight}`,
+			color: colors.text,
+			fontFamily: font.body
+		},
+		header: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.625rem',
+			paddingTop: '0.6875rem',
+			paddingBottom: '0.75rem',
+			paddingInline: '0.75rem'
+		},
+		title: {
+			flexGrow: 1,
+			minWidth: 0,
+			margin: 0,
+			fontSize: font.sizeMd,
+			fontWeight: font.weightMedium,
+			lineHeight: font.leadingSnug
+		},
+		tag: {
+			flexShrink: 0,
+			color: colors.textSubtle,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			lineHeight: 1
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		as = 'div',
+		title,
+		tag,
+		level = 3,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: FrameProps = $props();
+</script>
+
+<svelte:element this={as} {...rest} {...attrs([styles.root, shared.edged, sx], className)}>
+	{#if title || tag}
+		<div {...stylex.attrs(styles.header)}>
+			{#if title}
+				<svelte:element this={`h${level}`} {...stylex.attrs(styles.title)}>{title}</svelte:element>
+			{/if}
+			{#if tag}
+				<span {...stylex.attrs(styles.tag)}>{tag}</span>
+			{/if}
+		</div>
+	{/if}
+	{@render children?.()}
+</svelte:element>

package/dist/components/frame/Frame.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 FrameProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /** Element to render. */
+    as?: 'div' | 'section' | 'article';
+    /** Heading shown above the content. */
+    title?: string;
+    /** A short note at the far end of the header, set in monospace. */
+    tag?: string;
+    /** Heading level for the title. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    sx?: Sx;
+    /** What the frame holds: usually one Card. */
+    children?: Snippet;
+};
+declare const Frame: import("svelte").Component<FrameProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/heading/Heading.svelte

@@ -0,0 +1,82 @@
+<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 } from '../../tokens.stylex.js';
+
+	export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+	export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+
+	export type HeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> & {
+		/** Semantic level: renders `h1` to `h6`. Pick it for the document outline, not the look. */
+		level?: HeadingLevel;
+		/** Visual size. `xl` and up are set in the display serif; smaller ones in the interface font. */
+		size?: HeadingSize;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			margin: 0,
+			color: colors.text,
+			textWrap: 'balance'
+		},
+		// Titles inside the interface: cards, sections, dialogs
+		interface: {
+			fontFamily: font.body,
+			fontWeight: font.weightSemibold,
+			lineHeight: font.leadingSnug
+		},
+		// Page-level headings, in the serif
+		display: {
+			fontFamily: font.display,
+			fontWeight: font.weightDisplay,
+			letterSpacing: font.trackingDisplay,
+			lineHeight: font.leadingTight
+		}
+	});
+
+	const sizes = stylex.create({
+		sm: { fontSize: font.sizeMd },
+		md: { fontSize: font.sizeLg },
+		lg: { fontSize: '1.125rem', letterSpacing: '-0.01em' },
+		xl: { fontSize: '1.625rem' },
+		'2xl': { fontSize: '2.125rem' },
+		'3xl': { fontSize: '2.75rem' },
+		'4xl': {
+			fontSize: 'clamp(3.25rem, 6.4vw, 5.25rem)',
+			lineHeight: 0.98,
+			letterSpacing: '-0.022em'
+		}
+	});
+
+	const defaultSize: Record<HeadingLevel, HeadingSize> = {
+		1: '3xl',
+		2: '2xl',
+		3: 'lg',
+		4: 'md',
+		5: 'sm',
+		6: 'sm'
+	};
+
+	const isDisplay = (size: HeadingSize) => size.endsWith('xl');
+</script>
+
+<script lang="ts">
+	let { level = 2, size, sx, class: className, children, ...rest }: HeadingProps = $props();
+
+	const resolved = $derived(size ?? defaultSize[level]);
+</script>
+
+<svelte:element
+	this={`h${level}`}
+	{...rest}
+	{...attrs(
+		[styles.base, isDisplay(resolved) ? styles.display : styles.interface, sizes[resolved], sx],
+		className
+	)}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/components/heading/Heading.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type HeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> & {
+    /** Semantic level: renders `h1` to `h6`. Pick it for the document outline, not the look. */
+    level?: HeadingLevel;
+    /** Visual size. `xl` and up are set in the display serif; smaller ones in the interface font. */
+    size?: HeadingSize;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Heading: import("svelte").Component<HeadingProps, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;