@salmexio/ui 0.4.0 → 1.0.0

package/dist/forms/Slider/Slider.svelte

@@ -0,0 +1,356 @@
+<!--
+  @component Slider
+
+  Neo-Brutalist Dark — Range slider with keyboard support, optional value display,
+  step marks, min/max labels, and full ARIA compliance.
+
+  @example
+  <Slider label="Volume" bind:value={vol} />
+  <Slider label="Price" min={0} max={1000} step={50} showValue />
+  <Slider label="Opacity" min={0} max={1} step={0.1} formatValue={(v) => `${Math.round(v * 100)}%`} />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+
+type SliderSize = 'sm' | 'md' | 'lg';
+type SliderColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+
+interface Props {
+	/** Accessible label. */
+	label: string;
+	/** Current value. */
+	value?: number;
+	/** Minimum value. */
+	min?: number;
+	/** Maximum value. */
+	max?: number;
+	/** Step increment. */
+	step?: number;
+	/** Disabled state. */
+	disabled?: boolean;
+	/** Show the current value above the thumb. */
+	showValue?: boolean;
+	/** Show min/max labels below the track. */
+	showMinMax?: boolean;
+	/** Custom formatter for the displayed value. */
+	formatValue?: (value: number) => string;
+	/** Hide the visible label. */
+	hideLabel?: boolean;
+	/** Size variant. */
+	size?: SliderSize;
+	/** Accent color. */
+	color?: SliderColor;
+	/** Additional CSS class. */
+	class?: string;
+	/** Input event handler. */
+	oninput?: (event: Event) => void;
+	/** Change event handler (fires on release). */
+	onchange?: (event: Event) => void;
+	testId?: string;
+}
+
+let {
+	label,
+	value = $bindable(0),
+	min = 0,
+	max = 100,
+	step = 1,
+	disabled = false,
+	showValue = false,
+	showMinMax = false,
+	formatValue,
+	hideLabel = false,
+	size = 'md',
+	color = 'cyan',
+	class: className = '',
+	oninput,
+	onchange,
+	testId
+}: Props = $props();
+
+const id = `slider-${Math.random().toString(36).slice(2, 9)}`;
+
+const displayValue = $derived(formatValue ? formatValue(value) : String(value));
+const fillPercent = $derived(max > min ? ((value - min) / (max - min)) * 100 : 0);
+
+function handleInput(e: Event) {
+	const target = e.target as HTMLInputElement;
+	value = parseFloat(target.value);
+	oninput?.(e);
+}
+
+function handleChange(e: Event) {
+	onchange?.(e);
+}
+</script>
+
+<div
+	class={cn('sx-slider-wrapper', `sx-slider-${size}`, disabled && 'sx-slider-disabled', className)}
+	data-testid={testId}
+>
+	<div class="sx-slider-header">
+		<label
+			for={id}
+			class={cn('sx-slider-label', hideLabel && 'sx-sr-only')}
+		>
+			{label}
+		</label>
+		{#if showValue}
+			<span class="sx-slider-display" aria-hidden="true">
+				{displayValue}
+			</span>
+		{/if}
+	</div>
+
+	<div class="sx-slider-track-wrapper">
+		<input
+			{id}
+			type="range"
+			bind:value
+			{min}
+			{max}
+			{step}
+			{disabled}
+			class={cn('sx-slider-input', `sx-slider-color-${color}`)}
+			style="--sx-slider-fill: {fillPercent}%;"
+			aria-label={hideLabel ? label : undefined}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={value}
+			aria-valuetext={displayValue}
+			oninput={handleInput}
+			onchange={handleChange}
+		/>
+	</div>
+
+	{#if showMinMax}
+		<div class="sx-slider-minmax">
+			<span>{formatValue ? formatValue(min) : min}</span>
+			<span>{formatValue ? formatValue(max) : max}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sx-slider-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-2);
+		width: 100%;
+	}
+
+	.sx-slider-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	.sx-slider-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+	}
+
+	.sx-slider-label {
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+		line-height: var(--sx-leading-normal);
+	}
+
+	.sx-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;
+	}
+
+	.sx-slider-display {
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-sm);
+		font-weight: 600;
+		color: var(--sx-color-text);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sx-slider-track-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	/* === Native range input === */
+	.sx-slider-input {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	.sx-slider-input:focus-visible {
+		outline: none;
+	}
+
+	/* Focused track glow — WebKit */
+	.sx-slider-input:focus-visible::-webkit-slider-runnable-track {
+		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-cyan));
+	}
+
+	/* Focused track glow — Firefox */
+	.sx-slider-input:focus-visible::-moz-range-track {
+		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-cyan));
+	}
+
+	/* Track — WebKit */
+	.sx-slider-input::-webkit-slider-runnable-track {
+		height: var(--sx-slider-track-h, 6px);
+		border-radius: var(--sx-radius-full);
+		background: linear-gradient(
+			to right,
+			var(--sx-slider-accent, var(--sx-color-cyan)) 0%,
+			var(--sx-slider-accent, var(--sx-color-cyan)) var(--sx-slider-fill),
+			var(--sx-color-surface-2) var(--sx-slider-fill),
+			var(--sx-color-surface-2) 100%
+		);
+	}
+
+	/* Track — Firefox */
+	.sx-slider-input::-moz-range-track {
+		height: var(--sx-slider-track-h, 6px);
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-color-surface-2);
+		border: none;
+	}
+
+	.sx-slider-input::-moz-range-progress {
+		height: var(--sx-slider-track-h, 6px);
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-slider-accent, var(--sx-color-cyan));
+	}
+
+	/* Thumb — WebKit */
+	.sx-slider-input::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: var(--sx-slider-thumb, 18px);
+		height: var(--sx-slider-thumb, 18px);
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-color-text);
+		border: 2px solid var(--sx-slider-accent, var(--sx-color-cyan));
+		margin-top: calc((var(--sx-slider-track-h, 6px) - var(--sx-slider-thumb, 18px)) / 2);
+		transition:
+			box-shadow var(--sx-transition-fast),
+			transform var(--sx-transition-fast),
+			background var(--sx-transition-fast),
+			border-color var(--sx-transition-fast);
+	}
+
+	.sx-slider-input::-webkit-slider-thumb:hover {
+		transform: scale(1.15);
+	}
+
+	.sx-slider-input:focus-visible::-webkit-slider-thumb {
+		box-shadow:
+			0 0 0 3px var(--sx-slider-ring, rgba(0, 212, 255, 0.35)),
+			0 0 12px var(--sx-slider-glow, rgba(0, 212, 255, 0.25));
+		transform: scale(1.2);
+		background: var(--sx-slider-accent, var(--sx-color-cyan));
+		border-color: var(--sx-color-text);
+	}
+
+	/* Thumb — Firefox */
+	.sx-slider-input::-moz-range-thumb {
+		width: var(--sx-slider-thumb, 18px);
+		height: var(--sx-slider-thumb, 18px);
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-color-text);
+		border: 2px solid var(--sx-slider-accent, var(--sx-color-cyan));
+		transition:
+			box-shadow var(--sx-transition-fast),
+			transform var(--sx-transition-fast),
+			background var(--sx-transition-fast),
+			border-color var(--sx-transition-fast);
+	}
+
+	.sx-slider-input::-moz-range-thumb:hover {
+		transform: scale(1.15);
+	}
+
+	.sx-slider-input:focus-visible::-moz-range-thumb {
+		box-shadow:
+			0 0 0 3px var(--sx-slider-ring, rgba(0, 212, 255, 0.35)),
+			0 0 12px var(--sx-slider-glow, rgba(0, 212, 255, 0.25));
+		transform: scale(1.2);
+		background: var(--sx-slider-accent, var(--sx-color-cyan));
+		border-color: var(--sx-color-text);
+	}
+
+	/* Color variants — accent + focus ring colors */
+	.sx-slider-color-cyan {
+		--sx-slider-accent: var(--sx-color-cyan);
+		--sx-slider-ring: rgba(0, 212, 255, 0.35);
+		--sx-slider-glow: rgba(0, 212, 255, 0.25);
+	}
+	.sx-slider-color-green {
+		--sx-slider-accent: var(--sx-color-green);
+		--sx-slider-ring: rgba(0, 255, 136, 0.35);
+		--sx-slider-glow: rgba(0, 255, 136, 0.25);
+	}
+	.sx-slider-color-gold {
+		--sx-slider-accent: var(--sx-color-gold);
+		--sx-slider-ring: rgba(255, 184, 0, 0.35);
+		--sx-slider-glow: rgba(255, 184, 0, 0.25);
+	}
+	.sx-slider-color-red {
+		--sx-slider-accent: var(--sx-color-red);
+		--sx-slider-ring: rgba(255, 82, 82, 0.35);
+		--sx-slider-glow: rgba(255, 82, 82, 0.25);
+	}
+	.sx-slider-color-purple {
+		--sx-slider-accent: var(--sx-color-purple);
+		--sx-slider-ring: rgba(168, 85, 247, 0.35);
+		--sx-slider-glow: rgba(168, 85, 247, 0.25);
+	}
+
+	/* Size variants */
+	.sx-slider-sm { --sx-slider-track-h: 4px; --sx-slider-thumb: 14px; }
+	.sx-slider-md { --sx-slider-track-h: 6px; --sx-slider-thumb: 18px; }
+	.sx-slider-lg { --sx-slider-track-h: 8px; --sx-slider-thumb: 22px; }
+
+	/* Min/max labels */
+	.sx-slider-minmax {
+		display: flex;
+		justify-content: space-between;
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-disabled);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-slider-input::-webkit-slider-thumb,
+		.sx-slider-input::-moz-range-thumb {
+			transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sx-slider-input::-webkit-slider-runnable-track {
+			border: 1px solid CanvasText;
+		}
+
+		.sx-slider-input::-webkit-slider-thumb {
+			background: ButtonText;
+			border-color: ButtonText;
+		}
+
+		.sx-slider-input::-moz-range-thumb {
+			background: ButtonText;
+			border-color: ButtonText;
+		}
+	}
+</style>

