@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/text/Text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte';
+import type { TextProps } from './types';
+type $$ComponentProps = TextProps & {
+    onclick?: (event: MouseEvent) => void;
+};
+declare const Text: Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/ui/components/text/index.d.ts

@@ -0,0 +1,3 @@
+import Text from './Text.svelte';
+export { Text };
+export type * from './types';

package/dist/ui/components/text/index.js

@@ -0,0 +1,2 @@
+import Text from './Text.svelte';
+export { Text };

package/dist/ui/components/text/types.d.ts

@@ -0,0 +1,46 @@
+import type { Component, Snippet } from 'svelte';
+import type { TooltipProps } from '../tooltip/types';
+export type TEXT_SIZES = 'normal' | 'large';
+export type TEXT_WEIGHTS = 'normal' | 'bold';
+export interface TextClickEvent {
+    detail: MouseEvent;
+}
+export interface TextPopupActionEvent {
+    detail: boolean;
+}
+export interface PopupConfig {
+    /** Whether the popup functionality is disabled */
+    disabled?: boolean;
+    /** Title text for the popup */
+    title?: string;
+    /** Subtitle text for the popup */
+    subtitle?: string;
+    /** Description text for the popup */
+    description?: string;
+    /** Icon component for the popup */
+    icon?: Component | null;
+    /** Whether the popup trigger is currently active */
+    active?: boolean;
+}
+export interface TextProps {
+    label?: string;
+    class?: string;
+    raw?: boolean;
+    capitalize?: boolean;
+    disabled?: boolean;
+    title?: string;
+    wrap?: 'nowrap' | 'normal';
+    textAlign?: 'left' | 'center' | 'right';
+    fontSize?: TEXT_SIZES | string;
+    fontWeight?: TEXT_WEIGHTS | string;
+    fontColor?: string;
+    height?: string;
+    ellipsisOnWidth?: string;
+    tooltip?: Partial<TooltipProps>;
+    popup?: PopupConfig;
+    icon?: Component | null;
+    loading?: boolean;
+    link?: boolean;
+    children?: Snippet;
+    pill?: Snippet;
+}

package/dist/ui/components/text/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/tooltip/Tooltip.stories.svelte

@@ -0,0 +1,128 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import { HelpIcon, InfoIcon, WarningTriangleIcon } from '../../icons';
+	import Tooltip from './Tooltip.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/Tooltip',
+		component: Tooltip,
+		tags: ['autodocs'],
+		argTypes: {
+			message: { control: { type: 'text' } },
+			placement: {
+				control: { type: 'select' },
+				options: ['top', 'bottom', 'left', 'right']
+			},
+			listener: {
+				control: { type: 'select' },
+				options: ['hover', 'click']
+			},
+			listenerout: {
+				control: { type: 'select' },
+				options: ['hover', 'click']
+			},
+			showArrow: { control: { type: 'boolean' } },
+			disabled: { control: { type: 'boolean' } },
+			width: { control: { type: 'text' } },
+			targetText: { control: { type: 'text' } },
+			bgColor: { control: { type: 'color' } },
+			fontColor: { control: { type: 'color' } }
+		},
+		args: {
+			message: 'This is a tooltip!',
+			listener: 'hover',
+			listenerout: 'hover',
+			showArrow: true
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		message: 'This tooltip appears on hover'
+	}}
+/>
+
+<Story
+	name="Click Trigger"
+	args={{
+		message: 'Click to show, click outside to hide',
+		listener: 'click',
+		listenerout: 'click'
+	}}
+/>
+
+<Story
+	name="Top Placement"
+	args={{
+		message: 'Positioned on top',
+		placement: 'top'
+	}}
+/>
+
+<Story
+	name="No Arrow"
+	args={{
+		message: 'Clean tooltip without arrow',
+		showArrow: false
+	}}
+/>
+
+<Story
+	name="Custom Width"
+	args={{
+		message: 'This is a wider tooltip with custom width',
+		width: '250px'
+	}}
+/>
+
+<Story
+	name="With Icon"
+	args={{
+		message: 'Information tooltip with icon',
+		tooltipIcon: InfoIcon,
+		tooltipIconColor: '#2196F3'
+	}}
+/>
+
+<Story
+	name="Error State"
+	args={{
+		message: 'This field is required',
+		fontColor: '#f44336',
+		tooltipIcon: WarningTriangleIcon,
+		tooltipIconColor: '#f44336'
+	}}
+/>
+
+<Story
+	name="Disabled"
+	args={{
+		message: 'This tooltip is disabled',
+		disabled: true,
+		targetText: 'Disabled (no tooltip)'
+	}}
+/>
+
+<Story
+	name="Custom Background Color"
+	args={{
+		message: 'Custom colored tooltip with matching arrow',
+		bgColor: '#007bff',
+		fontColor: '#ffffff',
+		width: '220px'
+	}}
+/>
+
+<Story
+	name="Dark Theme"
+	args={{
+		message: 'Dark themed tooltip',
+		bgColor: '#1a1a1a',
+		fontColor: '#ffffff',
+		showArrow: true
+	}}
+/>

