@marianmeres/stuic 2.1.20 → 2.1.22

package/dist/components/Circle/Circle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import { svgCircle, type SvgCircleOptions } from "../../utils/svg-circle.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 

package/dist/components/Spinner/SpinnerCircle.svelte

@@ -1,17 +1,42 @@
 <script lang="ts">
 	import { createTickerRAF } from "@marianmeres/ticker";
-	import Circle from "../Circle/Circle.svelte";
+	import { onDestroy } from "svelte";
 	import { oscillate } from "../../utils/oscillate.js";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import Circle from "../Circle/Circle.svelte";
 
 	let {
 		class: classProp = "",
 		bgStrokeColor = "rgba(0 0 0 / .1)",
-	}: { class?: string; bgStrokeColor?: string } = $props();
+		strokeWidth,
+		noOscillate,
+		rotateDuration = ".75s",
+	}: {
+		class?: string;
+		bgStrokeColor?: string;
+		strokeWidth?: number;
+		noOscillate?: boolean;
+		rotateDuration?: string;
+	} = $props();
+
+	/**
+	 * NOTE: we happen to have 4 distinct values here which effect the overall look and feel...
+	 *  1. the tick frequency
+	 *  2. the oscillation time input (seconds)
+	 *  3. the oscillation speed factor (1)
+	 *  4. the animation-spin duration
+	 */
 
 	const ticker = createTickerRAF(50, true);
+	let completeness = $derived(noOscillate ? 0.66 : oscillate($ticker / 1000, 0.15, 0.85));
 
-	let completeness = $derived(oscillate($ticker / 1000, 0.15, 0.85, 1));
+	onDestroy(ticker.stop);
 </script>
 
-<Circle {completeness} class={twMerge("animate-spin", classProp)} {bgStrokeColor} />
+<Circle
+	{completeness}
+	class={twMerge("stuic-spinner-circle animate-spin", classProp)}
+	{bgStrokeColor}
+	{strokeWidth}
+	style="animation-duration: {rotateDuration}"
+/>

package/dist/components/Spinner/SpinnerCircle.svelte.d.ts

@@ -1,6 +1,9 @@
 type $$ComponentProps = {
     class?: string;
     bgStrokeColor?: string;
+    strokeWidth?: number;
+    noOscillate?: boolean;
+    rotateDuration?: string;
 };
 declare const SpinnerCircle: import("svelte").Component<$$ComponentProps, {}, "">;
 type SpinnerCircle = ReturnType<typeof SpinnerCircle>;

package/dist/components/Spinner/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Spinner } from "./Spinner.svelte";
-export { default as SpinnerUnicode, spinnerCreateBackAndForthCharFrames, type SpinnerUnicodeVariant, } from "./SpinnerUnicode.svelte";
+export { default as SpinnerCircle } from "./SpinnerCircle.svelte";
+export { spinnerCreateBackAndForthCharFrames, default as SpinnerUnicode, type SpinnerUnicodeVariant, } from "./SpinnerUnicode.svelte";

package/dist/components/Spinner/index.js

@@ -1,2 +1,3 @@
 export { default as Spinner } from "./Spinner.svelte";
-export { default as SpinnerUnicode, spinnerCreateBackAndForthCharFrames, } from "./SpinnerUnicode.svelte";
+export { default as SpinnerCircle } from "./SpinnerCircle.svelte";
+export { spinnerCreateBackAndForthCharFrames, default as SpinnerUnicode, } from "./SpinnerUnicode.svelte";

package/dist/utils/svg-circle.d.ts

@@ -8,7 +8,7 @@ export interface SvgCircleOptions {
     rotate: number;
     strokeWidthRatio: number;
 }
-/** Will construct and return svg DOM element based on input options */
+/** Will construct and return svg circle DOM element based on input options */
 export declare function svgCircle(options?: Partial<SvgCircleOptions>): {
     svg: SVGSVGElement;
     setCompleteness(completeness: number): void;

package/dist/utils/svg-circle.js

@@ -2,7 +2,7 @@ function _normalize_completness(v) {
     return Math.max(0, Math.min(1, v));
 }
 function _normalize_rotate(v) {
-    return `${v % 360}`;
+    return v % 360;
 }
 function _normalize_cls(v) {
     return [
@@ -12,7 +12,7 @@ function _normalize_cls(v) {
             .filter(Boolean)),
     ];
 }
-/** Will construct and return svg DOM element based on input options */
+/** Will construct and return svg circle DOM element based on input options */
 export function svgCircle(options = {}) {
     let { strokeWidth = 10, completeness = 1, bgStrokeColor = "", class: classProp = "", roundedEdges = true, rotate = 0, strokeWidthRatio = 0, } = options ?? {};
     completeness = _normalize_completness(completeness);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.20",
+	"version": "2.1.22",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",