@marianmeres/stuic 3.61.0 → 3.63.0

package/dist/actions/onboarding/OnboardingShell.svelte

@@ -3,7 +3,12 @@
 	import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
 	import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
 
-	type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull">;
+	type ButtonOverrides = Pick<
+		ButtonProps,
+		"variant" | "intent" | "size" | "roundedFull" | "class"
+	>;
+
+	export type IconFn = (props?: Partial<{ size: number }>) => string;
 
 	export interface Props {
 		step: TourStepDef;
@@ -26,6 +31,12 @@
 		prevButtonProps?: ButtonOverrides;
 		/** Override props for the next/finish button */
 		nextButtonProps?: ButtonOverrides;
+		/** Custom icon for the prev button. Default: iconChevronLeft */
+		iconPrev?: IconFn;
+		/** Custom icon for the next button. Default: iconChevronRight */
+		iconNext?: IconFn;
+		/** Custom icon for the finish (last step) button. Default: iconCheck */
+		iconFinish?: IconFn;
 	}
 </script>
 
@@ -34,6 +45,7 @@
 	import Button from "../../components/Button/Button.svelte";
 	import { iconChevronLeft, iconChevronRight, iconCheck } from "../../icons/index.js";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import { omit } from "../../utils/omit-pick.js";
 
 	let {
 		step,
@@ -50,6 +62,9 @@
 		showSteps = true,
 		prevButtonProps,
 		nextButtonProps,
+		iconPrev = iconChevronLeft,
+		iconNext = iconChevronRight,
+		iconFinish = iconCheck,
 	}: Props = $props();
 
 	const context: TourShellContext = $derived({
@@ -105,25 +120,30 @@
 				{#if !isFirst}
 					<Button
 						onclick={prev}
-						class={twMerge(BUTTON_CLS, classControls)}
+						class={twMerge(BUTTON_CLS, classControls, prevButtonProps?.class)}
 						{...BUTTON_PROPS}
-						{...prevButtonProps}
+						{...omit(prevButtonProps ?? {}, "class")}
 					>
-						{@html iconChevronLeft({ size: ICON_SIZE })}
+						{@html iconPrev({ size: ICON_SIZE })}
 					</Button>
 				{/if}
 				<Button
 					onclick={next}
-					class={twMerge(BUTTON_CLS, _finishLabel && "pl-2 pr-3", classControls)}
+					class={twMerge(
+						BUTTON_CLS,
+						_finishLabel && "pl-2 pr-3",
+						classControls,
+						nextButtonProps?.class
+					)}
 					{...BUTTON_PROPS}
 					aspect1={!_finishLabel}
 					intent="primary"
 					variant="solid"
-					{...nextButtonProps}
+					{...omit(nextButtonProps ?? {}, "class")}
 				>
 					{@html isLast
-						? iconCheck({ size: ICON_SIZE })
-						: iconChevronRight({ size: ICON_SIZE })}
+						? iconFinish({ size: ICON_SIZE })
+						: iconNext({ size: ICON_SIZE })}
 					{#if _finishLabel}{_finishLabel}{/if}
 				</Button>
 			</div>

package/dist/actions/onboarding/OnboardingShell.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { Snippet } from "svelte";
 import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
 import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
-type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull">;
+type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull" | "class">;
+export type IconFn = (props?: Partial<{
+    size: number;
+}>) => string;
 export interface Props {
     step: TourStepDef;
     /** 0-based index of this step */
@@ -22,6 +25,12 @@ export interface Props {
     prevButtonProps?: ButtonOverrides;
     /** Override props for the next/finish button */
     nextButtonProps?: ButtonOverrides;
+    /** Custom icon for the prev button. Default: iconChevronLeft */
+    iconPrev?: IconFn;
+    /** Custom icon for the next button. Default: iconChevronRight */
+    iconNext?: IconFn;
+    /** Custom icon for the finish (last step) button. Default: iconCheck */
+    iconFinish?: IconFn;
 }
 declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
 type OnboardingShell = ReturnType<typeof OnboardingShell>;

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

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
 import type { SpotlightPosition } from "../spotlight/spotlight.svelte.js";
 import type { THC } from "../../components/Thc/Thc.svelte";
-import { type Props as ShellProps } from "./OnboardingShell.svelte";
+import { type Props as ShellProps, type IconFn } from "./OnboardingShell.svelte";
 /**
  * Definition of a single step in an onboarding tour.
  */
@@ -103,6 +103,12 @@ export interface TourOptions {
     prevButtonProps?: ShellProps["prevButtonProps"];
     /** Override props (variant, intent, size, roundedFull) for the next/finish button */
     nextButtonProps?: ShellProps["nextButtonProps"];
+    /** Custom icon for the prev button */
+    iconPrev?: IconFn;
+    /** Custom icon for the next button */
+    iconNext?: IconFn;
+    /** Custom icon for the finish (last step) button */
+    iconFinish?: IconFn;
 }
 /**
  * Creates a multi-step onboarding tour on top of the spotlight primitive.

package/dist/actions/onboarding/onboarding.svelte.js

@@ -102,6 +102,9 @@ export function createTour(options) {
                 showSteps: options.showSteps ?? true,
                 prevButtonProps: options.prevButtonProps,
                 nextButtonProps: options.nextButtonProps,
+                iconPrev: options.iconPrev,
+                iconNext: options.iconNext,
+                iconFinish: options.iconFinish,
                 next,
                 prev,
                 skip,

package/package.json

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