@marianmeres/stuic 1.124.0 → 1.125.0

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { HTMLButtonAttributes } from 'svelte/elements';
 export declare class ButtonConfig {
     static defaultSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     static defaultShadow: boolean;
@@ -43,14 +42,14 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         href?: string | undefined;
-        type?: HTMLButtonAttributes["type"];
+        type?: "reset" | "submit" | "button" | null | undefined;
         shadow?: boolean | undefined;
-        rounded?: (boolean | "full") | undefined;
-        variant?: string | undefined;
+        rounded?: boolean | "full" | undefined;
+        variant?: string | undefined | undefined;
         square?: boolean | undefined;
         disabled?: boolean | undefined;
-        value?: string | undefined;
-        size?: ("xs" | "sm" | "md" | "lg" | "xl") | undefined;
+        value?: string | undefined | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };
     events: {
         focus: FocusEvent;

package/dist/components/Input/Field.svelte.d.ts

@@ -30,7 +30,7 @@ declare const __propDef: {
         [x: string]: any;
         class?: FieldConfigClasses | undefined;
         classBySize?: FieldConfigClassesBySize | undefined;
-        size?: ("sm" | "md" | "lg") | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
         id?: string | undefined;
         value: string;
         label?: THC | undefined;
@@ -38,23 +38,23 @@ declare const __propDef: {
         name?: string | undefined;
         tabindex?: number | undefined;
         description?: THC | undefined;
-        autofocus?: true | undefined;
+        autofocus?: true | undefined | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
-        placeholder?: string | undefined;
-        autocomplete?: string | undefined;
-        minlength?: number | undefined;
-        maxlength?: number | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        pattern?: string | undefined;
-        step?: number | undefined;
+        placeholder?: string | undefined | undefined;
+        autocomplete?: string | undefined | undefined;
+        minlength?: number | undefined | undefined;
+        maxlength?: number | undefined | undefined;
+        min?: number | undefined | undefined;
+        max?: number | undefined | undefined;
+        pattern?: string | undefined | undefined;
+        step?: number | undefined | undefined;
         useTrim?: boolean | undefined;
         textareaAutoEnlarge?: boolean | undefined;
         labelLeft?: boolean | undefined;
-        labelLeftWidth?: ("normal" | "wide") | undefined;
-        validate?: ValidateOptions | true | undefined;
+        labelLeftWidth?: "normal" | "wide" | undefined;
+        validate?: true | ValidateOptions | undefined;
         showAsterixOnRequired?: boolean | undefined;
     };
     events: {

package/dist/components/Input/PinInput.svelte.d.ts

@@ -10,12 +10,12 @@ declare const __propDef: {
         inputClass: string;
         placeholder: string | undefined;
         length?: number | undefined;
-        pattern?: string | undefined;
-        autofocus?: true | undefined;
+        pattern?: string | undefined | undefined;
+        autofocus?: true | undefined | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
-        validate?: ValidateOptions | true | undefined;
+        validate?: true | ValidateOptions | undefined;
         setValidationResult: any;
         masked?: boolean | undefined;
         showX?: boolean | undefined;

package/dist/components/Spinner/Spinner.svelte

@@ -0,0 +1,115 @@
+<script>import { twMerge2 } from "../../utils/tw-merge2.js";
+let _class = "";
+export { _class as class };
+export let duration = 1e3;
+export let count = 8;
+export let thickness = "normal";
+export let height = "normal";
+export let direction = "cw";
+$:
+  _count = Math.max(3, Math.min(12, count));
+let _id = 0;
+const _calcSegs = (_c, _d) => {
+  const id = _id++;
+  let out = [];
+  for (let i = 0; i < _c; i++) {
+    out.push({
+      id: `${id}_${i}`,
+      rotate: 360 / _c * i,
+      delay: (direction === "ccw" ? 1 : -1) * (_d - _d / _c * (i + 1)),
+      duration: _d
+    });
+  }
+  return out;
+};
+$:
+  _segments = _calcSegs(_count, duration);
+$:
+  _thickness = "thickness-" + (["normal", "thin", "thick"].includes(thickness) ? thickness : "normal");
+$:
+  _height = "height-" + (["normal", "tall", "short"].includes(height) ? height : "normal");
+</script>
+
+<div class="spinner {_thickness} {_height} {twMerge2('inline-block w-5', _class)}">
+	{#each _segments as s (s.id)}
+		<div
+			style={[
+				`transform:rotate(${s.rotate}deg);`,
+				`animation-delay:${s.delay}ms;`,
+				`animation-duration:${s.duration}ms;`,
+			].join('')}
+		></div>
+	{/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;
+	}
+
+	.spinner div {
+		width: 100%;
+		height: 100%;
+		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%;
+		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%;
+	}
+
+	@keyframes spinner {
+		0% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        duration?: number;
+        count?: number;
+        thickness?: "normal" | "thin" | "thick";
+        height?: "normal" | "tall" | "short";
+        direction?: "cw" | "ccw";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
+export {};

package/dist/components/Spinner/Spinner.v5.svelte

@@ -0,0 +1,114 @@
+<script>import { twMerge2 } from "@marianmeres/stuic";
+let {
+  class: _class,
+  duration = 1e3,
+  // one "loop" duration (in ms)
+  count = 8,
+  // "hands" count
+  thickness = "normal",
+  height = "normal",
+  direction = "cw"
+} = $props();
+let _count = $derived(Math.max(3, Math.min(12, count)));
+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")
+);
+</script>
+
+<div class="spinner {_thickness} {_height} {twMerge2('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>
+	{/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;
+	}
+
+	.spinner div {
+		width: 100%;
+		height: 100%;
+		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%;
+		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%;
+	}
+
+	@keyframes spinner {
+		0% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
+export {};

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;
-        strokeWidth?: 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
+        strokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as ModalDialog, type ModalDialogAPI, } from './components/Modal
 export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, type NotificationKnownClasses, } from './components/Notifications/notifications.js';
 export { default as Notifications, NotificationsConfig, type NOTIFICATIONS_POSX, type NOTIFICATIONS_POSY, } from './components/Notifications/Notifications.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
 export { default as Switch, SwitchConfig, type SwitchPreHook, } from './components/Switch/Switch.svelte';
 export { default as Thc, type THC, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 export { default as X } from './components/X/X.svelte';

package/dist/index.js

@@ -31,6 +31,8 @@ export { default as Notifications, NotificationsConfig, } from './components/Not
 //
 export { default as Popover } from './components/Popover/Popover.svelte';
 //
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
+//
 export { default as Switch, SwitchConfig, } from './components/Switch/Switch.svelte';
 export { default as Thc, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 //

package/dist/utils/tw-merge2.d.ts

@@ -1,2 +1,3 @@
-export declare const clsClean: (s: string | string[]) => string;
-export declare const twMerge2: (...args: any[]) => string;
+import { type ClassNameValue } from 'tailwind-merge';
+export declare const clsClean: (s: ClassNameValue) => string;
+export declare const twMerge2: (...args: ClassNameValue[]) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.124.0",
+	"version": "1.125.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",