@salmexio/ui 0.4.0 → 1.1.0

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -0,0 +1,260 @@
+<!--
+  @component Tooltip
+
+  INFRARED — Accessible tooltip with configurable placement,
+  keyboard support, hover/focus triggers, and arrow indicator.
+  Uses fixed positioning with smart viewport-aware flipping.
+
+  @example
+  <Tooltip text="Save document">
+    <button>Save</button>
+  </Tooltip>
+  <Tooltip text="Copy to clipboard" placement="right" delay={200}>
+    <button>Copy</button>
+  </Tooltip>
+-->
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { cn } from '../../utils/cn.js';
+import { tick } from 'svelte';
+
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+
+interface Props {
+	/** Tooltip text content. */
+	text: string;
+	/** Preferred placement relative to the trigger element. */
+	placement?: Placement;
+	/** Delay in ms before showing the tooltip. */
+	delay?: number;
+	/** Disable the tooltip (still renders children). */
+	disabled?: boolean;
+	/** The trigger element(s). */
+	children: Snippet;
+	/** Additional CSS class for the tooltip bubble. */
+	class?: string;
+	testId?: string;
+}
+
+let {
+	text,
+	placement = 'top',
+	delay = 300,
+	disabled = false,
+	children,
+	class: className = '',
+	testId
+}: Props = $props();
+
+let visible = $state(false);
+let triggerEl = $state<HTMLElement | null>(null);
+let tooltipEl = $state<HTMLElement | null>(null);
+let showTimer: ReturnType<typeof setTimeout> | undefined;
+let hideTimer: ReturnType<typeof setTimeout> | undefined;
+
+const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+
+let placementOverride = $state<Placement | null>(null);
+let computedTop = $state('0');
+let computedLeft = $state('0');
+
+const computedPlacement = $derived(placementOverride ?? placement);
+
+function show() {
+	if (disabled) return;
+	clearTimeout(hideTimer);
+	showTimer = setTimeout(async () => {
+		visible = true;
+		await tick();
+		positionTooltip();
+	}, delay);
+}
+
+function hide() {
+	clearTimeout(showTimer);
+	hideTimer = setTimeout(() => {
+		visible = false;
+		placementOverride = null;
+	}, 100);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Escape' && visible) {
+		e.stopPropagation();
+		visible = false;
+	}
+}
+
+function positionTooltip() {
+	if (!triggerEl || !tooltipEl) return;
+
+	const triggerRect = triggerEl.getBoundingClientRect();
+	const tooltipRect = tooltipEl.getBoundingClientRect();
+	const gap = 8;
+
+	let top = 0;
+	let left = 0;
+	let finalPlacement = placement;
+
+	// Calculate position based on placement
+	switch (placement) {
+		case 'top':
+			top = triggerRect.top - tooltipRect.height - gap;
+			left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+			if (top < 0) {
+				finalPlacement = 'bottom';
+				top = triggerRect.bottom + gap;
+			}
+			break;
+		case 'bottom':
+			top = triggerRect.bottom + gap;
+			left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+			if (top + tooltipRect.height > window.innerHeight) {
+				finalPlacement = 'top';
+				top = triggerRect.top - tooltipRect.height - gap;
+			}
+			break;
+		case 'left':
+			top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+			left = triggerRect.left - tooltipRect.width - gap;
+			if (left < 0) {
+				finalPlacement = 'right';
+				left = triggerRect.right + gap;
+			}
+			break;
+		case 'right':
+			top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+			left = triggerRect.right + gap;
+			if (left + tooltipRect.width > window.innerWidth) {
+				finalPlacement = 'left';
+				left = triggerRect.left - tooltipRect.width - gap;
+			}
+			break;
+	}
+
+	// Clamp to viewport
+	left = Math.max(8, Math.min(left, window.innerWidth - tooltipRect.width - 8));
+	top = Math.max(8, Math.min(top, window.innerHeight - tooltipRect.height - 8));
+
+	computedTop = `${top}px`;
+	computedLeft = `${left}px`;
+	placementOverride = finalPlacement;
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	bind:this={triggerEl}
+	class="sx-tooltip-trigger"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocusin={show}
+	onfocusout={hide}
+	aria-describedby={visible ? tooltipId : undefined}
+>
+	{@render children()}
+</span>
+
+{#if visible && text}
+	<div
+		bind:this={tooltipEl}
+		id={tooltipId}
+		role="tooltip"
+		class={cn(
+			'sx-tooltip',
+			`sx-tooltip-${computedPlacement}`,
+			className
+		)}
+		style="top: {computedTop}; left: {computedLeft};"
+		data-testid={testId}
+	>
+		{text}
+		<span class="sx-tooltip-arrow" aria-hidden="true"></span>
+	</div>
+{/if}
+
+<style>
+	.sx-tooltip-trigger {
+		display: inline-flex;
+	}
+
+	.sx-tooltip {
+		position: fixed;
+		z-index: var(--sx-z-tooltip);
+		max-width: 240px;
+		padding: var(--sx-space-1-5) var(--sx-space-3);
+		background: var(--sx-color-surface-3);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-sm);
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-text);
+		line-height: var(--sx-leading-normal);
+		box-shadow: var(--sx-shadow-lg);
+		pointer-events: none;
+		animation: sx-tooltip-in 150ms var(--sx-ease-out) both;
+		word-wrap: break-word;
+	}
+
+	/* Arrow */
+	.sx-tooltip-arrow {
+		position: absolute;
+		width: 8px;
+		height: 8px;
+		background: var(--sx-color-surface-3);
+		border: 1px solid var(--sx-color-border-strong);
+		transform: rotate(45deg);
+	}
+
+	.sx-tooltip-top .sx-tooltip-arrow {
+		bottom: -5px;
+		left: 50%;
+		margin-left: -4px;
+		border-top: none;
+		border-left: none;
+	}
+
+	.sx-tooltip-bottom .sx-tooltip-arrow {
+		top: -5px;
+		left: 50%;
+		margin-left: -4px;
+		border-bottom: none;
+		border-right: none;
+	}
+
+	.sx-tooltip-left .sx-tooltip-arrow {
+		right: -5px;
+		top: 50%;
+		margin-top: -4px;
+		border-bottom: none;
+		border-left: none;
+	}
+
+	.sx-tooltip-right .sx-tooltip-arrow {
+		left: -5px;
+		top: 50%;
+		margin-top: -4px;
+		border-top: none;
+		border-right: none;
+	}
+
+	@keyframes sx-tooltip-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-tooltip {
+			animation: none;
+		}
+	}
+</style>

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+interface Props {
+    /** Tooltip text content. */
+    text: string;
+    /** Preferred placement relative to the trigger element. */
+    placement?: Placement;
+    /** Delay in ms before showing the tooltip. */
+    delay?: number;
+    /** Disable the tooltip (still renders children). */
+    disabled?: boolean;
+    /** The trigger element(s). */
+    children: Snippet;
+    /** Additional CSS class for the tooltip bubble. */
+    class?: string;
+    testId?: string;
+}
+/**
+ * Tooltip
+ *
+ * INFRARED — Accessible tooltip with configurable placement,
+ * keyboard support, hover/focus triggers, and arrow indicator.
+ * Uses fixed positioning with smart viewport-aware flipping.
+ *
+ * @example
+ * <Tooltip text="Save document">
+ *   <button>Save</button>
+ * </Tooltip>
+ * <Tooltip text="Copy to clipboard" placement="right" delay={200}>
+ *   <button>Copy</button>
+ * </Tooltip>
+ */
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,UAAU,KAAK;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAyID;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/primitives/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/primitives/Tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/primitives/index.d.ts

@@ -1,3 +1,4 @@
 export { Button } from './Button/index.js';
 export { Badge } from './Badge/index.js';
+export { Tooltip } from './Tooltip/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/primitives/index.js

@@ -1,2 +1,3 @@
 export { Button } from './Button/index.js';
 export { Badge } from './Badge/index.js';
+export { Tooltip } from './Tooltip/index.js';