@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/tool/ToolInput.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Sx } from '../../internal/sx.js';
+	import ToolSection from './ToolSection.svelte';
+
+	export type ToolInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The arguments the model passed. Shown as indented JSON unless already a string. */
+		value?: unknown;
+		label?: string;
+		sx?: Sx;
+		/** Your own rendering of the arguments, in place of the JSON. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { label = 'Input', ...rest }: ToolInputProps = $props();
+</script>
+
+<ToolSection {label} layout="list" data-slot="tool-input" {...rest} />

package/dist/components/tool/ToolInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Sx } from '../../internal/sx.js';
+export type ToolInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The arguments the model passed. Shown as indented JSON unless already a string. */
+    value?: unknown;
+    label?: string;
+    sx?: Sx;
+    /** Your own rendering of the arguments, in place of the JSON. */
+    children?: Snippet;
+};
+declare const ToolInput: import("svelte").Component<ToolInputProps, {}, "">;
+type ToolInput = ReturnType<typeof ToolInput>;
+export default ToolInput;

package/dist/components/tool/ToolOutput.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Sx } from '../../internal/sx.js';
+	import { getToolContext } from './context.js';
+	import ToolSection from './ToolSection.svelte';
+
+	export type ToolOutputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** What the tool returned. Shown as indented JSON unless already a string. */
+		value?: unknown;
+		/** Why the tool failed. Shown in place of the value, in red. */
+		error?: string;
+		label?: string;
+		sx?: Sx;
+		/** Your own rendering of the result, in place of the JSON. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { value, error, label, ...rest }: ToolOutputProps = $props();
+
+	const tool = getToolContext('Output');
+	const failed = $derived(error !== undefined || tool.state === 'error');
+</script>
+
+<ToolSection
+	label={label ?? (failed ? 'Error' : 'Output')}
+	value={error ?? value}
+	tone={failed ? 'danger' : 'default'}
+	data-slot="tool-output"
+	{...rest}
+/>

package/dist/components/tool/ToolOutput.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 ToolOutputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** What the tool returned. Shown as indented JSON unless already a string. */
+    value?: unknown;
+    /** Why the tool failed. Shown in place of the value, in red. */
+    error?: string;
+    label?: string;
+    sx?: Sx;
+    /** Your own rendering of the result, in place of the JSON. */
+    children?: Snippet;
+};
+declare const ToolOutput: import("svelte").Component<ToolOutputProps, {}, "">;
+type ToolOutput = ReturnType<typeof ToolOutput>;
+export default ToolOutput;

