@marianmeres/stuic 2.1.19 → 2.1.21

package/dist/components/Circle/Circle.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { svgCircle, type SvgCircleOptions } from "../../utils/svg-circle.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	let {
+		strokeWidth = 10,
+		completeness = 1,
+		bgStrokeColor,
+		class: classProp = "",
+		roundedEdges = true,
+		rotate = 0,
+		strokeWidthRatio = 0,
+		style,
+	}: Partial<SvgCircleOptions> & { style?: string } = $props();
+
+	let container: HTMLDivElement = $state()!;
+
+	const circle = svgCircle({
+		strokeWidth,
+		completeness,
+		bgStrokeColor,
+		roundedEdges,
+		rotate,
+		strokeWidthRatio,
+	});
+
+	$effect(() => {
+		container.appendChild(circle.svg);
+	});
+
+	$effect(() => {
+		circle.setCompleteness(completeness);
+	});
+
+	$effect(() => {
+		circle.setRotate(rotate);
+	});
+</script>
+
+<div bind:this={container} class={twMerge("size-6", classProp)} {style}></div>

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

@@ -0,0 +1,7 @@
+import { type SvgCircleOptions } from "../../utils/svg-circle.js";
+type $$ComponentProps = Partial<SvgCircleOptions> & {
+    style?: string;
+};
+declare const Circle: import("svelte").Component<$$ComponentProps, {}, "">;
+type Circle = ReturnType<typeof Circle>;
+export default Circle;

package/dist/components/Spinner/SpinnerCircle.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { createTickerRAF } from "@marianmeres/ticker";
+	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();
+
+	/**
+	 * 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(oscillate($ticker / 1000, 0.15, 0.85));
+
+	onDestroy(ticker.stop);
+</script>
+
+<Circle
+	{completeness}
+	class={twMerge("stuic-spinner-circle animate-spin", classProp)}
+	{bgStrokeColor}
+	style="animation-duration: .75s"
+/>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+    bgStrokeColor?: string;
+};
+declare const SpinnerCircle: import("svelte").Component<$$ComponentProps, {}, "">;
+type SpinnerCircle = ReturnType<typeof SpinnerCircle>;
+export default 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/index.d.ts

@@ -14,6 +14,7 @@ export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
 export * from "./nl2br.js";
 export * from "./omit-pick.js";
+export * from "./oscillate.js";
 export * from "./paint.js";
 export * from "./persistent-state.svelte.js";
 export * from "./prefers-reduced-motion.svelte.js";
@@ -23,6 +24,7 @@ export * from "./seconds.js";
 export * from "./sleep.js";
 export * from "./storage-abstraction.js";
 export * from "./str-hash.js";
+export * from "./svg-circle.js";
 export * from "./switch.svelte.js";
 export * from "./throttle.js";
 export * from "./tr.js";

package/dist/utils/index.js

@@ -14,6 +14,7 @@ export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
 export * from "./nl2br.js";
 export * from "./omit-pick.js";
+export * from "./oscillate.js";
 export * from "./paint.js";
 export * from "./persistent-state.svelte.js";
 export * from "./prefers-reduced-motion.svelte.js";
@@ -23,6 +24,7 @@ export * from "./seconds.js";
 export * from "./sleep.js";
 export * from "./storage-abstraction.js";
 export * from "./str-hash.js";
+export * from "./svg-circle.js";
 export * from "./switch.svelte.js";
 export * from "./throttle.js";
 export * from "./tr.js";

package/dist/utils/oscillate.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns an oscillating value (sine wave) between a min and max.
+ */
+export declare function oscillate(time: number, min?: number, max?: number, speed?: number): number;

package/dist/utils/oscillate.js

