sheer-ui 0.4.2 → 0.5.0

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

@@ -1,57 +0,0 @@
-import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
-import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
-import type { BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
-
-export const toggleAttrs = createBitsAttrs({
-	component: 'toggle',
-	parts: ['root'],
-});
-
-interface ToggleRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}>,
-		WritableBoxedValues<{
-			pressed: boolean;
-		}> {}
-
-export class ToggleRootState {
-	static create(opts: ToggleRootStateOpts) {
-		return new ToggleRootState(opts);
-	}
-	readonly opts: ToggleRootStateOpts;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: ToggleRootStateOpts) {
-		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
-		this.onclick = this.onclick.bind(this);
-	}
-
-	onclick(_: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
-		this.opts.pressed.current = !this.opts.pressed.current;
-	}
-
-	readonly snippetProps = $derived.by(() => ({
-		pressed: this.opts.pressed.current,
-	}));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				[toggleAttrs.root]: '',
-				id: this.opts.id.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
-				'aria-pressed': boolToStr(this.opts.pressed.current),
-				'data-state': getToggleDataState(this.opts.pressed.current),
-				disabled: boolToTrueOrUndef(this.opts.disabled.current),
-				onclick: this.onclick,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-export const getToggleDataState = (condition: boolean): 'on' | 'off' => condition ? 'on' : 'off';

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

@@ -1,33 +0,0 @@
-import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { BitsPrimitiveButtonAttributes } from "../../internal/attribute-types.js";
-
-export type ToggleRootSnippetProps = {
-	pressed: boolean;
-};
-
-export type ToggleRootPropsWithoutHTML = WithChild<
-	{
-		/**
-		 * Whether the toggle is pressed or not.
-		 *
-		 * @defaultValue false
-		 */
-		pressed?: boolean | undefined;
-
-		/**
-		 * A callback function called when the toggle is pressed.
-		 */
-		onPressedChange?: OnChangeFn<boolean>;
-
-		/**
-		 * Whether the toggle is disabled or not.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean | null | undefined;
-	},
-	ToggleRootSnippetProps
->;
-
-export type ToggleRootProps = ToggleRootPropsWithoutHTML &
-	Without<BitsPrimitiveButtonAttributes, ToggleRootPropsWithoutHTML>;

package/src/lib/components/toggle/variants.ts

@@ -1,25 +0,0 @@
-import { declareVariants, type VariantProps } from 'overrule';
-import { interactiveBase } from '../button/variants';
-
-export const toggleVariants = declareVariants({
-	base: `${interactiveBase} data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 gap-2 rounded-md text-sm transition-[color,box-shadow] focus-visible:ring-3 [&_svg:not([class*='size-'])]:size-4`,
-	variants: {
-		variant: {
-			default: 'bg-transparent hover:bg-muted hover:text-muted-foreground',
-			outline: 'border-border hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs',
-		},
-		size: {
-			default: 'h-9 min-w-9 px-2',
-			sm: 'h-8 min-w-8 px-1.5',
-			lg: 'h-10 min-w-10 px-2.5',
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-		size: 'default',
-	},
-});
-
-export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
-export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
-export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/src/lib/components/toggle-group/index.ts

@@ -1,7 +0,0 @@
-export { default as Root } from './components/toggle-group.svelte';
-export { default as Item } from './components/toggle-group-item.svelte';
-
-export type {
-	ToggleGroupRootProps as RootProps,
-	ToggleGroupItemProps as ItemProps,
-} from './types.js';

package/src/lib/components/toggle-group/toggle-group.svelte.ts

@@ -1,76 +0,0 @@
-import { createContext } from 'svelte';
-import { attachRef } from '../../internal/tools/index.js';
-import { createBitsAttrs, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
-import type { Orientation } from '../../internal/index.js';
-import type { RefAttachment } from '../../internal/types.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
-import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
-
-export const toggleGroupAttrs = createBitsAttrs({
-	component: 'toggle-group',
-	parts: ['root', 'item'],
-});
-
-const [getToggleGroupRoot, setToggleGroupRoot] = createContext<ToggleGroupRootState>();
-
-/** The root component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
-interface ToggleGroupRootStateOpts {
-	readonly id: string;
-	readonly disabled: boolean;
-	readonly rovingFocus: boolean;
-	readonly loop: boolean;
-	readonly orientation: Orientation;
-	ref: HTMLElement | null;
-	selection: SelectionValue;
-}
-
-export class ToggleGroupRootState implements SelectionGroup {
-	static create(opts: ToggleGroupRootStateOpts) {
-		return setToggleGroupRoot(new ToggleGroupRootState(opts));
-	}
-	readonly opts: ToggleGroupRootStateOpts;
-	readonly selection: SelectionValue;
-	readonly rovingFocusGroup: RovingFocusGroup;
-	readonly selectionTakesTabStop = true;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: ToggleGroupRootStateOpts) {
-		this.opts = opts;
-		this.selection = opts.selection;
-		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
-		this.rovingFocusGroup = new RovingFocusGroup({
-			candidateAttr: toggleGroupAttrs.item,
-			rootNode: () => opts.ref,
-			loop: () => opts.loop,
-			orientation: () => opts.orientation,
-		});
-	}
-
-	get disabled() {
-		return this.opts.disabled;
-	}
-
-	get orientation() {
-		return this.opts.orientation;
-	}
-
-	get rovingFocus() {
-		return this.opts.rovingFocus;
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id,
-				[toggleGroupAttrs.root]: '',
-				role: 'group',
-				'data-orientation': this.opts.orientation,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
-				...this.attachment,
-			}) as const,
-	);
-}
-
-export function createToggleGroupItem(opts: SelectionItemOpts) {
-	return new SelectionItemState(opts, getToggleGroupRoot());
-}

package/src/lib/components/toggle-group/types.ts

@@ -1,89 +0,0 @@
-import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type {
-	BitsPrimitiveButtonAttributes,
-	BitsPrimitiveDivAttributes,
-} from "../../internal/attribute-types.js";
-import type { Orientation } from "../../internal/index.js";
-
-export type BaseToggleGroupRootProps = {
-	/**
-	 * Whether the toggle group is disabled or not.
-	 *
-	 * @defaultValue false
-	 */
-	disabled?: boolean;
-
-	/**
-	 * Whether to loop through the items when reaching the end
-	 * when using the keyboard.
-	 *
-	 * @defaultValue true
-	 */
-	loop?: boolean;
-
-	/**
-	 * The orientation of the toggle group. Used to handle keyboard
-	 * navigation between items.
-	 *
-	 * @defaultValue 'horizontal'
-	 */
-	orientation?: Orientation;
-
-	/**
-	 * Whether to enable roving focus or not. When enabled, users
-	 * navigate between the items using the arrow keys. When disabled,
-	 * users navigate between the items using the tab key.
-	 */
-	rovingFocus?: boolean;
-};
-
-export type SingleToggleGroupRootPropsWithoutHTML = WithChild<
-	BaseToggleGroupRootProps & {
-		type: "single";
-		value?: string;
-		onValueChange?: OnChangeFn<string>;
-	}
->;
-
-export type SingleToggleGroupRootProps = SingleToggleGroupRootPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, SingleToggleGroupRootPropsWithoutHTML>;
-
-export type MultipleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps> & {
-	type: "multiple";
-	value?: string[];
-	onValueChange?: OnChangeFn<string[]>;
-};
-
-export type MultipleToggleGroupRootProps = MultipleToggleGroupRootPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, MultipleToggleGroupRootPropsWithoutHTML>;
-
-export type ToggleGroupRootPropsWithoutHTML =
-	| SingleToggleGroupRootPropsWithoutHTML
-	| MultipleToggleGroupRootPropsWithoutHTML;
-
-export type ToggleGroupRootProps = ToggleGroupRootPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ToggleGroupRootPropsWithoutHTML>;
-
-export type ToggleGroupItemSnippetProps = {
-	pressed: boolean;
-};
-
-export type ToggleGroupItemPropsWithoutHTML = WithChild<
-	{
-		/**
-		 * Whether the toggle item is disabled or not.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean | null | undefined;
-
-		/**
-		 * The value of the toggle item.
-		 */
-		value: string;
-	},
-	ToggleGroupItemSnippetProps
->;
-
-export type ToggleGroupItemProps = ToggleGroupItemPropsWithoutHTML &
-	Without<BitsPrimitiveButtonAttributes, ToggleGroupItemPropsWithoutHTML>;

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

