@marianmeres/stuic 3.60.0 → 3.62.0

package/dist/actions/onboarding/OnboardingShell.svelte

@@ -1,6 +1,12 @@
 <script lang="ts" module>
 	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" | "class"
+	>;
 
 	export interface Props {
 		step: TourStepDef;
@@ -19,6 +25,10 @@
 		classControls?: string;
 		/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
 		showSteps?: boolean;
+		/** Override props for the prev button */
+		prevButtonProps?: ButtonOverrides;
+		/** Override props for the next/finish button */
+		nextButtonProps?: ButtonOverrides;
 	}
 </script>
 
@@ -27,6 +37,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,
@@ -41,6 +52,8 @@
 		skip,
 		classControls,
 		showSteps = true,
+		prevButtonProps,
+		nextButtonProps,
 	}: Props = $props();
 
 	const context: TourShellContext = $derived({
@@ -96,19 +109,26 @@
 				{#if !isFirst}
 					<Button
 						onclick={prev}
-						class={twMerge(BUTTON_CLS, classControls)}
+						class={twMerge(BUTTON_CLS, classControls, prevButtonProps?.class)}
 						{...BUTTON_PROPS}
+						{...omit(prevButtonProps ?? {}, "class")}
 					>
 						{@html iconChevronLeft({ 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"
+					{...omit(nextButtonProps ?? {}, "class")}
 				>
 					{@html isLast
 						? iconCheck({ size: ICON_SIZE })

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

@@ -1,5 +1,7 @@
 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" | "class">;
 export interface Props {
     step: TourStepDef;
     /** 0-based index of this step */
@@ -16,6 +18,10 @@ export interface Props {
     classControls?: string;
     /** Whether to show the step counter (e.g. "1 / 3"). Default: true */
     showSteps?: boolean;
+    /** Override props for the prev button */
+    prevButtonProps?: ButtonOverrides;
+    /** Override props for the next/finish button */
+    nextButtonProps?: ButtonOverrides;
 }
 declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
 type OnboardingShell = ReturnType<typeof OnboardingShell>;

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

@@ -1,6 +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";
 /**
  * Definition of a single step in an onboarding tour.
  */
@@ -98,6 +99,10 @@ export interface TourOptions {
     totalSteps?: number;
     /** Whether to show the step counter (e.g. "1 / 3") in the default shell. Default: true */
     showSteps?: boolean;
+    /** Override props (variant, intent, size, roundedFull) for the prev button */
+    prevButtonProps?: ShellProps["prevButtonProps"];
+    /** Override props (variant, intent, size, roundedFull) for the next/finish button */
+    nextButtonProps?: ShellProps["nextButtonProps"];
 }
 /**
  * Creates a multi-step onboarding tour on top of the spotlight primitive.

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

@@ -1,5 +1,5 @@
 import { spotlight } from "../spotlight/spotlight.svelte.js";
-import OnboardingShell from "./OnboardingShell.svelte";
+import OnboardingShell, {} from "./OnboardingShell.svelte";
 import { StorageAbstraction } from "../../utils/storage-abstraction.js";
 /**
  * Creates a multi-step onboarding tour on top of the spotlight primitive.
@@ -100,6 +100,8 @@ export function createTour(options) {
                 labels: resolvedLabels,
                 shell: options.shell,
                 showSteps: options.showSteps ?? true,
+                prevButtonProps: options.prevButtonProps,
+                nextButtonProps: options.nextButtonProps,
                 next,
                 prev,
                 skip,

package/package.json

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