@insymetri/styleguide 0.1.59 → 0.1.60

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -8,6 +8,7 @@
 	import {useFloating, portal, clickOutside} from '../utils/menu'
 	import MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
 	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
+	import MenuItemTooltip from '../utils/menu/MenuItemTooltip.svelte'
 
 	type Props = {
 		items: MenuItem[]
@@ -69,6 +70,7 @@
 	let triggerEl = $state<HTMLElement | null>(null)
 	let floatingEl = $state<HTMLElement | null>(null)
 	let highlightedIndex = $state(-1)
+	let tooltipState = $state<{el: HTMLElement, text: string} | null>(null)
 
 	$effect(() => {
 		if (autofocus && triggerEl) triggerEl.focus({focusVisible: true} as FocusOptions)
@@ -112,6 +114,7 @@
 	})
 
 	function handleSelect(item: MenuItem) {
+		if (item.disabled) return
 		value = item.value
 		open = false
 		onSelect?.(item.value)
@@ -119,6 +122,14 @@
 		triggerEl?.focus()
 	}
 
+	function showTooltip(el: HTMLElement, text: string) {
+		tooltipState = {el, text}
+	}
+
+	function hideTooltip(el: HTMLElement) {
+		if (tooltipState?.el === el) tooltipState = null
+	}
+
 	function handleSelectValue(val: string) {
 		const item = items.find(i => i.value === val)
 		if (item) handleSelect(item)
@@ -208,6 +219,7 @@
 		if (open && searchable) {
 			search.resetAndFocus()
 		}
+		if (!open) tooltipState = null
 	})
 
 	// Initialize highlight to selected (or first enabled) when opened (non-searchable)
@@ -284,10 +296,10 @@
 							data-disabled={item.disabled ? '' : undefined}
 							data-index={index}
 							class={cn(
-								'flex items-center justify-between gap-12 px-12 rounded-6 text-dropdown-item cursor-default outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+								'flex items-center justify-between gap-12 px-12 rounded-6 text-dropdown-item cursor-default outline-none data-[disabled]:opacity-50',
 								itemDensityClasses[density.value],
 								value === item.value && 'text-dropdown-item-selected',
-								isHighlighted && 'bg-dropdown-item-hover'
+								isHighlighted && !item.disabled && 'bg-dropdown-item-hover'
 							)}
 							data-search-item={searchable ? '' : undefined}
 							onclick={() => handleSelect(item)}
@@ -295,6 +307,12 @@
 							onpointermove={searchable
 								? () => search.setHighlight(index)
 								: () => { if (!item.disabled) highlightedIndex = index }}
