@salmexio/ui 0.4.0 → 1.0.0

package/dist/feedback/Spinner/Spinner.svelte

@@ -1,16 +1,18 @@
 <!--
   @component Spinner
 
-  Win2K × Basquiat — Bold loading indicator.
-  Flat shadows, crown yellow / electric blue, geometric shapes. No soft gradients.
+  Neo-Brutalist Dark — Clean loading indicator.
+  Cyan accent, dark surfaces, geometric shapes.
   role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
+
+  Three styles: ring (default), dots (inline), pulse (radar/broadcast).
 -->
 <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';
+type SpinnerStyle = 'ring' | 'dots' | 'pulse';
 
 interface Props {
 	size?: SpinnerSize;
@@ -54,11 +56,11 @@ 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 }
+	xs: { dimension: 16, stroke: 2.5, fontSize: 'var(--sx-text-xs)', dotSize: 4 },
+	sm: { dimension: 20, stroke: 3, fontSize: 'var(--sx-text-sm)', dotSize: 5 },
+	md: { dimension: 28, stroke: 4, fontSize: 'var(--sx-text-sm)', dotSize: 6 },
+	lg: { dimension: 40, stroke: 5, fontSize: 'var(--sx-text-base)', dotSize: 8 },
+	xl: { dimension: 56, stroke: 6, fontSize: 'var(--sx-text-md)', dotSize: 10 }
 };
 
 const config = $derived(sizeConfig[size]);
@@ -68,11 +70,11 @@ const config = $derived(sizeConfig[size]);
 	<div
 		{id}
 		class={cn(
-			'salmex-spinner',
-			`salmex-spinner-${size}`,
-			`salmex-spinner-${variant}`,
-			`salmex-spinner-style-${style}`,
-			overlay && 'salmex-spinner-overlay',
+			'sx-spinner',
+			`sx-spinner-${size}`,
+			`sx-spinner-${variant}`,
+			`sx-spinner-style-${style}`,
+			overlay && 'sx-spinner-overlay',
 			className
 		)}
 		role="status"
@@ -80,28 +82,26 @@ const config = $derived(sizeConfig[size]);
 		aria-busy="true"
 		aria-label={label}
 	>
