sheer-ui 0.0.0

package/src/lib/components/toolbar/toolbar.svelte.ts

@@ -0,0 +1,373 @@
+import { createContext } from 'svelte';
+import { type WritableBox, type WritableBoxedValues, type ReadableBoxedValues, attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+import type { Orientation } from '../../internal/index.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+
+export const toolbarAttrs = createBitsAttrs({
+	component: 'toolbar',
+	parts: ['root', 'item', 'group', 'group-item', 'link', 'button'],
+});
+
+const [getToolbarRoot, setToolbarRoot] = createContext<ToolbarRootState>();
+const [getToolbarGroup, setToolbarGroup] = createContext<ToolbarGroup>();
+interface ToolbarRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			orientation: Orientation;
+			loop: boolean;
+		}> {}
+
+export class ToolbarRootState {
+	static create(opts: ToolbarRootStateOpts) {
+		return setToolbarRoot(new ToolbarRootState(opts));
+	}
+	readonly opts: ToolbarRootStateOpts;
+	readonly rovingFocusGroup: RovingFocusGroup;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: ToolbarRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+
+		this.rovingFocusGroup = new RovingFocusGroup({
+			orientation: this.opts.orientation,
+			loop: this.opts.loop,
+			rootNode: this.opts.ref,
+			candidateAttr: toolbarAttrs.item,
+		});
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'toolbar',
+				'data-orientation': this.opts.orientation.current,
+				[toolbarAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface ToolbarGroupBaseStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+		}> {}
+
+abstract class ToolbarGroupBaseState {
+	readonly opts: ToolbarGroupBaseStateOpts;
+	readonly root: ToolbarRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: ToolbarGroupBaseStateOpts, root: ToolbarRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[toolbarAttrs.group]: '',
+				role: 'group',
+				'data-orientation': this.root.opts.orientation.current,
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface ToolbarGroupSingleStateOpts
+	extends
+		ToolbarGroupBaseStateOpts,
+		WritableBoxedValues<{
+			value: string;
+		}> {}
+
+class ToolbarGroupSingleState extends ToolbarGroupBaseState {
+	override readonly opts: ToolbarGroupSingleStateOpts;
+	override readonly root: ToolbarRootState;
+	readonly isMulti = false as const;
+	readonly anyPressed = $derived.by(() => this.opts.value.current !== '');
+
+	constructor(opts: ToolbarGroupSingleStateOpts, root: ToolbarRootState) {
+		super(opts, root);
+
+		this.opts = opts;
+		this.root = root;
+	}
+
+	includesItem(item: string) {
+		return this.opts.value.current === item;
+	}
+
+	toggleItem(item: string) {
+		if (this.includesItem(item)) {
+			this.opts.value.current = '';
+		} else {
+			this.opts.value.current = item;
+		}
+	}
+}
+
+interface ToolbarGroupMultipleStateOpts
+	extends
+		ToolbarGroupBaseStateOpts,
+		WritableBoxedValues<{
+			value: string[];
+		}> {}
+
+class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
+	override readonly opts: ToolbarGroupMultipleStateOpts;
+	override readonly root: ToolbarRootState;
+	readonly isMulti = true as const;
+	readonly anyPressed = $derived.by(() => this.opts.value.current.length > 0);
+
+	constructor(opts: ToolbarGroupMultipleStateOpts, root: ToolbarRootState) {
+		super(opts, root);
+
+		this.opts = opts;
+		this.root = root;
+	}
+
+	includesItem(item: string) {
+		return this.opts.value.current.includes(item);
+	}
+
+	toggleItem(item: string) {
+		if (this.includesItem(item)) {
+			this.opts.value.current = this.opts.value.current.filter((v) => v !== item);
+		} else {
+			this.opts.value.current = [...this.opts.value.current, item];
+		}
+	}
+}
+
+type ToolbarGroup = ToolbarGroupSingleState | ToolbarGroupMultipleState;
+
+interface ToolbarGroupRootOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+		}> {
+	type: 'single' | 'multiple';
+	value: WritableBox<string> | WritableBox<string[]>;
+}
+
+export class ToolbarGroupState {
+	static create(opts: ToolbarGroupRootOpts): ToolbarGroup {
+		const { type, ...rest } = opts;
+		const rootState = getToolbarRoot();
+		const groupState =
+			type === 'single'
+				? new ToolbarGroupSingleState(rest as ToolbarGroupSingleStateOpts, rootState)
+				: new ToolbarGroupMultipleState(rest as ToolbarGroupMultipleStateOpts, rootState);
+
+		return setToolbarGroup(groupState);
+	}
+}
+
+//
+// ITEM
+//
+
+interface ToolbarGroupItemStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			value: string;
+			disabled: boolean;
+		}> {}
+
+export class ToolbarGroupItemState {
+	static create(opts: ToolbarGroupItemStateOpts) {
+		const group = getToolbarGroup();
+		return new ToolbarGroupItemState(opts, group, group.root);
+	}
+	readonly opts: ToolbarGroupItemStateOpts;
+	readonly group: ToolbarGroup;
+	readonly root: ToolbarRootState;
+	readonly rovingItem: RovingFocusItem;
+	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);
+
+	constructor(opts: ToolbarGroupItemStateOpts, group: ToolbarGroup, root: ToolbarRootState) {
+		this.opts = opts;
+		this.group = group;
+		this.root = root;
+		this.rovingItem = new RovingFocusItem({
+			group: this.root.rovingFocusGroup,
+			ref: this.opts.ref,
+		});
+
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	#toggleItem() {
+		if (this.#isDisabled) return;
+		this.group.toggleItem(this.opts.value.current);
+	}
+
+	onclick(_: BitsMouseEvent) {
+		if (this.#isDisabled) return;
+		this.#toggleItem();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (this.#isDisabled) return;
+		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+			e.preventDefault();
+			this.#toggleItem();
+			return;
+		}
+
+		this.rovingItem.handleKeydown(e);
+	}
+
+	readonly isPressed = $derived.by(() => this.group.includesItem(this.opts.value.current));
+
+	readonly #ariaChecked = $derived.by(() => {
+		return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
+	});
+
+	readonly #ariaPressed = $derived.by(() => {
+		return this.group.isMulti ? boolToStr(this.isPressed) : undefined;
+	});
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: this.group.isMulti ? undefined : 'radio',
+				'data-orientation': this.root.opts.orientation.current,
+				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
+				'data-state': getToggleItemDataState(this.isPressed),
+				'data-value': this.opts.value.current,
+				'aria-pressed': this.#ariaPressed,
+				'aria-checked': this.#ariaChecked,
+				[toolbarAttrs.item]: '',
+				[toolbarAttrs['group-item']]: '',
+				disabled: boolToTrueOrUndef(this.#isDisabled),
+				//
+				onclick: this.onclick,
+				onkeydown: this.onkeydown,
+				...this.rovingItem.props,
+			}) as const,
+	);
+}
+
+interface ToolbarLinkStateOpts extends WithRefOpts {}
+
+export class ToolbarLinkState {
+	static create(opts: ToolbarLinkStateOpts) {
+		return new ToolbarLinkState(opts, getToolbarRoot());
+	}
+	readonly opts: ToolbarLinkStateOpts;
+	readonly root: ToolbarRootState;
+	readonly rovingItem: RovingFocusItem;
+
+	constructor(opts: ToolbarLinkStateOpts, root: ToolbarRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.rovingItem = new RovingFocusItem({
+			group: this.root.rovingFocusGroup,
+			ref: this.opts.ref,
+		});
+
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		this.rovingItem.handleKeydown(e);
+	}
+
+	readonly #role = $derived.by(() => {
+		if (!this.opts.ref.current) return undefined;
+		const tagName = this.opts.ref.current.tagName;
+		if (tagName !== 'A') return 'link' as const;
+		return undefined;
+	});
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[toolbarAttrs.link]: '',
+				[toolbarAttrs.item]: '',
+				role: this.#role,
+				'data-orientation': this.root.opts.orientation.current,
+				//
+				onkeydown: this.onkeydown,
+				...this.rovingItem.props,
+			}) as const,
+	);
+}
+
+interface ToolbarButtonStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+		}> {}
+
+export class ToolbarButtonState {
+	static create(opts: ToolbarButtonStateOpts) {
+		return new ToolbarButtonState(opts, getToolbarRoot());
+	}
+	readonly opts: ToolbarButtonStateOpts;
+	readonly root: ToolbarRootState;
+	readonly rovingItem: RovingFocusItem;
+
+	constructor(opts: ToolbarButtonStateOpts, root: ToolbarRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.rovingItem = new RovingFocusItem({
+			group: this.root.rovingFocusGroup,
+			ref: this.opts.ref,
+		});
+
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		this.rovingItem.handleKeydown(e);
+	}
+
+	readonly #role = $derived.by(() => {
+		if (!this.opts.ref.current) return undefined;
+		const tagName = this.opts.ref.current.tagName;
+		if (tagName !== 'BUTTON') return 'button' as const;
+		return undefined;
+	});
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[toolbarAttrs.item]: '',
+				[toolbarAttrs.button]: '',
+				role: this.#role,
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				'data-orientation': this.root.opts.orientation.current,
+				disabled: boolToTrueOrUndef(this.opts.disabled.current),
+				//
+				onkeydown: this.onkeydown,
+				...this.rovingItem.props,
+			}) as const,
+	);
+}
+
+//
+// HELPERS
+//
+
+const getToggleItemDataState = (condition: boolean) => condition ? 'on' : 'off';