+							onpointerenter={(e) => {
+								if (item.disabled && item.disabledReason) showTooltip(e.currentTarget as HTMLElement, item.disabledReason)
+							}}
+							onpointerleave={(e) => {
+								if (item.disabled && item.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+							}}
 						>
 							{#if renderItem}
 								{@render renderItem(item, value === item.value)}
@@ -318,6 +336,9 @@
 					{/if}
 				</div>
 			</div>
+			{#if tooltipState}
+				<MenuItemTooltip referenceEl={tooltipState.el} text={tooltipState.text} />
+			{/if}
 		</div>
 	{/if}
 	{#if showError && errorMessage}

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -8,6 +8,7 @@
 	import MenuItemContent from '../utils/menu/MenuItemContent.svelte'
 	import MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
 	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
+	import MenuItemTooltip from '../utils/menu/MenuItemTooltip.svelte'
 	import IIDropdownMenuSub from './IIDropdownMenuSub.svelte'
 	import IIDropdownMenuSubSimple from './IIDropdownMenuSubSimple.svelte'
 
@@ -45,6 +46,15 @@
 	let floatingEl = $state<HTMLElement | null>(null)
 	let openSubIndex = $state<number | null>(null)
 	let subTriggerEls: Record<number, HTMLElement | null> = {}
+	let tooltipState = $state<{el: HTMLElement, text: string} | null>(null)
+
+	function showTooltip(el: HTMLElement, text: string) {
+		tooltipState = {el, text}
+	}
+
+	function hideTooltip(el: HTMLElement) {
+		if (tooltipState?.el === el) tooltipState = null
+	}
 
 	const placement = $derived(align === 'center' ? side : `${side}-${align}` as const)
 
@@ -89,6 +99,7 @@
 	function close() {
 		open = false
 		openSubIndex = null
+		tooltipState = null
 		triggerEl?.focus()
 	}
 
@@ -197,15 +208,28 @@
 		role="menuitem"
 		tabindex="-1"
 		data-disabled={item.disabled ? '' : undefined}
-		class={menuItemClass({variant: item.variant, searchable, isHighlighted: index === search.highlightedIndex})}
+		class={menuItemClass({variant: item.variant, searchable, isHighlighted: !item.disabled && index === search.highlightedIndex})}
 		data-search-item={searchable ? '' : undefined}
-		onclick={() => handleSelect(item.value)}
+		onclick={() => {
+			if (item.disabled) return
+			handleSelect(item.value)
+		}}
 		onfocus={searchable ? search.refocusInput : undefined}
-		onpointermove={searchable ? () => search.setHighlight(index) : undefined}
-		onpointerenter={!searchable ? (e) => {
-			openSubIndex = null
-			;(e.currentTarget as HTMLElement).focus()
-		} : undefined}
+		onpointermove={searchable && !item.disabled ? () => search.setHighlight(index) : undefined}
+		onpointerenter={(e) => {
+			const el = e.currentTarget as HTMLElement
+			if (item.disabled) {
+				if (item.disabledReason) showTooltip(el, item.disabledReason)
+				return
+			}
+			if (!searchable) {
+				openSubIndex = null
+				el.focus()
+			}
+		}}
+		onpointerleave={(e) => {
+			if (item.disabled && item.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+		}}
 	>
 		{@render itemContent(item)}
 	</div>
@@ -224,11 +248,20 @@
 		class={cn(menuStyles.item, menuStyles.itemDefault)}
 		bind:this={subTriggerEls[subIdx]}
 		onpointerenter={(e) => {
+			const el = e.currentTarget as HTMLElement
+			if (entry.disabled) {
+				if (entry.disabledReason) showTooltip(el, entry.disabledReason)
+				return
+			}
 			openSubIndex = subIdx
-			;(e.currentTarget as HTMLElement).focus()
+			el.focus()
+		}}
+		onpointerleave={(e) => {
+			if (entry.disabled && entry.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+			e.stopImmediatePropagation()
 		}}
-		onpointerleave={(e) => e.stopImmediatePropagation()}
 		onclick={() => {
+			if (entry.disabled) return
 			openSubIndex = isOpen ? null : subIdx
 		}}
 	>
@@ -331,5 +364,8 @@
 				<MenuNoResults />
 			{/if}
 		</div>
+		{#if tooltipState}
+			<MenuItemTooltip referenceEl={tooltipState.el} text={tooltipState.text} />
+		{/if}
 	</div>
 {/if}

package/dist/IIDropdownMenu/IIDropdownMenuSub.svelte

@@ -5,6 +5,7 @@
 	import {useFloating, portal} from '../utils/menu'
 	import MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
 	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
+	import MenuItemTooltip from '../utils/menu/MenuItemTooltip.svelte'
 
 	type Props = {
 		items: MenuEntry[]
@@ -31,6 +32,15 @@
 	})
 
 	let floatingEl = $state<HTMLElement | null>(null)
+	let tooltipState = $state<{el: HTMLElement, text: string} | null>(null)
+
+	function showTooltip(el: HTMLElement, text: string) {
+		tooltipState = {el, text}
+	}
+
+	function hideTooltip(el: HTMLElement) {
+		if (tooltipState?.el === el) tooltipState = null
+	}
 
 	useFloating({
 		reference: () => triggerEl,
@@ -99,10 +109,19 @@
 								role="menuitem"
 								tabindex="-1"
 								data-disabled={item.disabled ? '' : undefined}
-								class={menuItemClass({variant: item.variant, searchable: true, isHighlighted: index === search.highlightedIndex})}
+								class={menuItemClass({variant: item.variant, searchable: true, isHighlighted: !item.disabled && index === search.highlightedIndex})}
 								data-search-item=""
-								onclick={() => onSelect(item.value)}
-								onpointermove={() => search.setHighlight(index)}
+								onclick={() => {
+									if (item.disabled) return
+									onSelect(item.value)
+								}}
+								onpointermove={() => { if (!item.disabled) search.setHighlight(index) }}
+								onpointerenter={(e) => {
+									if (item.disabled && item.disabledReason) showTooltip(e.currentTarget as HTMLElement, item.disabledReason)
+								}}
+								onpointerleave={(e) => {
+									if (item.disabled && item.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+								}}
 							>
 								{@render renderItemContent(item)}
 							</div>
@@ -114,10 +133,19 @@
 						role="menuitem"
 						tabindex="-1"
 						data-disabled={entry.disabled ? '' : undefined}
-						class={menuItemClass({variant: entry.variant, searchable: true, isHighlighted: index === search.highlightedIndex})}
+						class={menuItemClass({variant: entry.variant, searchable: true, isHighlighted: !entry.disabled && index === search.highlightedIndex})}
 						data-search-item=""
-						onclick={() => onSelect(entry.value)}
-						onpointermove={() => search.setHighlight(index)}
+						onclick={() => {
+							if (entry.disabled) return
+							onSelect(entry.value)
+						}}
+						onpointermove={() => { if (!entry.disabled) search.setHighlight(index) }}
+						onpointerenter={(e) => {
+							if (entry.disabled && entry.disabledReason) showTooltip(e.currentTarget as HTMLElement, entry.disabledReason)
+						}}
+						onpointerleave={(e) => {
+							if (entry.disabled && entry.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+						}}
 					>
 						{@render renderItemContent(entry)}
 					</div>
@@ -128,4 +156,7 @@
 			{/if}
 		</div>
 	</div>
+	{#if tooltipState}
+		<MenuItemTooltip referenceEl={tooltipState.el} text={tooltipState.text} />
+	{/if}
 </div>

package/dist/IIDropdownMenu/IIDropdownMenuSubSimple.svelte

@@ -2,6 +2,7 @@
 	import type {Snippet} from 'svelte'
 	import {isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
 	import {useFloating, portal} from '../utils/menu'
+	import MenuItemTooltip from '../utils/menu/MenuItemTooltip.svelte'
 
 	type Props = {
 		items: MenuEntry[]
@@ -22,6 +23,15 @@
 	}: Props = $props()
 
 	let floatingEl = $state<HTMLElement | null>(null)
+	let tooltipState = $state<{el: HTMLElement, text: string} | null>(null)
+
+	function showTooltip(el: HTMLElement, text: string) {
+		tooltipState = {el, text}
+	}
+
+	function hideTooltip(el: HTMLElement) {
+		if (tooltipState?.el === el) tooltipState = null
+	}
 
 	useFloating({
 		reference: () => triggerEl,
@@ -107,8 +117,21 @@
 								tabindex="-1"
 								data-disabled={groupItem.disabled ? '' : undefined}
 								class={menuItemClass({variant: groupItem.variant})}
-								onclick={() => onSelect(groupItem.value)}
-								onpointerenter={(e) => (e.currentTarget as HTMLElement).focus()}
+								onclick={() => {
+									if (groupItem.disabled) return
+									onSelect(groupItem.value)
+								}}
+								onpointerenter={(e) => {
+									const el = e.currentTarget as HTMLElement
+									if (groupItem.disabled) {
+										if (groupItem.disabledReason) showTooltip(el, groupItem.disabledReason)
+										return
+									}
+									el.focus()
+								}}
+								onpointerleave={(e) => {
+									if (groupItem.disabled && groupItem.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+								}}
 							>
 								{@render renderItemContent(groupItem)}
 							</div>
@@ -123,12 +146,28 @@
 					tabindex="-1"
 					data-disabled={entry.disabled ? '' : undefined}
 					class={menuItemClass({variant: entry.variant})}
-					onclick={() => onSelect(entry.value)}
-					onpointerenter={(e) => (e.currentTarget as HTMLElement).focus()}
+					onclick={() => {
+						if (entry.disabled) return
+						onSelect(entry.value)
+					}}
+					onpointerenter={(e) => {
+						const el = e.currentTarget as HTMLElement
+						if (entry.disabled) {
+							if (entry.disabledReason) showTooltip(el, entry.disabledReason)
+							return
+						}
+						el.focus()
+					}}
+					onpointerleave={(e) => {
+						if (entry.disabled && entry.disabledReason) hideTooltip(e.currentTarget as HTMLElement)
+					}}
 				>
 					{@render renderItemContent(entry)}
 				</div>
 			{/if}
 		{/each}
 	</div>
+	{#if tooltipState}
+		<MenuItemTooltip referenceEl={tooltipState.el} text={tooltipState.text} />
+	{/if}
 </div>

package/dist/utils/menu/MenuItemTooltip.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import {useFloating} from './use-floating.svelte'
+	import {portal} from './use-portal'
+
+	type Props = {
+		referenceEl: HTMLElement | null
+		text: string
+	}
+
+	let {referenceEl, text}: Props = $props()
+
+	let floatingEl = $state<HTMLElement | null>(null)
+
+	useFloating({
+		reference: () => referenceEl,
+		floating: () => floatingEl,
+		placement: 'right',
+		offset: 8,
+	})
+</script>
+
+<div use:portal>
+	<div
+		bind:this={floatingEl}
+		role="tooltip"
+		class="bg-dark text-surface text-tiny px-8 py-4 rounded-4 max-w-200 z-16 pointer-events-none shadow-dropdown"
+	>
+		{text}
+	</div>
+</div>

package/dist/utils/menu/MenuItemTooltip.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    referenceEl: HTMLElement | null;
+    text: string;
+};
+declare const MenuItemTooltip: import("svelte").Component<Props, {}, "">;
+type MenuItemTooltip = ReturnType<typeof MenuItemTooltip>;
+export default MenuItemTooltip;

package/dist/utils/menu/index.d.ts

@@ -1,6 +1,7 @@
 export { default as MenuSearchInput } from './MenuSearchInput.svelte';
 export { default as MenuNoResults } from './MenuNoResults.svelte';
 export { default as MenuItemContent } from './MenuItemContent.svelte';
+export { default as MenuItemTooltip } from './MenuItemTooltip.svelte';
 export { menuStyles, menuItemClass } from './menu-styles';
 export { portal } from './use-portal';
 export { clickOutside } from './use-click-outside';

package/dist/utils/menu/index.js

@@ -1,6 +1,7 @@
 export { default as MenuSearchInput } from './MenuSearchInput.svelte';
 export { default as MenuNoResults } from './MenuNoResults.svelte';
 export { default as MenuItemContent } from './MenuItemContent.svelte';
+export { default as MenuItemTooltip } from './MenuItemTooltip.svelte';
 export { menuStyles, menuItemClass } from './menu-styles';
 export { portal } from './use-portal';
 export { clickOutside } from './use-click-outside';

package/dist/utils/menu/menu-search.svelte.d.ts

@@ -4,6 +4,7 @@ export type MenuItem = {
     value: string;
     icon?: Snippet;
     disabled?: boolean;
+    disabledReason?: string;
     variant?: 'default' | 'destructive';
     shortcut?: string;
 };
@@ -20,6 +21,7 @@ export type SubEntry = {
     label: string;
     icon?: Snippet;
     disabled?: boolean;
+    disabledReason?: string;
     shortcut?: string;
     items: MenuEntry[];
     searchable?: boolean;

package/dist/utils/menu/menu-styles.d.ts

@@ -1,7 +1,7 @@
 export declare const menuStyles: {
-    readonly item: "flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none";
-    readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover";
-    readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none";
+    readonly item: "flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none";
+    readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
+    readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
     readonly content: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none";
     readonly subContent: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none";
     readonly searchableSubContent: "min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden animate-fade-in motion-reduce:animate-none";

package/dist/utils/menu/menu-styles.js

@@ -1,8 +1,8 @@
 import { cn } from '../cn';
 export const menuStyles = {
-    item: 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
-    itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover',
-    itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none',
+    item: 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none',
+    itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
+    itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
     content: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none',
     subContent: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none',
     searchableSubContent: 'min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden animate-fade-in motion-reduce:animate-none',
@@ -13,7 +13,7 @@ export const menuStyles = {
 export function menuItemClass(opts) {
     const { variant = 'default', searchable = false, isHighlighted = false } = opts;
     if (variant === 'destructive') {
-        return cn(menuStyles.item, 'text-error', !searchable && 'hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg', searchable && isHighlighted && 'bg-error-bg');
+        return cn(menuStyles.item, 'text-error', !searchable && 'hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg', searchable && isHighlighted && 'bg-error-bg', 'data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent');
     }
-    return cn(menuStyles.item, 'text-dropdown-item', !searchable && 'hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover', searchable && isHighlighted && 'bg-dropdown-item-hover');
+    return cn(menuStyles.item, 'text-dropdown-item', !searchable && 'hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover', searchable && isHighlighted && 'bg-dropdown-item-hover', 'data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.59",
+	"version": "0.1.60",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {