@marianmeres/stuic 2.10.0 → 2.11.0

package/dist/actions/tooltip/tooltip.svelte.d.ts

@@ -21,6 +21,30 @@ export declare function isTooltipSupported(): boolean;
  * Valid positions for tooltip placement relative to the anchor element.
  */
 export type TooltipPosition = "top" | "top-left" | "top-right" | "top-span-left" | "top-span-right" | "bottom" | "bottom-left" | "bottom-right" | "bottom-span-left" | "bottom-span-right" | "left" | "right";
+/**
+ * Configuration function for the tooltip action.
+ *
+ * Returns an object with tooltip options. Using a function allows reactive
+ * updates when Svelte state changes.
+ *
+ * @returns Tooltip configuration object
+ * @property enabled - Whether the tooltip is active (default: `true`)
+ * @property content - Tooltip text content, falls back to `aria-label` if not provided
+ * @property position - Placement relative to anchor element (default: `"top"`)
+ * @property debug - Enable console debug logging
+ * @property class - Additional CSS classes to merge with default styles
+ * @property onShow - Callback fired after tooltip becomes visible
+ * @property onHide - Callback fired after tooltip is hidden
+ */
+export type TooltipConfig = () => {
+    enabled?: boolean;
+    content?: string | null;
+    position?: TooltipPosition;
+    debug?: boolean;
+    class?: string;
+    onShow?: CallableFunction;
+    onHide?: CallableFunction;
+};
 /**
  * A Svelte action that displays a tooltip anchored to an element using CSS Anchor Positioning.
  *
@@ -57,12 +81,4 @@ export type TooltipPosition = "top" | "top-left" | "top-right" | "top-span-left"
  * - Tooltip persists when hovering over it (useful for interactive content)
  * - Automatically cleans up DOM elements on unmount
  */
-export declare function tooltip(anchorEl: HTMLElement, fn?: () => {
-    enabled?: boolean;
-    content?: string | null;
-    position?: TooltipPosition;
-    debug?: boolean;
-    class?: string;
-    onShow?: CallableFunction;
-    onHide?: CallableFunction;
-}): void;
+export declare function tooltip(anchorEl: HTMLElement, fn?: TooltipConfig): void;

package/dist/components/Button/Button.svelte

@@ -22,6 +22,8 @@
 		roleSwitch?: boolean;
 		checked?: boolean;
 		el?: Element;
+		/*  */
+		tooltip?: TooltipConfig;
 	}
 
 	export interface ButtonPresetClasses {
@@ -88,6 +90,7 @@
 	import { twMerge } from "../../utils/tw-merge.js";
 	//
 	import "./index.css";
+	import { tooltip, type TooltipConfig } from "../../actions/index.js";
 
 	let {
 		variant,
@@ -105,6 +108,8 @@
 		checked = $bindable(false),
 		el = $bindable(),
 		//
+		tooltip: tooltipConfig = () => ({ enabled: false }),
+		//
 		...rest
 	}: Props = $props();
 
@@ -147,11 +152,22 @@
 </script>
 
 {#if href}
-	<a {href} bind:this={el} class={twMerge(_class, classProp)} {...rest as any}>
+	<a
+		{href}
+		bind:this={el}
+		class={twMerge(_class, classProp)}
+		use:tooltip={tooltipConfig}
+		{...rest as any}
+	>
 		{@render children?.({})}
 	</a>
 {:else}
-	<button bind:this={el} class={twMerge(_class, classProp)} {...rest}>
+	<button
+		bind:this={el}
+		class={twMerge(_class, classProp)}
+		use:tooltip={tooltipConfig}
+		{...rest}
+	>
 		{@render children?.({ checked })}
 	</button>
 {/if}

package/dist/components/Button/Button.svelte.d.ts

@@ -22,6 +22,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     roleSwitch?: boolean;
     checked?: boolean;
     el?: Element;
+    tooltip?: TooltipConfig;
 }
 export interface ButtonPresetClasses {
     size: Record<string, string>;
@@ -33,6 +34,7 @@ export interface ButtonPresetClasses {
 export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2.5\n\t\tselect-none\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses;
 import "./index.css";
+import { type TooltipConfig } from "../../actions/index.js";
 declare const Button: import("svelte").Component<Props, {}, "checked" | "el">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -25,6 +25,8 @@
 			coll: ItemColl
 		) => Promise<boolean | undefined | void> | boolean | undefined | void;
 		buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
+		//
+		tooltip?: TooltipConfig;
 	}
 </script>
 
@@ -38,6 +40,7 @@
 	import Button from "../Button/Button.svelte";
 	//
 	import "./index.css";
+	import { tooltip, type TooltipConfig } from "../../actions/index.js";
 
 	let {
 		options,
@@ -54,6 +57,7 @@
 		style,
 		onButtonClick,
 		buttonProps,
+		tooltip: tooltipConfig = () => ({ enabled: false }),
 	}: Props = $props();
 
 	const coll: ItemColl = $derived.by(() => {
@@ -137,6 +141,7 @@
 		{style}
 		role="radiogroup"
 		aria-labelledby={$coll?.active?.id || ""}
+		use:tooltip={tooltipConfig}
 	>
 		{#each coll.items as item, i}
 			<Button

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte.d.ts

@@ -20,8 +20,10 @@ export interface Props {
     /** Return false to prevent activation */
     onButtonClick?: (index: number, coll: ItemColl) => Promise<boolean | undefined | void> | boolean | undefined | void;
     buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
+    tooltip?: TooltipConfig;
 }
 import "./index.css";
+import { type TooltipConfig } from "../../actions/index.js";
 declare const ButtonGroupRadio: import("svelte").Component<Props, {}, "value" | "activeIndex">;
 type ButtonGroupRadio = ReturnType<typeof ButtonGroupRadio>;
 export default ButtonGroupRadio;

package/dist/components/Input/FieldAssets.svelte

@@ -263,7 +263,7 @@
 	// otherwise normal spinner will be shown
 	let progress = $state<Record<string, number>>({});
 	const onProgress = (id: string, value: number) => (progress[id] = Math.round(value));
-	$inspect("progress", progress);
+	// $inspect("progress", progress);
 
 	$effect(() => {
 		if (!assets?.length) modal?.close?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",