package/dist/ui/components/tooltip/Tooltip.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Tooltip;
+type Tooltip = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Tooltip from './Tooltip.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -0,0 +1,463 @@
+<script lang="ts">
+	import {
+		arrow,
+		autoUpdate,
+		computePosition,
+		flip,
+		offset,
+		type Placement,
+		shift
+	} from '@floating-ui/dom';
+	import { tick } from 'svelte';
+	import { v4 as uuidv4 } from 'uuid';
+
+	import { cleanupTooltipMessage } from '../../../utils/index.js';
+
+	import type { TooltipEvents, TooltipInstance, TooltipProps } from './types.js';
+
+	type Props = TooltipProps;
+
+	let {
+		bgColor = 'var(--background3)',
+		message = '',
+		listener = 'hover',
+		listenerout = 'hover',
+		placement = 'right',
+		position = 'absolute',
+		class: classNames = '',
+		showArrow = true,
+		offsetVal = 10,
+		hidden = $bindable(false),
+		disabled = false,
+		tooltipIcon = null,
+		tooltipIconColor = '',
+		width = '150px',
+		padding = '6px',
+		raw = false,
+		isActive = $bindable(false),
+		fallbackPlacements = [],
+		stopPropagation = true,
+		fontColor = 'var(--text2)',
+		target,
+		tooltipContent,
+		targetText
+	}: Props = $props();
+
+	// Generate appropriate target text based on trigger if not provided
+	let defaultTargetText = $derived(
+		targetText ||
+			(listener === 'click' && listenerout === 'click'
+				? 'Click me!'
+				: listener === 'click' && listenerout === 'hover'
+					? 'Click to show'
+					: listener === 'hover' && listenerout === 'click'
+						? 'Hover to show'
+						: 'Hover me!')
+	);
+
+	// State management with runes
+	let tooltipInstance: TooltipInstance | null = $state(null);
+	let targetElement: HTMLDivElement = $state()!;
+	let tooltipElement: HTMLDivElement = $state()!;
+	let arrowElement: HTMLDivElement = $state()!;
+	let observer: MutationObserver | null = $state(null);
+
+	// Generate unique ID for this tooltip instance
+	const tooltipId = $derived(`tooltip-${uuidv4()}`);
+
+	// Format message with cleanup utility
+	let formattedMessage = $derived(cleanupTooltipMessage(message));
+
+	// Tooltip visibility state
+	let isTooltipVisible = $derived(tooltipElement ? tooltipElement.style.display === 'flex' : false);
+
+	// Global store for tracking active tooltips
+	let activeTooltips: string[] = $state([]);
+
+	// Event dispatcher
+	function dispatchEvent(eventType: keyof TooltipEvents, detail: boolean) {
+		const event = new CustomEvent(eventType, {
+			detail,
+			bubbles: true,
+			cancelable: true
+		});
+		targetElement?.dispatchEvent(event);
+	}
+
+	/**
+	 * Dismisses other tooltips based on trigger compatibility.
+	 * Dismissal rules:
+	 * - hover tooltips can dismiss other hover tooltips
+	 * - click tooltips can dismiss other click tooltips
+	 * - hover tooltips should NOT dismiss click tooltips (they're "sticky")
+	 * - click tooltips CAN dismiss hover tooltips (higher priority)
+	 */
+	function dismissOtherTooltips() {
+		const currentTriggerType = listener === 'click' && listenerout === 'click' ? 'click' : 'hover';
+
+		document.querySelectorAll<HTMLDivElement>('.tooltip[role="tooltip"]').forEach((item) => {
+			if (item.id !== tooltipId) {
+				const existingTriggerType = item.getAttribute('data-trigger-type');
+
+				const shouldDismiss =
+					currentTriggerType === 'click' ||
+					(currentTriggerType === 'hover' && existingTriggerType === 'hover');
+
+				if (shouldDismiss) {
+					item.style.display = 'none';
+					item.setAttribute('aria-hidden', 'true');
+				}
+			}
+		});
+
+		activeTooltips = [tooltipId];
+	}
+
+	/**
+	 * Sets up the tooltip with floating-ui positioning
+	 */
+	function setupTooltip(
+		toggle: HTMLElement,
+		tooltipEl: HTMLElement,
+		arrowEl?: HTMLElement
+	): TooltipInstance {
+		/**
+		 * Updates the tooltip position using floating-ui
+		 */
+		const update = () => {
+			computePosition(toggle, tooltipEl, {
+				placement: placement,
+				middleware: [
+					offset(offsetVal),
+					flip(
+						fallbackPlacements?.length > 0
+							? { fallbackPlacements }
+							: {
+									fallbackAxisSideDirection: 'start',
+									fallbackStrategy: 'bestFit'
+								}
+					),
+					shift({ padding: 5 }),
+					showArrow && arrowEl ? arrow({ element: arrowEl }) : undefined
+				].filter(Boolean)
+			}).then(({ x, y, placement: finalPlacement, middlewareData }) => {
+				// Position tooltip
+				Object.assign(tooltipEl.style, {
+					left: `${x}px`,
+					top: `${y}px`
+				});
+
+				// Position arrow using floating-ui's default behavior
+				if (showArrow && arrowEl && middlewareData?.arrow) {
+					const { x: arrowX, y: arrowY } = middlewareData.arrow;
+					const side = finalPlacement.split('-')[0];
+
+					const staticSide = {
+						top: 'bottom',
+						right: 'left',
+						bottom: 'top',
+						left: 'right'
+					}[side];
+
+					Object.assign(arrowEl.style, {
+						left: arrowX != null ? `${arrowX}px` : '',
+						top: arrowY != null ? `${arrowY}px` : '',
+						right: '',
+						bottom: '',
+						[staticSide as string]: '-4px'
+					});
+				}
+			});
+		};
+
+		/**
+		 * Shows the tooltip
+		 */
+		const showTooltip = () => {
+			if (disabled) return;
+
+			dismissOtherTooltips();
+
+			tooltipEl.style.display = 'flex';
+			tooltipEl.setAttribute('aria-hidden', 'false');
+
+			// Set trigger type for dismissal logic
+			const triggerType = listener === 'click' && listenerout === 'click' ? 'click' : 'hover';
+			tooltipEl.setAttribute('data-trigger-type', triggerType);
+
+			isActive = true;
+			hidden = false;
+
+			if (!activeTooltips.includes(tooltipId)) {
+				activeTooltips = [...activeTooltips.filter((id) => id !== tooltipId), tooltipId];
+			}
+
+			update();
+			dispatchEvent('show', true);
+		};
+
+		/**
+		 * Hides the tooltip
+		 */
+		const hideTooltip = () => {
+			// Hide immediately in test environment
+			const isTestEnv =
+				(typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') ||
+				(typeof globalThis !== 'undefined' && '__vitest__' in globalThis);
+			const delay = isTestEnv ? 0 : 50;
+
+			setTimeout(() => {
+				tooltipEl.style.display = 'none';
+				tooltipEl.setAttribute('aria-hidden', 'true');
+				tooltipEl.removeAttribute('data-trigger-type');
+				isActive = false;
+				hidden = true;
+
+				activeTooltips = activeTooltips.filter((id) => id !== tooltipId);
+
+				dispatchEvent('close', true);
+			}, delay);
+		};
+
+		// Set up event listeners based on trigger configuration
+		let eventOptions: Array<[string, () => void]> = [];
+
+		if (listener === 'click' && listenerout === 'click') {
+			eventOptions = [['click', showTooltip]];
+
+			// Global click handler for dismissal
+			const handleGlobalClick = (event: MouseEvent) => {
+				if (!tooltipEl.contains(event.target as Node) && !toggle.contains(event.target as Node)) {
+					hideTooltip();
+				}
+			};
+
+			document.addEventListener('click', handleGlobalClick);
+
+			// Return cleanup function that removes global listener
+			const originalCleanup = autoUpdate(toggle, tooltipEl, update);
+			const cleanup = () => {
+				originalCleanup();
+				document.removeEventListener('click', handleGlobalClick);
+			};
+
+			// Add event listeners to toggle element
+			eventOptions.forEach(([event, handler]) => {
+				toggle.addEventListener(event, (evt) => {
+					if (stopPropagation) {
+						evt.stopPropagation();
+						evt.preventDefault();
+					}
+					handler();
+				});
+			});
+
+			return {
+				toggle,
+				tooltip: tooltipEl,
+				arrowElement: arrowEl,
+				cleanup,
+				showTooltip,
+				hideTooltip
+			};
+		} else {
+			eventOptions = [
+				listener === 'click' ? ['click', showTooltip] : undefined,
+				listener === 'hover' ? ['mouseenter', showTooltip] : undefined,
+				listener === 'hover' ? ['mouseleave', hideTooltip] : undefined,
+				listener === 'hover' ? ['focus', showTooltip] : undefined,
+				['blur', hideTooltip]
+			].filter(Boolean) as Array<[string, () => void]>;
+		}
+
+		// Add event listeners
+		eventOptions.forEach(([event, handler]) => {
+			toggle.addEventListener(event, (evt) => {
+				if (stopPropagation) {
+					evt.stopPropagation();
+					evt.preventDefault();
+				}
+				handler();
+			});
+		});
+
+		const cleanup = autoUpdate(toggle, tooltipEl, update);
+
+		return { toggle, tooltip: tooltipEl, arrowElement: arrowEl, cleanup, showTooltip, hideTooltip };
+	}
+
+	/**
+	 * Initializes the tooltip instance
+	 */
+	async function initTooltip(): Promise<TooltipInstance | null> {
+		if (!tooltipElement || (showArrow && !arrowElement) || !targetElement) return null;
+		return setupTooltip(targetElement, tooltipElement, arrowElement);
+	}
+
+	// Public API methods
+	export function show() {
+		tooltipInstance?.showTooltip();
+	}
+
+	export function hide() {
+		tooltipInstance?.hideTooltip();
+	}
+
+	// Effect to handle hidden prop changes
+	$effect(() => {
+		if (hidden) {
+			setTimeout(() => {
+				tooltipInstance?.hideTooltip();
+				const wrapper = document.querySelector<HTMLDivElement>('.finsweet-components');
+				if (wrapper) {
+					wrapper.click();
+					wrapper.focus();
+				}
+			}, 10);
+		}
+	});
+
+	// Initialize tooltip when component mounts
+	$effect(() => {
+		if (targetElement && tooltipElement) {
+			tick().then(async () => {
+				tooltipInstance = await initTooltip();
+
+				if (tooltipElement) {
+					observer = new MutationObserver((mutations) => {
+						mutations.forEach((mutation) => {
+							if (mutation.type === 'attributes' && tooltipElement?.style) {
+								const isVisible = tooltipElement.style.display !== 'none';
+								dispatchEvent(isVisible ? 'show' : 'close', true);
+							}
+						});
+					});
+
+					observer.observe(tooltipElement, { attributes: true });
+				}
+			});
+		}
+
+		// Cleanup effect
+		return () => {
+			if (tooltipInstance) {
+				tooltipInstance.cleanup();
+				activeTooltips = activeTooltips.filter((id) => id !== tooltipId);
+			}
+			if (observer) {
+				observer.disconnect();
+				observer = null;
+			}
+		};
+	});
+</script>
+
+<div class="target {classNames}" bind:this={targetElement} aria-describedby={tooltipId}>
+	{#if target}
+		{@render target()}
+	{:else}
+		<!-- Default target for Storybook compatibility -->
+		<button
+			style="
+				padding: 4px 8px; 
+				background: #007bff; 
+				color: white; 
+				border: none; 
+				border-radius: 4px; 
+				cursor: pointer;
+			"
+		>
+			{defaultTargetText}
+		</button>
+	{/if}
+
+	<div
+		class="tooltip"
+		bind:this={tooltipElement}
+		role="tooltip"
+		id={tooltipId}
+		aria-hidden={isTooltipVisible ? 'false' : 'true'}
+		style="position:{position}; width:{width}; padding:{padding}; background:{bgColor};"
+	>
+		{#if tooltipIcon}
+			{@const IconComponent = tooltipIcon}
+			<div class="icon" style="color:{tooltipIconColor};">
+				<IconComponent />
+			</div>
+		{/if}
+
+		<div class="content-wrapper">
+			{#if tooltipContent}
+				{@render tooltipContent()}
+			{:else if message && raw}
+				<div class="message" style="color:{fontColor};">
+					{@html message}
+				</div>
+			{:else if message}
+				<div class="message">
+					<span>{formattedMessage}</span>
+				</div>
+			{/if}
+		</div>
+
+		{#if showArrow}
+			<div class="arrow" bind:this={arrowElement} style="background: {bgColor};"></div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tooltip {
+		display: none;
+		top: 0;
+		left: 0;
+		z-index: 99999999999;
+		border-radius: 4px;
+		background: var(--background3);
+		box-shadow:
+			0px 0.5px 1px 0px #000,
+			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+		color: var(--text2);
+		font-family: Inter;
+		line-height: 120%;
+		width: 150px;
+		padding: 6px;
+		flex-direction: row;
+		gap: 4px;
+		align-items: start;
+		justify-content: start;
+	}
+
+	.content-wrapper {
+		flex: 1;
+		min-width: 0;
+		z-index: 3;
+		background: inherit;
+	}
+
+	.message {
+		text-wrap: normal;
+		white-space: normal;
+		color: var(--text2);
+		font-weight: 500;
+		font-size: 11px;
+	}
+
+	.arrow {
+		position: absolute;
+		width: 10px;
+		height: 10px;
+		transform: rotate(45deg);
+	}
+
+	.target {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon {
+		position: relative;
+		z-index: 1;
+	}
+</style>

package/dist/ui/components/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipProps } from './types.js';
+declare const Tooltip: import("svelte").Component<TooltipProps, {
+    show: () => void;
+    hide: () => void;
+}, "hidden" | "isActive">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/ui/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type * from './types.js';

package/dist/ui/components/tooltip/index.js

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