@@ -1,13 +0,0 @@
-export { default as Root } from './components/toolbar.svelte';
-export { default as Button } from './components/toolbar-button.svelte';
-export { default as Link } from './components/toolbar-link.svelte';
-export { default as Group } from './components/toolbar-group.svelte';
-export { default as GroupItem } from './components/toolbar-group-item.svelte';
-
-export type {
-	ToolbarRootProps as RootProps,
-	ToolbarButtonProps as ButtonProps,
-	ToolbarLinkProps as LinkProps,
-	ToolbarGroupProps as GroupProps,
-	ToolbarGroupItemProps as GroupItemProps,
-} from './types.js';

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

@@ -1,212 +0,0 @@
-import { createContext } from 'svelte';
-import { type ReadableBox, type ReadableBoxedValues, attachRef } from '../../internal/tools/index.js';
-import { createBitsAttrs, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
-import type { Orientation } from '../../internal/index.js';
-import type { BitsKeyboardEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
-import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
-import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.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<ToolbarGroupState>();
-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.current,
-			loop: () => this.opts.loop.current,
-			rootNode: () => this.opts.ref.current,
-			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,
-	);
-}
-
-/** The group component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
-interface ToolbarGroupStateOpts {
-	readonly id: string;
-	readonly disabled: boolean;
-	ref: HTMLElement | null;
-	selection: SelectionValue;
-}
-
-/** A selection group inside the toolbar: its items rove with the toolbar's other items. */
-export class ToolbarGroupState implements SelectionGroup {
-	static create(opts: ToolbarGroupStateOpts) {
-		return setToolbarGroup(new ToolbarGroupState(opts, getToolbarRoot()));
-	}
-	readonly opts: ToolbarGroupStateOpts;
-	readonly root: ToolbarRootState;
-	readonly selection: SelectionValue;
-	readonly rovingFocusGroup: RovingFocusGroup;
-	readonly selectionTakesTabStop = false;
-	readonly extraItemAttrs = { [toolbarAttrs['group-item']]: '' } as const;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: ToolbarGroupStateOpts, root: ToolbarRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.selection = opts.selection;
-		this.rovingFocusGroup = root.rovingFocusGroup;
-		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
-	}
-
-	get disabled() {
-		return this.opts.disabled;
-	}
-
-	get orientation() {
-		return this.root.opts.orientation.current;
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id,
-				[toolbarAttrs.group]: '',
-				role: 'group',
-				'data-orientation': this.root.opts.orientation.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
-				...this.attachment,
-			}) as const,
-	);
-}
-
-export function createToolbarGroupItem(opts: SelectionItemOpts) {
-	return new SelectionItemState(opts, getToolbarGroup());
-}
-
-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.current,
-			setRef: (v) => (this.opts.ref.current = v),
-		});
-
-		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.current,
-			setRef: (v) => (this.opts.ref.current = v),
-		});
-
-		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,
-	);
-}

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

@@ -1,60 +0,0 @@
-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

@@ -1,81 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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?.()}