package/src/lib/components/toolbar/types.ts

@@ -0,0 +1,60 @@
+import type {
+	ToggleGroupItemProps,
+	ToggleGroupItemPropsWithoutHTML,
+	ToggleGroupRootPropsWithoutHTML,
+} from "../toggle-group/types.js";
+import type { Orientation } from "../../internal/index.js";
+import type { WithChild, Without } from "../../internal/types.js";
+import type {
+	BitsPrimitiveAnchorAttributes,
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+} from "../../internal/attribute-types.js";
+
+export type ToolbarRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The orientation of the toolbar. This determines how keyboard navigation
+	 * will work within the toolbar.
+	 *
+	 * @defaultValue "horizontal"
+	 */
+	orientation?: Orientation;
+
+	/**
+	 * Whether or not to loop through the toolbar items when navigating with the
+	 * keyboard.
+	 *
+	 * @defaultValue true
+	 */
+	loop?: boolean;
+}>;
+
+export type ToolbarRootProps = ToolbarRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ToolbarRootPropsWithoutHTML>;
+
+export type ToolbarGroupPropsWithoutHTML = Omit<
+	ToggleGroupRootPropsWithoutHTML,
+	"orientation" | "loop" | "rovingFocus"
+>;
+
+export type ToolbarGroupProps = ToolbarGroupPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ToolbarGroupPropsWithoutHTML>;
+
+export type ToolbarGroupItemPropsWithoutHTML = ToggleGroupItemPropsWithoutHTML;
+
+export type ToolbarGroupItemProps = ToggleGroupItemProps;
+
+export type ToolbarButtonPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the button is disabled or not.
+	 */
+	disabled?: boolean | null | undefined;
+}>;
+
+export type ToolbarButtonProps = ToolbarButtonPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, ToolbarButtonPropsWithoutHTML>;
+
+export type ToolbarLinkPropsWithoutHTML = WithChild;
+
+export type ToolbarLinkProps = ToolbarLinkPropsWithoutHTML &
+	Without<BitsPrimitiveAnchorAttributes, ToolbarLinkPropsWithoutHTML>;