@@ -0,0 +1,17 @@
+/**
+ * Returns an oscillating value (sine wave) between a min and max.
+ */
+export function oscillate(time, min = 0, max = 1, speed = 1) {
+    // Calculate the midpoint (the center of the oscillation)
+    // e.g., if min=10, max=50, midpoint is (50+10)/2 = 30
+    const midpoint = (max + min) / 2;
+    // Calculate the amplitude (half the distance between min and max)
+    // e.g., if min=10, max=50, amplitude is (50-10)/2 = 20
+    const amplitude = (max - min) / 2;
+    // Calculate the oscillation
+    // 1. Math.sin(time * speed) gives a value between -1 and 1
+    // 2. Multiplying by amplitude scales it to [-amplitude, amplitude] (e.g., [-20, 20])
+    // 3. Adding midpoint shifts the range to [midpoint - amplitude, midpoint + amplitude]
+    //    (e.g., [30 - 20, 30 + 20] which is [10, 50])
+    return midpoint + Math.sin(time * speed) * amplitude;
+}

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

@@ -0,0 +1,16 @@
+export interface SvgCircleOptions {
+    radius: number;
+    strokeWidth: number;
+    completeness: number;
+    class: string;
+    bgStrokeColor: string;
+    roundedEdges: boolean;
+    rotate: number;
+    strokeWidthRatio: number;
+}
+/** 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;
+    setRotate(rotate: number): void;
+};

package/dist/utils/svg-circle.js

@@ -0,0 +1,76 @@
+function _normalize_completness(v) {
+    return Math.max(0, Math.min(1, v));
+}
+function _normalize_rotate(v) {
+    return v % 360;
+}
+function _normalize_cls(v) {
+    return [
+        ...new Set(v
+            .split(" ")
+            .map((v) => v.trim())
+            .filter(Boolean)),
+    ];
+}
+/** 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);
+    // calculate radius based on viewBox, leaving room for stroke
+    let actualStrokeWidth = strokeWidth;
+    if (strokeWidthRatio) {
+        const maxStrokeWidth = strokeWidthRatio * 50; // percentage of radius
+        actualStrokeWidth = Math.min(strokeWidth, maxStrokeWidth);
+    }
+    const radius = 50 - actualStrokeWidth / 2;
+    const center = 50;
+    const circumference = 2 * Math.PI * radius;
+    const dashArray = circumference;
+    const dashOffset = circumference * (1 - completeness);
+    const linecap = roundedEdges ? "round" : "butt";
+    // the svg element
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("width", "100%");
+    svg.setAttribute("height", "100%");
+    svg.setAttribute("viewBox", "0 0 100 100");
+    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    if (classProp)
+        svg.classList.add(..._normalize_cls(classProp));
+    // optional background
+    if (bgStrokeColor) {
+        const bgCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        bgCircle.setAttribute("cx", `${center}`);
+        bgCircle.setAttribute("cy", `${center}`);
+        bgCircle.setAttribute("r", `${radius}`);
+        bgCircle.setAttribute("fill", "none");
+        bgCircle.setAttribute("stroke", bgStrokeColor);
+        bgCircle.setAttribute("stroke-width", `${actualStrokeWidth}`);
+        svg.appendChild(bgCircle);
+    }
+    // the circle
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute("cx", `${center}`);
+    circle.setAttribute("cy", `${center}`);
+    circle.setAttribute("r", `${radius}`);
+    circle.setAttribute("fill", "none");
+    circle.setAttribute("stroke", "currentColor");
+    circle.setAttribute("stroke-width", `${actualStrokeWidth}`);
+    circle.setAttribute("stroke-dasharray", `${dashArray}`);
+    circle.setAttribute("stroke-dashoffset", `${dashOffset}`);
+    circle.setAttribute("stroke-linecap", linecap);
+    circle.setAttribute("transform-origin", "center");
+    circle.setAttribute("transform", `rotate(${_normalize_rotate(rotate)})`);
+    //
+    svg.appendChild(circle);
+    return {
+        svg,
+        setCompleteness(completeness) {
+            completeness = _normalize_completness(completeness);
+            const dashOffset = circumference * (1 - completeness);
+            circle.setAttribute("stroke-dashoffset", `${dashOffset}`);
+        },
+        setRotate(rotate) {
+            circle.setAttribute("transform", `rotate(${_normalize_rotate(rotate)})`);
+        },
+    };
+}

package/package.json

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