package/dist/forms/Slider/Slider.svelte.d.ts

@@ -0,0 +1,50 @@
+type SliderSize = 'sm' | 'md' | 'lg';
+type SliderColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+interface Props {
+    /** Accessible label. */
+    label: string;
+    /** Current value. */
+    value?: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. */
+    step?: number;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Show the current value above the thumb. */
+    showValue?: boolean;
+    /** Show min/max labels below the track. */
+    showMinMax?: boolean;
+    /** Custom formatter for the displayed value. */
+    formatValue?: (value: number) => string;
+    /** Hide the visible label. */
+    hideLabel?: boolean;
+    /** Size variant. */
+    size?: SliderSize;
+    /** Accent color. */
+    color?: SliderColor;
+    /** Additional CSS class. */
+    class?: string;
+    /** Input event handler. */
+    oninput?: (event: Event) => void;
+    /** Change event handler (fires on release). */
+    onchange?: (event: Event) => void;
+    testId?: string;
+}
+/**
+ * Slider
+ *
+ * Neo-Brutalist Dark — Range slider with keyboard support, optional value display,
+ * step marks, min/max labels, and full ARIA compliance.
+ *
+ * @example
+ * <Slider label="Volume" bind:value={vol} />
+ * <Slider label="Price" min={0} max={1000} step={50} showValue />
+ * <Slider label="Opacity" min={0} max={1} step={0.1} formatValue={(v) => `${Math.round(v * 100)}%`} />
+ */
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;
+//# sourceMappingURL=Slider.svelte.d.ts.map

package/dist/forms/Slider/Slider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Slider/Slider.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhE,UAAU,KAAK;IACd,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/forms/Slider/index.d.ts

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

package/dist/forms/Slider/index.d.ts.map

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

package/dist/forms/Slider/index.js

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