package/src/lib/components/tooltip/components/tooltip-content.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { TooltipContentProps } from '../types.js';
+	import { TooltipContentState } from '../tooltip.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { useNativePopoverLifecycle } from '../../../internal/native-popover.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		arrowClasses,
+		side = 'top',
+		align = 'center',
+		onInteractOutside = () => {},
+		onEscapeKeydown = () => {},
+		style,
+		// Floating-UI-only props kept for API compatibility; native positioning ignores them
+		// (sideOffset, avoidCollisions, arrowPadding, collisionPadding, hideWhenDetached,
+		//  customAnchor, portalProps, forceMount).
+		...restProps
+	}: TooltipContentProps & { arrowClasses?: ClassValue; portalProps?: unknown } = $props();
+
+	const contentState = TooltipContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const lifecycleProps = useNativePopoverLifecycle(contentState);
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'tooltip-content',
+				class: join(
+					'group/tooltip z-50 w-fit rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background @container-[anchored]',
+					'data-[side=left]:[position-try-fallbacks:flip-inline] data-[side=right]:[position-try-fallbacks:flip-inline]',
+					// tooltip data-state is closed | delayed-open | instant-open, so "open" is not-closed
+					'transition-[opacity,translate,display,overlay] transition-discrete opacity-0 translate-y-1 not-data-[state=closed]:opacity-100 not-data-[state=closed]:translate-y-0 starting:not-data-[state=closed]:opacity-0 starting:not-data-[state=closed]:translate-y-1',
+				),
+			},
+			restProps,
+			contentState.props,
+			{ style },
+			lifecycleProps,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...contentState.snippetProps })}
+{:else}
+	<div {...mergedProps} bind:this={ref} data-side={side} data-align={align}>
+		{@render children?.()}
+		<div
+			class={join(
+				'hidden absolute z-50 size-2.5 rotate-45 rounded-xs bg-foreground supports-[container-type:anchored]:block',
+				'group-data-[side=top]/tooltip:bottom-[-0.3rem] group-data-[side=top]/tooltip:left-1/2 group-data-[side=top]/tooltip:-translate-x-1/2',
+				'group-data-[side=bottom]/tooltip:top-[-0.3rem] group-data-[side=bottom]/tooltip:left-1/2 group-data-[side=bottom]/tooltip:-translate-x-1/2',
+				'group-data-[side=left]/tooltip:right-[-0.3rem] group-data-[side=left]/tooltip:top-1/2 group-data-[side=left]/tooltip:-translate-y-1/2',
+				'group-data-[side=right]/tooltip:left-[-0.3rem] group-data-[side=right]/tooltip:top-1/2 group-data-[side=right]/tooltip:-translate-y-1/2',
+				'[@container_anchored(fallback:_flip-block)]:group-data-[side=top]/tooltip:bottom-auto [@container_anchored(fallback:_flip-block)]:group-data-[side=top]/tooltip:top-[-0.3rem]',
+				'[@container_anchored(fallback:_flip-block)]:group-data-[side=bottom]/tooltip:top-auto [@container_anchored(fallback:_flip-block)]:group-data-[side=bottom]/tooltip:bottom-[-0.3rem]',
+				'[@container_anchored(fallback:_flip-inline)]:group-data-[side=left]/tooltip:right-auto [@container_anchored(fallback:_flip-inline)]:group-data-[side=left]/tooltip:left-[-0.3rem]',
+				'[@container_anchored(fallback:_flip-inline)]:group-data-[side=right]/tooltip:left-auto [@container_anchored(fallback:_flip-inline)]:group-data-[side=right]/tooltip:right-[-0.3rem]',
+				arrowClasses,
+			)}
+		></div>
+	</div>
+{/if}