package/dist/components/tool/ToolRoot.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ActionKind } from '../../internal/kinds.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font } from '../../tokens.stylex.js';
+	import { setToolContext, type ToolState } from './context.js';
+
+	export type ToolRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The tool's name, such as `search_docs`. Shown in the trigger unless it has children. */
+		name: string;
+		/** What sort of tool it is, which picks its icon. */
+		kind?: ActionKind;
+		state?: ToolState;
+		/** Whether the input and output are showing. Bindable. */
+		open?: boolean;
+		/** Read out after the name, for each state. */
+		stateLabels?: Partial<Record<ToolState, string>>;
+		sx?: Sx;
+		ref?: HTMLDivElement | null;
+		/** A Tool.Trigger and a Tool.Content. */
+		children?: Snippet;
+	};
+
+	const LABELS: Record<ToolState, string> = {
+		pending: 'Preparing',
+		running: 'Running',
+		complete: 'Done',
+		error: 'Failed'
+	};
+
+	const styles = stylex.create({
+		root: {
+			boxSizing: 'border-box',
+			display: 'flex',
+			flexDirection: 'column',
+			minWidth: 0,
+			color: colors.text,
+			fontFamily: font.body
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		name,
+		kind = 'tool',
+		state = 'running',
+		open = $bindable(false),
+		stateLabels,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: ToolRootProps = $props();
+
+	const uid = $props.id();
+
+	setToolContext({
+		get name() {
+			return name;
+		},
+		get kind() {
+			return kind;
+		},
+		get state() {
+			return state;
+		},
+		get stateLabel() {
+			return stateLabels?.[state] ?? LABELS[state];
+		},
+		get open() {
+			return open;
+		},
+		toggle() {
+			open = !open;
+		},
+		triggerId: `${uid}-trigger`,
+		contentId: `${uid}-content`
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="tool"
+	data-state={state}
+	data-open={open || undefined}
+	{...rest}
+	{...attrs([styles.root, sx], className)}
+>
+	{@render children?.()}
+</div>

package/dist/components/tool/ToolRoot.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ActionKind } from '../../internal/kinds.js';
+import { type Sx } from '../../internal/sx.js';
+import { type ToolState } from './context.js';
+export type ToolRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The tool's name, such as `search_docs`. Shown in the trigger unless it has children. */
+    name: string;
+    /** What sort of tool it is, which picks its icon. */
+    kind?: ActionKind;
+    state?: ToolState;
+    /** Whether the input and output are showing. Bindable. */
+    open?: boolean;
+    /** Read out after the name, for each state. */
+    stateLabels?: Partial<Record<ToolState, string>>;
+    sx?: Sx;
+    ref?: HTMLDivElement | null;
+    /** A Tool.Trigger and a Tool.Content. */
+    children?: Snippet;
+};
+declare const ToolRoot: import("svelte").Component<ToolRootProps, {}, "ref" | "open">;
+type ToolRoot = ReturnType<typeof ToolRoot>;
+export default ToolRoot;

package/dist/components/tool/ToolSection.svelte

@@ -0,0 +1,102 @@
+<!--
+	Shared by Tool.Input and Tool.Output: a small label over the value. Flat
+	arguments read as a list of names and values; anything else as coloured JSON.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Code from '../../internal/Code.svelte';
+	import { flatEntries } from '../../internal/json.js';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+
+	export type ToolSectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		label: string;
+		/** Shown as code. Strings as they are; anything else as indented JSON. */
+		value?: unknown;
+		/** `list` shows a flat object as names and values, when it is one. */
+		layout?: 'code' | 'list';
+		tone?: 'default' | 'danger';
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		section: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.4375rem',
+			minWidth: 0
+		},
+		dangerLabel: { color: colors.danger },
+		// Names on the left, values on the right, on one shared column line
+		list: {
+			display: 'grid',
+			gridTemplateColumns: 'max-content minmax(0, 1fr)',
+			columnGap: '1rem',
+			rowGap: '0.3125rem',
+			margin: 0,
+			paddingBlock: '0.5625rem',
+			paddingInline: '0.75rem',
+			borderRadius: radius.md,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug
+		},
+		key: { margin: 0, color: colors.textSubtle },
+		value: { margin: 0, minWidth: 0, color: colors.text, overflowWrap: 'anywhere' },
+		text: {},
+		number: { color: colors.codeNumber, fontVariantNumeric: 'tabular-nums' },
+		literal: { color: colors.codeLiteral },
+		custom: {
+			minWidth: 0,
+			fontSize: font.sizeSm,
+			lineHeight: font.leadingNormal
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		value,
+		layout = 'code',
+		tone = 'default',
+		sx,
+		class: className,
+		children,
+		...rest
+	}: ToolSectionProps = $props();
+
+	const entries = $derived(
+		(layout === 'list' ? flatEntries(value) : undefined)?.map(([key, item]) => ({
+			key,
+			text: String(item),
+			kind: (typeof item === 'number'
+				? 'number'
+				: typeof item === 'string'
+					? 'text'
+					: 'literal') as 'number' | 'text' | 'literal'
+		}))
+	);
+</script>
+
+<div {...rest} {...attrs([styles.section, sx], className)}>
+	<p {...stylex.attrs(shared.eyebrow, tone === 'danger' && styles.dangerLabel)}>{label}</p>
+	{#if children}
+		<div {...stylex.attrs(styles.custom)}>{@render children()}</div>
+	{:else if entries}
+		<dl {...stylex.attrs(styles.list)}>
+			{#each entries as entry (entry.key)}
+				<dt {...stylex.attrs(styles.key)}>{entry.key}</dt>
+				<dd {...stylex.attrs(styles.value, styles[entry.kind])}>{entry.text}</dd>
+			{/each}
+		</dl>
+	{:else if value !== undefined}
+		<Code {value} {tone} />
+	{/if}
+</div>

package/dist/components/tool/ToolSection.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 ToolSectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    label: string;
+    /** Shown as code. Strings as they are; anything else as indented JSON. */
+    value?: unknown;
+    /** `list` shows a flat object as names and values, when it is one. */
+    layout?: 'code' | 'list';
+    tone?: 'default' | 'danger';
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const ToolSection: import("svelte").Component<ToolSectionProps, {}, "">;
+type ToolSection = ReturnType<typeof ToolSection>;
+export default ToolSection;

package/dist/components/tool/ToolTrigger.svelte

@@ -0,0 +1,191 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Chevron from '../../internal/Chevron.svelte';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { KIND_GLYPHS } from '../../internal/kinds.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Tile, { type TileTone } from '../../internal/Tile.svelte';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import Shimmer from '../shimmer/Shimmer.svelte';
+	import { getToolContext, type ToolState } from './context.js';
+
+	export type ToolTriggerProps = Omit<HTMLButtonAttributes, 'children'> & {
+		/** Your own icon, in place of the one for the tool's kind. */
+		icon?: Snippet;
+		sx?: Sx;
+		ref?: HTMLButtonElement | null;
+		/** A friendlier title, such as "Searched the docs". The tool's name then follows it, as code. */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const TONES: Record<ToolState, TileTone> = {
+		pending: 'live',
+		running: 'live',
+		complete: 'neutral',
+		error: 'danger'
+	};
+
+	const styles = stylex.create({
+		// A row on the turn's rail, like thinking and activity: a tile, then the words
+		trigger: {
+			display: 'flex',
+			alignItems: 'center',
+			alignSelf: 'flex-start',
+			gap: '0.625rem',
+			maxWidth: '100%',
+			minHeight: '1.75rem',
+			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,
+			lineHeight: font.leadingSnug,
+			textAlign: 'start',
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'color',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		heading: {
+			display: 'flex',
+			alignItems: 'baseline',
+			gap: '0.5rem',
+			minWidth: 0
+		},
+		// The title keeps its width, up to the whole row; the name takes what is left
+		title: {
+			flexShrink: 0,
+			maxWidth: '100%',
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		},
+		// The tool's own name is code, so it is set as code
+		// When the row is short of room, the name gives way before the title
+		name: {
+			flexShrink: 100,
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap',
+			color: colors.textSubtle,
+			fontFamily: font.mono,
+			fontSize: '0.75rem'
+		},
+		// A new state settles into place, so the change from spinner to tick is seen
+		status: {
+			display: 'inline-flex',
+			alignItems: 'center',
+			gap: '0.25rem',
+			flexShrink: 0,
+			fontSize: font.sizeXs,
+			fontWeight: font.weightMedium,
+			opacity: { default: 1, '@starting-style': 0 },
+			scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.6 } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		nameAsTitle: { color: 'inherit' },
+		running: { color: colors.ithil },
+		complete: { color: colors.success },
+		error: {
+			paddingBlock: '0.125rem',
+			paddingInline: '0.4375rem',
+			borderRadius: radius.lg,
+			backgroundColor: colors.dangerSoft,
+			color: colors.dangerInk
+		},
+		chevron: {
+			display: 'grid',
+			color: colors.textSubtle
+		},
+		hidden: {
+			position: 'absolute',
+			width: '1px',
+			height: '1px',
+			overflow: 'hidden',
+			clipPath: 'inset(50%)',
+			whiteSpace: 'nowrap'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		icon,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		onclick,
+		...rest
+	}: ToolTriggerProps = $props();
+
+	const tool = getToolContext('Trigger');
+	const working = $derived(tool.state === 'pending' || tool.state === 'running');
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	id={tool.triggerId}
+	aria-expanded={tool.open}
+	aria-controls={tool.contentId}
+	data-slot="tool-trigger"
+	{...rest}
+	{...attrs([styles.trigger, sx], className)}
+	onclick={(event) => {
+		onclick?.(event);
+		if (!event.defaultPrevented) tool.toggle();
+	}}
+>
+	<Tile tone={TONES[tool.state]} glyph={icon ? undefined : KIND_GLYPHS[tool.kind]}>
+		{#if icon}{@render icon()}{/if}
+	</Tile>
+	<span {...stylex.attrs(styles.heading)}>
+		{#if children}
+			<span {...stylex.attrs(styles.title)}
+				><Shimmer active={working}>{@render children()}</Shimmer></span
+			>
+			<code {...stylex.attrs(styles.name)}>{tool.name}</code>
+		{:else}
+			<code {...stylex.attrs(styles.title, styles.name, styles.nameAsTitle)}
+				><Shimmer active={working}>{tool.name}</Shimmer></code
+			>
+		{/if}
+		<span {...stylex.attrs(styles.hidden)}>{` (${tool.stateLabel})`}</span>
+	</span>
+	{#key tool.state}
+		<span
+			aria-hidden="true"
+			{...stylex.attrs(
+				styles.status,
+				tool.state === 'running' && styles.running,
+				tool.state === 'complete' && styles.complete,
+				tool.state === 'error' && styles.error
+			)}
+		>
+			{#if tool.state === 'complete'}
+				<Glyph name="check" size={13} stroke={2} />
+			{:else if tool.state === 'error'}
+				{tool.stateLabel}
+			{/if}
+		</span>
+	{/key}
+	<span {...stylex.attrs(styles.chevron)}><Chevron open={tool.open} size={12} /></span>
+</button>

package/dist/components/tool/ToolTrigger.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 ToolTriggerProps = Omit<HTMLButtonAttributes, 'children'> & {
+    /** Your own icon, in place of the one for the tool's kind. */
+    icon?: Snippet;
+    sx?: Sx;
+    ref?: HTMLButtonElement | null;
+    /** A friendlier title, such as "Searched the docs". The tool's name then follows it, as code. */
+    children?: Snippet;
+};
+declare const ToolTrigger: import("svelte").Component<ToolTriggerProps, {}, "ref">;
+type ToolTrigger = ReturnType<typeof ToolTrigger>;
+export default ToolTrigger;

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

@@ -0,0 +1,18 @@
+import type { DisclosureContext } from '../../internal/disclosure.js';
+import type { ActionKind } from '../../internal/kinds.js';
+/**
+ * Where a tool call stands. In the AI SDK's terms:
+ * - `pending`: `input-streaming`, the arguments are still being written
+ * - `running`: `input-available`, the tool is at work
+ * - `complete`: `output-available`
+ * - `error`: `output-error`
+ */
+export type ToolState = 'pending' | 'running' | 'complete' | 'error';
+export type ToolContext = DisclosureContext & {
+    readonly name: string;
+    readonly kind: ActionKind;
+    readonly state: ToolState;
+    readonly stateLabel: string;
+};
+export declare function setToolContext(context: ToolContext): void;
+export declare function getToolContext(part: string): ToolContext;

package/dist/components/tool/context.js

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

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

@@ -0,0 +1,12 @@
+import Content from './ToolContent.svelte';
+import Input from './ToolInput.svelte';
+import Output from './ToolOutput.svelte';
+import Root from './ToolRoot.svelte';
+import Trigger from './ToolTrigger.svelte';
+export { Root, Trigger, Content, Input, Output, Root as ToolRoot, Trigger as ToolTrigger, Content as ToolContent, Input as ToolInput, Output as ToolOutput };
+export type { ToolState } from './context.js';
+export type { ToolContentProps } from './ToolContent.svelte';
+export type { ToolInputProps } from './ToolInput.svelte';
+export type { ToolOutputProps } from './ToolOutput.svelte';
+export type { ToolRootProps } from './ToolRoot.svelte';
+export type { ToolTriggerProps } from './ToolTrigger.svelte';

package/dist/components/tool/index.js

@@ -0,0 +1,8 @@
+import Content from './ToolContent.svelte';
+import Input from './ToolInput.svelte';
+import Output from './ToolOutput.svelte';
+import Root from './ToolRoot.svelte';
+import Trigger from './ToolTrigger.svelte';
+export { Root, Trigger, Content, Input, Output, 
+//
+Root as ToolRoot, Trigger as ToolTrigger, Content as ToolContent, Input as ToolInput, Output as ToolOutput };

package/dist/components/tooltip/TooltipContent.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" module>
+	import { Tooltip } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+	import Kbd from '../kbd/Kbd.svelte';
+
+	export type TooltipContentProps = Omit<Tooltip.ContentProps, 'children' | 'child'> & {
+		/** The keys that do the same, shown after the label: `['⌘', 'K']`. */
+		shortcut?: string[];
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	const CLOSED = ':is([data-state="closed"])';
+	const INSTANT = ':is([data-state="instant-open"])';
+
+	const styles = stylex.create({
+		content: {
+			zIndex: 60,
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			maxWidth: '18rem',
+			paddingBlock: '0.3125rem',
+			paddingInline: '0.5rem',
+			borderRadius: radius.md,
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, 0 4px 12px -4px ${colors.shade}`,
+			color: colors.text,
+			fontFamily: font.body,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug,
+			transformOrigin: 'var(--bits-floating-transform-origin)',
+			opacity: { default: 1, '@starting-style': 0, [CLOSED]: 0 },
+			scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.97, [CLOSED]: 0.97 } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+			transitionTimingFunction: motion.easeOut,
+			// Once one tooltip is open, the next opens at once: moving along a
+			// toolbar should feel quick, not like each button is thinking
+			transitionDuration: { default: '120ms', [CLOSED]: '80ms', [INSTANT]: '0ms' }
+		},
+		keys: { display: 'inline-flex', gap: '0.125rem' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		sideOffset = 6,
+		collisionPadding = 8,
+		shortcut,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: TooltipContentProps = $props();
+</script>
+
+<Tooltip.Portal>
+	<Tooltip.Content
+		{sideOffset}
+		{collisionPadding}
+		data-slot="tooltip"
+		{...rest}
+		{...attrs([styles.content, sx], className)}
+	>
+		{@render children?.()}
+		{#if shortcut?.length}
+			<span {...stylex.attrs(styles.keys)}>
+				{#each shortcut as key, index (index)}<Kbd>{key}</Kbd>{/each}
+			</span>
+		{/if}
+	</Tooltip.Content>
+</Tooltip.Portal>

package/dist/components/tooltip/TooltipContent.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type TooltipContentProps = Omit<Tooltip.ContentProps, 'children' | 'child'> & {
+    /** The keys that do the same, shown after the label: `['⌘', 'K']`. */
+    shortcut?: string[];
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const TooltipContent: import("svelte").Component<TooltipContentProps, {}, "">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;