@marianmeres/stuic 2.11.4 → 2.12.0

package/dist/components/Input/FieldAssets.svelte

@@ -38,7 +38,7 @@
 	import Circle from "../Circle/Circle.svelte";
 	import { Modal } from "../Modal/index.js";
 	import { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
-	import SpinnerCircle from "../Spinner/SpinnerCircle.svelte";
+	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import { X } from "../X/index.js";
 	import InputWrap from "./_internal/InputWrap.svelte";
@@ -377,7 +377,7 @@
 {#snippet default_render()}
 	{#if isLoading}
 		<div class="p-2 pl-8 flex items-center justify-center min-h-24">
-			<SpinnerCircle />
+			<SpinnerCircleOscillate />
 		</div>
 	{:else}
 		<div class={["p-2 flex items-center gap-0.5 flex-wrap"]}>
@@ -427,7 +427,7 @@
 										rotate={-90}
 									/>
 								{:else}
-									<SpinnerCircle bgStrokeColor="gray" />
+									<SpinnerCircleOscillate bgStrokeColor="gray" />
 								{/if}
 							</span>
 						{/if}

package/dist/components/Input/FieldOptions.svelte

@@ -657,7 +657,7 @@
 					<div
 						class={[
 							"options overflow-y-auto overflow-x-hidden space-y-1 scrollbar-thin",
-							"h-[220px] max-h-[220px]",
+							"h-55 max-h-55",
 						]}
 						bind:this={optionsBox}
 						tabindex="-1"

package/dist/components/Spinner/Spinner.svelte

@@ -1,136 +1,85 @@
 <script lang="ts" module>
 	export interface Props {
 		class?: string;
-		/** One "loop" duration in ms */
-		duration?: number;
-		/** Number of "hands" (3-12) */
 		count?: number;
-		thickness?: "normal" | "thin" | "thick";
-		height?: "normal" | "tall" | "short";
+		thickness?: "thin" | "normal" | "thick";
+		height?: "short" | "normal" | "tall";
 		direction?: "cw" | "ccw";
+		rounded?: number;
+		duration?: number;
 	}
 </script>
 
 <script lang="ts">
-	import { twMerge } from "../../utils/tw-merge.js";
-
-	// this is quite verbose, but very straight forward implementation,
-	// and always rendered without any issues (opposed to linear-gradient hackish stuff)
-
 	let {
-		class: _class,
-		duration = 750,
+		class: classProp,
 		count = 8,
-		thickness = "thick",
+		thickness = "normal",
 		height = "normal",
 		direction = "cw",
+		rounded = 2,
+		duration = 750,
 	}: Props = $props();
 
-	let _count = $derived(Math.max(3, Math.min(12, count)));
+	const thicknessMap: Record<NonNullable<Props["thickness"]>, number> = {
+		thin: 1,
+		normal: 2,
+		thick: 4,
+	};
+	const heightMap: Record<NonNullable<Props["height"]>, number> = {
+		short: 5,
+		normal: 7,
+		tall: 10,
+	};
 
-	let _segments = $derived.by(() => {
-		let out = [];
-		for (let i = 0; i < _count; i++) {
-			out.push({
-				rotate: (360 / _count) * i,
-				delay:
-					(direction === "ccw" ? 1 : -1) * (duration - (duration / _count) * (i + 1)),
-				duration,
-			});
-		}
-		return out;
-	});
-
-	let _thickness = $derived(
-		"thickness-" +
-			(["normal", "thin", "thick"].includes(thickness) ? thickness : "normal")
-	);
-
-	let _height = $derived(
-		"height-" + (["normal", "tall", "short"].includes(height) ? height : "normal")
-	);
+	const barLength = $derived(heightMap[height]);
+	const barWidth = $derived(thicknessMap[thickness]);
+	const size = $derived(barLength * 3);
+	const center = $derived(size / 2);
+	const barHeight = $derived(barLength - 1);
 </script>
 
-<div class="spinner {_thickness} {_height} {twMerge('inline-block w-5', _class)}">
-	{#each _segments as s}
-		<div
-			style={[
-				`transform: rotate(${s.rotate}deg);`,
-				`animation-delay: ${s.delay}ms;`,
-				`animation-duration: ${s.duration}ms;`,
-			].join("")}
-		></div>
+<div
+	class="spinner {classProp ?? ''}"
+	style:--size="{size}px"
+	style:--duration="{duration}ms"
+>
+	{#each Array(count) as _, i}
+		{@const angle = (360 / count) * i}
+		{@const delay = direction === "ccw" ? i / count : (count - i) / count}
+		<span
+			class="bar"
+			style:width="{barWidth}px"
+			style:height="{barHeight}px"
+			style:border-radius="{rounded}px"
+			style:transform-origin="center {center}px"
+			style:transform="translateX(-50%) rotate({angle}deg)"
+			style:animation-delay="{-delay * duration}ms"
+		></span>
 	{/each}
 </div>
 
 <style>
-	.spinner,
-	.spinner div,
-	.spinner div:after {
-		box-sizing: border-box;
-	}
-
 	.spinner {
-		/* display: inline-block; */
 		position: relative;
-		aspect-ratio: 1/1;
-		pointer-events: none;
+		width: var(--size);
+		height: var(--size);
 	}
 
-	.spinner div {
-		width: 100%;
-		height: 100%;
+	.bar {
 		position: absolute;
-		inset: 0;
-		/* animation: spinner 1.2s linear infinite; */
-		animation-name: spinner;
-		animation-timing-function: linear;
-		animation-iteration-count: infinite;
-	}
-
-	.spinner div:after {
-		content: " ";
-		display: block;
-		position: absolute;
-
-		top: 0;
-		/* left: 46%;
-		width: 8%; 
-		height: 27%; */
-		border-radius: 35%;
+		left: 50%;
+		top: 0px;
 		background: currentColor;
-	}
-	/* thickness */
-	.spinner.thickness-thin div:after {
-		left: 47.5%;
-		width: 5%;
-	}
-	.spinner.thickness-normal div:after {
-		left: 46%;
-		width: 8%;
-	}
-	.spinner.thickness-thick div:after {
-		left: 44.5%;
-		width: 11%;
-	}
-
-	/* height */
-	.spinner.height-short div:after {
-		height: 21%;
-	}
-	.spinner.height-normal div:after {
-		height: 27%;
-	}
-	.spinner.height-tall div:after {
-		height: 33%;
+		animation: fade var(--duration) linear infinite;
 	}
 
-	@keyframes spinner {
-		0% {
+	@keyframes fade {
+		from {
 			opacity: 1;
 		}
-		100% {
-			opacity: 0;
+		to {
+			opacity: 0.12;
 		}
 	}
 </style>

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

@@ -1,12 +1,11 @@
 export interface Props {
     class?: string;
-    /** One "loop" duration in ms */
-    duration?: number;
-    /** Number of "hands" (3-12) */
     count?: number;
-    thickness?: "normal" | "thin" | "thick";
-    height?: "normal" | "tall" | "short";
+    thickness?: "thin" | "normal" | "thick";
+    height?: "short" | "normal" | "tall";
     direction?: "cw" | "ccw";
+    rounded?: number;
+    duration?: number;
 }
 declare const Spinner: import("svelte").Component<Props, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;

package/dist/components/Spinner/SpinnerCircle.svelte

@@ -1,47 +1,62 @@
 <script lang="ts" module>
 	export interface Props {
 		class?: string;
-		bgStrokeColor?: string;
-		strokeWidth?: number;
-		noOscillate?: boolean;
-		rotateDuration?: string;
+		/** One "loop" duration in ms */
+		duration?: number;
+		/** Border thickness preset */
+		thickness?: "normal" | "thin" | "thick";
+		/** Rotation direction */
+		direction?: "cw" | "ccw";
 	}
 </script>
 
 <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)",
-		strokeWidth,
-		noOscillate,
-		rotateDuration = ".75s",
+		class: classProp,
+		duration = 750,
+		thickness = "normal",
+		direction = "cw",
 	}: Props = $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
-	 */
+	let _thickness = $derived(
+		"thickness-" +
+			(["normal", "thin", "thick"].includes(thickness) ? thickness : "normal")
+	);
+</script>
 
-	const ticker = createTickerRAF(50, true);
-	let completeness = $derived(noOscillate ? 0.66 : oscillate($ticker / 1000, 0.15, 0.85));
+<span
+	class={twMerge("stuic-spinner-basic inline-block size-5", _thickness, classProp)}
+	style="animation-duration: {duration}ms; animation-direction: {direction === 'ccw'
+		? 'reverse'
+		: 'normal'};"
+></span>
 
-	onDestroy(ticker.stop);
-</script>
+<style>
+	.stuic-spinner-basic {
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-style: solid;
+		border-color: currentColor;
+		border-top-color: transparent;
+		animation: spin linear infinite;
+	}
+
+	/* Thickness presets */
+	.stuic-spinner-basic.thickness-thin {
+		border-width: 1px;
+	}
+	.stuic-spinner-basic.thickness-normal {
+		border-width: 2px;
+	}
+	.stuic-spinner-basic.thickness-thick {
+		border-width: 4px;
+	}
 
-<Circle
-	animateCompletenessMs={0}
-	{completeness}
-	class={twMerge("stuic-spinner-circle animate-spin", classProp)}
-	{bgStrokeColor}
-	{strokeWidth}
-	style="animation-duration: {rotateDuration}"
-/>
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

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

@@ -1,9 +1,11 @@
 export interface Props {
     class?: string;
-    bgStrokeColor?: string;
-    strokeWidth?: number;
-    noOscillate?: boolean;
-    rotateDuration?: string;
+    /** One "loop" duration in ms */
+    duration?: number;
+    /** Border thickness preset */
+    thickness?: "normal" | "thin" | "thick";
+    /** Rotation direction */
+    direction?: "cw" | "ccw";
 }
 declare const SpinnerCircle: import("svelte").Component<Props, {}, "">;
 type SpinnerCircle = ReturnType<typeof SpinnerCircle>;

package/dist/components/Spinner/SpinnerCircleOscillate.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	export interface Props {
+		class?: string;
+		bgStrokeColor?: string;
+		strokeWidth?: number;
+		noOscillate?: boolean;
+		rotateDuration?: string;
+	}
+</script>
+
+<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)",
+		strokeWidth,
+		noOscillate,
+		rotateDuration = ".75s",
+	}: Props = $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));
+
+	onDestroy(ticker.stop);
+</script>
+
+<Circle
+	animateCompletenessMs={0}
+	{completeness}
+	class={twMerge("stuic-spinner-circle animate-spin", classProp)}
+	{bgStrokeColor}
+	{strokeWidth}
+	style="animation-duration: {rotateDuration}"
+/>

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

@@ -0,0 +1,10 @@
+export interface Props {
+    class?: string;
+    bgStrokeColor?: string;
+    strokeWidth?: number;
+    noOscillate?: boolean;
+    rotateDuration?: string;
+}
+declare const SpinnerCircleOscillate: import("svelte").Component<Props, {}, "">;
+type SpinnerCircleOscillate = ReturnType<typeof SpinnerCircleOscillate>;
+export default SpinnerCircleOscillate;

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

@@ -1,3 +1,4 @@
 export { default as Spinner, type Props as SpinnerProps } from "./Spinner.svelte";
 export { default as SpinnerCircle, type Props as SpinnerCircleProps, } from "./SpinnerCircle.svelte";
+export { default as SpinnerCircleOscillate, type Props as SpinnerCircleOscillateProps, } from "./SpinnerCircleOscillate.svelte";
 export { spinnerCreateBackAndForthCharFrames, default as SpinnerUnicode, type Props as SpinnerUnicodeProps, type SpinnerUnicodeVariant, } from "./SpinnerUnicode.svelte";

package/dist/components/Spinner/index.js

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

package/package.json

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