package/src/lib/components/tooltip/components/tooltip-provider.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import type { TooltipProviderProps } from '../types.js';
+	import { TooltipProviderState } from '../tooltip.svelte.js';
+
+	let {
+		children,
+		delayDuration = 700,
+		disableCloseOnTriggerClick = false,
+		disableHoverableContent = false,
+		disabled = false,
+		ignoreNonKeyboardFocus = false,
+		skipDelayDuration = 300,
+	}: TooltipProviderProps = $props();
+
+	TooltipProviderState.create({
+		delayDuration: boxWith(() => delayDuration),
+		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+		disableHoverableContent: boxWith(() => disableHoverableContent),
+		disabled: boxWith(() => disabled),
+		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+		skipDelayDuration: boxWith(() => skipDelayDuration),
+	});
+</script>
+
+{@render children?.()}

package/src/lib/components/tooltip/components/tooltip-trigger.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T = never">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { TooltipTriggerProps } from '../types.js';
+	import { TooltipTriggerState } from '../tooltip.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		disabled = false,
+		payload,
+		tether,
+		type = 'button',
+		tabindex = 0,
+		ref = $bindable(null),
+		...restProps
+	}: TooltipTriggerProps<T> = $props();
+
+	const triggerState = TooltipTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		tabindex: boxWith(() => tabindex ?? 0),
+		payload: boxWith(() => payload),
+		tether: boxWith(() => tether),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps({ 'data-slot': 'tooltip-trigger' }, restProps, triggerState.props, { type }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/tooltip/components/tooltip.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T = never">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { OpenCell } from '../../../internal/open-cell.svelte.js';
+	import type { TooltipRootProps } from '../types.js';
+	import { TooltipRootState } from '../tooltip.svelte.js';
+
+	let {
+		open = false,
+		triggerId = $bindable<string | null>(null),
+		state: givenCell,
+		onOpenChangeComplete = () => {},
+		disabled,
+		delayDuration,
+		disableCloseOnTriggerClick,
+		disableHoverableContent,
+		ignoreNonKeyboardFocus,
+		tether,
+		children,
+	}: TooltipRootProps<T> = $props();
+
+	// Cell over the source prop; the engine keeps its boxed-open interface (vendored,
+	// ADR 0006) — the box is a bridge over the cell, so the cell owns `open`.
+	// svelte-ignore state_referenced_locally
+	const cell = givenCell ?? new OpenCell(() => open);
+
+	const rootState = TooltipRootState.create({
+		open: boxWith(
+			() => cell.open,
+			(v) => (cell.open = v),
+		),
+		triggerId: boxWith(
+			() => triggerId,
+			(v) => {
+				triggerId = v;
+			},
+		),
+		delayDuration: boxWith(() => delayDuration),
+		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+		disableHoverableContent: boxWith(() => disableHoverableContent),
+		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+		disabled: boxWith(() => disabled),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		tether: boxWith(() => tether),
+	});
+</script>
+
+{@render children?.({
+	open: rootState.opts.open.current,
+	triggerId: rootState.activeTriggerId,
+	payload: rootState.activePayload as [T] extends [never] ? null : T | null,
+})}

package/src/lib/components/tooltip/index.ts

@@ -0,0 +1,17 @@
+export { default as Root } from './components/tooltip.svelte';
+export { default as Content } from './components/tooltip-content.svelte';
+export { default as Trigger } from './components/tooltip-trigger.svelte';
+export { default as Provider } from './components/tooltip-provider.svelte';
+export { default as Portal } from '../../internal/portal/portal.svelte';
+export { createTooltipTether as createTether } from './tooltip.svelte.js';
+
+export type {
+	TooltipProviderPropsWithoutHTML as ProviderProps,
+	TooltipRootPropsWithoutHTML as RootProps,
+	TooltipContentProps as ContentProps,
+	TooltipTriggerProps as TriggerProps,
+	TooltipTether as Tether,
+	TooltipRootSnippetProps as RootSnippetProps,
+} from './types.js';
+
+export type { PortalProps } from '../../internal/portal/index.js';