@salmexio/ui 0.1.0

package/dist/feedback/Spinner/Spinner.svelte

@@ -0,0 +1,421 @@
+<!--
+  @component Spinner
+
+  Win2K × Basquiat — Bold loading indicator.
+  Flat shadows, crown yellow / electric blue, geometric shapes. No soft gradients.
+  role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
+-->
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	type SpinnerVariant = 'primary' | 'secondary' | 'white';
+	type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
+
+	interface Props {
+		size?: SpinnerSize;
+		variant?: SpinnerVariant;
+		style?: SpinnerStyle;
+		label?: string;
+		showLabel?: boolean;
+		delay?: number;
+		overlay?: boolean;
+		class?: string;
+		id?: string;
+	}
+
+	let {
+		size = 'md',
+		variant = 'primary',
+		style = 'ring',
+		label = 'Loading...',
+		showLabel = false,
+		delay = 0,
+		overlay = false,
+		class: className = '',
+		id
+	}: Props = $props();
+
+	let isVisible = $state(false);
+
+	$effect(() => {
+		if (delay === 0) {
+			isVisible = true;
+			return;
+		}
+		isVisible = false;
+		const t = setTimeout(() => {
+			isVisible = true;
+		}, delay);
+		return () => clearTimeout(t);
+	});
+
+	const sizeConfig: Record<
+		SpinnerSize,
+		{ dimension: number; stroke: number; fontSize: string; dotSize: number }
+	> = {
+		xs: { dimension: 16, stroke: 2.5, fontSize: 'var(--salmex-font-size-xs)', dotSize: 4 },
+		sm: { dimension: 20, stroke: 3, fontSize: 'var(--salmex-font-size-sm)', dotSize: 5 },
+		md: { dimension: 28, stroke: 4, fontSize: 'var(--salmex-font-size-sm)', dotSize: 6 },
+		lg: { dimension: 40, stroke: 5, fontSize: 'var(--salmex-font-size-base)', dotSize: 8 },
+		xl: { dimension: 56, stroke: 6, fontSize: 'var(--salmex-font-size-md)', dotSize: 10 }
+	};
+
+	const config = $derived(sizeConfig[size]);
+</script>
+
+{#if isVisible}
+	<div
+		{id}
+		class={cn(
+			'salmex-spinner',
+			`salmex-spinner-${size}`,
+			`salmex-spinner-${variant}`,
+			`salmex-spinner-style-${style}`,
+			overlay && 'salmex-spinner-overlay',
+			className
+		)}
+		role="status"
+		aria-live="polite"
+		aria-busy="true"
+		aria-label={label}
+	>
+		<div class="salmex-spinner-content">
+			{#if style === 'ring'}
+				<svg
+					class="salmex-spinner-ring"
+					width={config.dimension}
+					height={config.dimension}
+					viewBox="0 0 32 32"
+					fill="none"
+					aria-hidden="true"
+				>
+					<!-- Track: full circle, bold stroke -->
+					<circle
+						class="salmex-spinner-track"
+						cx="16"
+						cy="16"
+						r="14"
+						stroke="currentColor"
+						stroke-width={config.stroke}
+					/>
+					<!-- Arc: one bold segment, round caps -->
+					<circle
+						class="salmex-spinner-arc"
+						cx="16"
+						cy="16"
+						r="14"
+						stroke="currentColor"
+						stroke-width={config.stroke}
+						stroke-linecap="round"
+						stroke-dasharray="22 66"
+					/>
+				</svg>
+			{/if}
+
+			{#if style === 'bars'}
+				<div
+					class="salmex-spinner-bars"
+					style="width: {config.dimension}px; height: {config.dimension}px;"
+					aria-hidden="true"
+				></div>
+			{/if}
+
+			{#if style === 'segment'}
+				<div
+					class="salmex-spinner-segment"
+					style="width: {config.dimension}px; height: {config.dimension}px;"
+					aria-hidden="true"
+				></div>
+			{/if}
+
+			{#if style === 'dots'}
+				<div
+					class="salmex-spinner-dots"
+					style="--dot-size: {config.dotSize}px; --spinner-dim: {config.dimension}px;"
+					aria-hidden="true"
+				>
+					<span class="salmex-spinner-dot salmex-spinner-dot-1"></span>
+					<span class="salmex-spinner-dot salmex-spinner-dot-2"></span>
+					<span class="salmex-spinner-dot salmex-spinner-dot-3"></span>
+				</div>
+			{/if}
+
+			{#if style === 'pulse'}
+				<div
+					class="salmex-spinner-pulse"
+					style="width: {config.dimension}px; height: {config.dimension}px;"
+					aria-hidden="true"
+				>
+					<span class="salmex-pulse-ring salmex-pulse-ring-1"></span>
+					<span class="salmex-pulse-ring salmex-pulse-ring-2"></span>
+					<span class="salmex-pulse-dot"></span>
+				</div>
+			{/if}
+
+			{#if showLabel}
+				<span class="salmex-spinner-label" style="font-size: {config.fontSize};">
+					{label}
+				</span>
+			{:else}
+				<span class="salmex-sr-only">{label}</span>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.salmex-spinner {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.salmex-spinner-content {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+	}
+
+	.salmex-spinner-label {
+		font-family: var(--salmex-font-system);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.3px;
+		color: rgb(var(--salmex-text-secondary));
+	}
+
+	.salmex-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.salmex-spinner-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgb(var(--salmex-chalk-white) / 0.9);
+		z-index: var(--salmex-z-modal-backdrop);
+		border-radius: inherit;
+		/* Flat, bold overlay edge - no blur */
+		box-shadow: inset 0 0 0 3px rgb(var(--salmex-border-default));
+	}
+
+	:global([data-theme='dark']) .salmex-spinner-overlay {
+		background: rgb(var(--salmex-midnight-black) / 0.9);
+		box-shadow: inset 0 0 0 3px rgb(var(--salmex-border-light));
+	}
+
+	/* Variants - crown yellow / electric blue, bold */
+	.salmex-spinner-primary {
+		color: rgb(var(--salmex-electric-blue));
+	}
+
+	:global([data-theme='dark']) .salmex-spinner-primary {
+		color: rgb(var(--salmex-crown-yellow));
+	}
+
+	.salmex-spinner-secondary {
+		color: rgb(var(--salmex-text-secondary));
+	}
+
+	.salmex-spinner-white {
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	/* ========== RING: bold stroke, one segment, round caps ========== */
+	.salmex-spinner-ring {
+		animation: salmex-spin 0.85s linear infinite;
+		filter: drop-shadow(var(--salmex-shadow-sm));
+	}
+
+	.salmex-spinner-track {
+		opacity: 0.25;
+	}
+
+	.salmex-spinner-arc {
+		transform-origin: center;
+	}
+
+	@keyframes salmex-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* ========== BARS: conic gradient, 12 segments, geometric ========== */
+	.salmex-spinner-bars {
+		border-radius: 50%;
+		background: repeating-conic-gradient(
+			currentColor 0deg 12deg,
+			transparent 12deg 30deg
+		);
+		animation: salmex-spin 0.9s linear infinite;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	/* ========== SEGMENT: one bold pie slice, high contrast ========== */
+	.salmex-spinner-segment {
+		border-radius: 50%;
+		background: conic-gradient(
+			from 0deg,
+			currentColor 0deg 100deg,
+			transparent 100deg 360deg
+		);
+		animation: salmex-spin 0.75s linear infinite;
+		box-shadow: var(--salmex-shadow-sm);
+	}
+
+	/* ========== DOTS: bold, flat shadow ========== */
+	.salmex-spinner-dots {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: calc(var(--dot-size) * 0.7);
+		height: var(--spinner-dim);
+	}
+
+	.salmex-spinner-dot {
+		width: var(--dot-size);
+		height: var(--dot-size);
+		border-radius: var(--salmex-radius-sm);
+		background: currentColor;
+		box-shadow: var(--salmex-shadow-sm);
+		animation: salmex-dot-bounce 1s ease-out infinite both;
+	}
+
+	.salmex-spinner-dot-1 {
+		animation-delay: -0.2s;
+	}
+
+	.salmex-spinner-dot-2 {
+		animation-delay: -0.1s;
+	}
+
+	@keyframes salmex-dot-bounce {
+		0%, 60%, 100% {
+			transform: scale(0.75);
+			opacity: 0.7;
+		}
+		30% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	/* ========== PULSE: bold ring + dot ========== */
+	.salmex-spinner-pulse {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.salmex-pulse-ring {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		border: 3px solid currentColor;
+		opacity: 0;
+		animation: salmex-pulse-ring 1.5s ease-out infinite;
+	}
+
+	.salmex-pulse-ring-2 {
+		animation-delay: 0.75s;
+	}
+
+	.salmex-pulse-dot {
+		width: 28%;
+		height: 28%;
+		border-radius: var(--salmex-radius-sm);
+		background: currentColor;
+		box-shadow: var(--salmex-shadow-sm);
+		animation: salmex-pulse-dot 1.5s ease-out infinite;
+	}
+
+	@keyframes salmex-pulse-ring {
+		0% {
+			transform: scale(0.4);
+			opacity: 0.9;
+		}
+		100% {
+			transform: scale(1.15);
+			opacity: 0;
+		}
+	}
+
+	@keyframes salmex-pulse-dot {
+		0%, 100% {
+			transform: scale(0.85);
+			opacity: 0.8;
+		}
+		50% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	/* ========== REDUCED MOTION ========== */
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-spinner-ring,
+		.salmex-spinner-bars,
+		.salmex-spinner-segment {
+			animation: none;
+		}
+
+		.salmex-spinner-ring {
+			filter: none;
+		}
+
+		.salmex-spinner-arc {
+			stroke-dasharray: 22 66;
+			opacity: 0.9;
+			transform: rotate(-90deg);
+		}
+
+		.salmex-spinner-bars,
+		.salmex-spinner-segment {
+			opacity: 0.85;
+		}
+
+		.salmex-spinner-dot {
+			animation: none;
+			opacity: 0.8;
+		}
+
+		.salmex-spinner-dot-1 {
+			opacity: 0.5;
+		}
+
+		.salmex-spinner-dot-2 {
+			opacity: 0.75;
+		}
+
+		.salmex-pulse-ring,
+		.salmex-pulse-dot {
+			animation: none;
+		}
+
+		.salmex-pulse-ring {
+			opacity: 0.25;
+			transform: scale(1);
+		}
+
+		.salmex-pulse-ring-2 {
+			display: none;
+		}
+
+		.salmex-pulse-dot {
+			opacity: 1;
+		}
+	}
+</style>

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

@@ -0,0 +1,25 @@
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerVariant = 'primary' | 'secondary' | 'white';
+type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
+interface Props {
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+    style?: SpinnerStyle;
+    label?: string;
+    showLabel?: boolean;
+    delay?: number;
+    overlay?: boolean;
+    class?: string;
+    id?: string;
+}
+/**
+ * Spinner
+ *
+ * Win2K × Basquiat — Bold loading indicator.
+ * Flat shadows, crown yellow / electric blue, geometric shapes. No soft gradients.
+ * role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
+ */
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

package/dist/feedback/Spinner/Spinner.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACxD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2GF;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/feedback/Spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';

package/dist/feedback/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert } from './Alert/index.js';
+export { Spinner } from './Spinner/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/feedback/index.js

@@ -0,0 +1,2 @@
+export { Alert } from './Alert/index.js';
+export { Spinner } from './Spinner/index.js';