-		<div class="salmex-spinner-content">
+		<div class="sx-spinner-content">
 			{#if style === 'ring'}
 				<svg
-					class="salmex-spinner-ring"
+					class="sx-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"
+						class="sx-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"
+						class="sx-spinner-arc"
 						cx="16"
 						cy="16"
 						r="14"
@@ -111,80 +111,60 @@ const config = $derived(sizeConfig[size]);
 						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'}
+			{:else if style === 'pulse'}
 				<div
-					class="salmex-spinner-segment"
+					class="sx-spinner-pulse"
 					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>
+					<span class="sx-pulse-ring sx-pulse-ring-1"></span>
+					<span class="sx-pulse-ring sx-pulse-ring-2"></span>
+					<span class="sx-pulse-dot"></span>
 				</div>
-			{/if}
-
-			{#if style === 'pulse'}
+			{:else}
 				<div
-					class="salmex-spinner-pulse"
-					style="width: {config.dimension}px; height: {config.dimension}px;"
+					class="sx-spinner-dots"
+					style="--dot-size: {config.dotSize}px; --spinner-dim: {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>
+					<span class="sx-spinner-dot sx-spinner-dot-1"></span>
+					<span class="sx-spinner-dot sx-spinner-dot-2"></span>
+					<span class="sx-spinner-dot sx-spinner-dot-3"></span>
 				</div>
 			{/if}
 
 			{#if showLabel}
-				<span class="salmex-spinner-label" style="font-size: {config.fontSize};">
+				<span class="sx-spinner-label" style="font-size: {config.fontSize};">
 					{label}
 				</span>
 			{:else}
-				<span class="salmex-sr-only">{label}</span>
+				<span class="sx-sr-only">{label}</span>
 			{/if}
 		</div>
 	</div>
 {/if}
 
 <style>
-	.salmex-spinner {
+	.sx-spinner {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 	}
 
-	.salmex-spinner-content {
+	.sx-spinner-content {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--salmex-space-2);
+		gap: var(--sx-space-2);
 	}
 
-	.salmex-spinner-label {
-		font-family: var(--salmex-font-system);
-		font-weight: 700;
+	.sx-spinner-label {
+		font-family: var(--sx-font-body);
+		font-weight: 600;
 		letter-spacing: 0.3px;
-		color: rgb(var(--salmex-text-secondary));
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-sr-only {
+	.sx-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -196,86 +176,54 @@ const config = $derived(sizeConfig[size]);
 		border: 0;
 	}
 
-	.salmex-spinner-overlay {
+	.sx-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);
+		background: rgba(10, 10, 15, 0.7);
+		backdrop-filter: blur(4px);
+		-webkit-backdrop-filter: blur(4px);
+		z-index: var(--sx-z-modal-backdrop);
 		border-radius: inherit;
-		/* Flat, bold overlay edge - no blur */
-		box-shadow: inset 0 0 0 2px 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 2px rgb(var(--salmex-border-light));
 	}
 
-	/* Variants - crown yellow / electric blue, bold */
-	.salmex-spinner-primary {
-		color: rgb(var(--salmex-electric-blue));
+	/* Variants */
+	.sx-spinner-primary {
+		color: var(--sx-color-cyan);
 	}
 
-	:global([data-theme='dark']) .salmex-spinner-primary {
-		color: rgb(var(--salmex-crown-yellow));
+	.sx-spinner-secondary {
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-spinner-secondary {
-		color: rgb(var(--salmex-text-secondary));
+	.sx-spinner-white {
+		color: var(--sx-color-text);
 	}
 
-	.salmex-spinner-white {
-		color: rgb(var(--salmex-chalk-white));
+	/* ========== RING ========== */
+	.sx-spinner-ring {
+		animation: sx-spin 0.85s linear infinite;
 	}
 
-	/* ========== RING: bold stroke, one segment, round caps ========== */
-	.salmex-spinner-ring {
-		animation: salmex-spin 0.85s linear infinite;
-		filter: drop-shadow(var(--salmex-shadow-sm));
+	.sx-spinner-track {
+		opacity: 0.15;
+		stroke: var(--sx-color-surface-2);
 	}
 
-	.salmex-spinner-track {
-		opacity: 0.25;
-	}
-
-	.salmex-spinner-arc {
+	.sx-spinner-arc {
 		transform-origin: center;
 	}
 
-	@keyframes salmex-spin {
+	@keyframes sx-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 {
+	/* ========== DOTS ========== */
+	.sx-spinner-dots {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -283,24 +231,23 @@ const config = $derived(sizeConfig[size]);
 		height: var(--spinner-dim);
 	}
 
-	.salmex-spinner-dot {
+	.sx-spinner-dot {
 		width: var(--dot-size);
 		height: var(--dot-size);
 		border-radius: 50%;
 		background: currentColor;
-		box-shadow: var(--salmex-shadow-sm);
-		animation: salmex-dot-bounce 1s ease-out infinite both;
+		animation: sx-dot-bounce 1s ease-out infinite both;
 	}
 
-	.salmex-spinner-dot-1 {
+	.sx-spinner-dot-1 {
 		animation-delay: -0.2s;
 	}
 
-	.salmex-spinner-dot-2 {
+	.sx-spinner-dot-2 {
 		animation-delay: -0.1s;
 	}
 
-	@keyframes salmex-dot-bounce {
+	@keyframes sx-dot-bounce {
 		0%, 60%, 100% {
 			transform: scale(0.75);
 			opacity: 0.7;
@@ -311,37 +258,36 @@ const config = $derived(sizeConfig[size]);
 		}
 	}
 
-	/* ========== PULSE: bold ring + dot ========== */
-	.salmex-spinner-pulse {
+	/* ========== PULSE ========== */
+	.sx-spinner-pulse {
 		position: relative;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
-	.salmex-pulse-ring {
+	.sx-pulse-ring {
 		position: absolute;
 		inset: 0;
 		border-radius: 50%;
 		border: 3px solid currentColor;
 		opacity: 0;
-		animation: salmex-pulse-ring 1.5s ease-out infinite;
+		animation: sx-pulse-ring 1.5s ease-out infinite;
 	}
 
-	.salmex-pulse-ring-2 {
+	.sx-pulse-ring-2 {
 		animation-delay: 0.75s;
 	}
 
-	.salmex-pulse-dot {
+	.sx-pulse-dot {
 		width: 28%;
 		height: 28%;
 		border-radius: 50%;
 		background: currentColor;
-		box-shadow: var(--salmex-shadow-sm);
-		animation: salmex-pulse-dot 1.5s ease-out infinite;
+		animation: sx-pulse-dot 1.5s ease-out infinite;
 	}
 
-	@keyframes salmex-pulse-ring {
+	@keyframes sx-pulse-ring {
 		0% {
 			transform: scale(0.4);
 			opacity: 0.9;
@@ -352,7 +298,7 @@ const config = $derived(sizeConfig[size]);
 		}
 	}
 
-	@keyframes salmex-pulse-dot {
+	@keyframes sx-pulse-dot {
 		0%, 100% {
 			transform: scale(0.85);
 			opacity: 0.8;
@@ -365,55 +311,44 @@ const config = $derived(sizeConfig[size]);
 
 	/* ========== REDUCED MOTION ========== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-spinner-ring,
-		.salmex-spinner-bars,
-		.salmex-spinner-segment {
+		.sx-spinner-ring {
 			animation: none;
 		}
 
-		.salmex-spinner-ring {
-			filter: none;
-		}
-
-		.salmex-spinner-arc {
+		.sx-spinner-arc {
 			stroke-dasharray: 22 66;
 			opacity: 0.9;
 			transform: rotate(-90deg);
 		}
 
-		.salmex-spinner-bars,
-		.salmex-spinner-segment {
-			opacity: 0.85;
-		}
-
-		.salmex-spinner-dot {
+		.sx-spinner-dot {
 			animation: none;
 			opacity: 0.8;
 		}
 
-		.salmex-spinner-dot-1 {
+		.sx-spinner-dot-1 {
 			opacity: 0.5;
 		}
 
-		.salmex-spinner-dot-2 {
+		.sx-spinner-dot-2 {
 			opacity: 0.75;
 		}
 
-		.salmex-pulse-ring,
-		.salmex-pulse-dot {
+		.sx-pulse-ring,
+		.sx-pulse-dot {
 			animation: none;
 		}
 
-		.salmex-pulse-ring {
+		.sx-pulse-ring {
 			opacity: 0.25;
 			transform: scale(1);
 		}
 
-		.salmex-pulse-ring-2 {
+		.sx-pulse-ring-2 {
 			display: none;
 		}
 
-		.salmex-pulse-dot {
+		.sx-pulse-dot {
 			opacity: 1;
 		}
 	}

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

@@ -1,6 +1,6 @@
 type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type SpinnerVariant = 'primary' | 'secondary' | 'white';
-type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
+type SpinnerStyle = 'ring' | 'dots' | 'pulse';
 interface Props {
     size?: SpinnerSize;
     variant?: SpinnerVariant;
@@ -15,9 +15,11 @@ interface Props {
 /**
  * Spinner
  *
- * Win2K × Basquiat — Bold loading indicator.
- * Flat shadows, crown yellow / electric blue, geometric shapes. No soft gradients.
+ * Neo-Brutalist Dark — Clean loading indicator.
+ * Cyan accent, dark surfaces, geometric shapes.
  * role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
+ *
+ * Three styles: ring (default), dots (inline), pulse (radar/broadcast).
  */
 declare const Spinner: import("svelte").Component<Props, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMA,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;AA2GD;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMA,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,OAAO,CAAC;AAE9C,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;AA6FD;;;;;;;;GAQG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}