@salmexio/ui 0.4.0 → 1.0.0

package/dist/feedback/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,246 @@
+<!--
+  @component ProgressBar
+
+  Neo-Brutalist Dark — Determinate & indeterminate progress indicator with
+  optional label, value display, size variants, and full ARIA compliance.
+
+  @example
+  <ProgressBar value={65} label="Upload" />
+  <ProgressBar indeterminate label="Loading..." />
+  <ProgressBar value={30} max={50} showValue color="cyan" />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+
+type ProgressSize = 'sm' | 'md' | 'lg';
+type ProgressColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+
+interface Props {
+	/** Current value (0–max). Ignored when indeterminate. */
+	value?: number;
+	/** Maximum value. */
+	max?: number;
+	/** Show an indeterminate animation instead of a fixed bar. */
+	indeterminate?: boolean;
+	/** Accessible label (always announced, optionally visible). */
+	label?: string;
+	/** Hide the visible label text (still announced to SR). */
+	hideLabel?: boolean;
+	/** Display the numeric value/percentage next to the bar. */
+	showValue?: boolean;
+	/** Format function for the displayed value. Receives (value, max). */
+	formatValue?: (value: number, max: number) => string;
+	/** Height variant. */
+	size?: ProgressSize;
+	/** Accent color. */
+	color?: ProgressColor;
+	/** Additional CSS class. */
+	class?: string;
+	testId?: string;
+}
+
+let {
+	value = 0,
+	max = 100,
+	indeterminate = false,
+	label,
+	hideLabel = false,
+	showValue = false,
+	formatValue,
+	size = 'md',
+	color = 'cyan',
+	class: className = '',
+	testId
+}: Props = $props();
+
+const clampedValue = $derived(Math.max(0, Math.min(value, max)));
+const percentage = $derived(max > 0 ? (clampedValue / max) * 100 : 0);
+
+const displayValue = $derived(
+	formatValue
+		? formatValue(clampedValue, max)
+		: max === 100
+			? `${Math.round(percentage)}%`
+			: `${clampedValue}/${max}`
+);
+
+const stableId = `progress-${Math.random().toString(36).slice(2, 9)}`;
+const labelId = $derived(label ? `${stableId}-label` : undefined);
+</script>
+
+<div
+	class={cn('sx-progress-wrapper', className)}
+	data-testid={testId}
+>
+	{#if label}
+		<div class="sx-progress-header">
+			<span
+				id={labelId}
+				class={cn('sx-progress-label', hideLabel && 'sx-sr-only')}
+			>
+				{label}
+			</span>
+			{#if showValue && !indeterminate}
+				<span class="sx-progress-value" aria-hidden="true">
+					{displayValue}
+				</span>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class={cn('sx-progress-track', `sx-progress-${size}`)}
+		role="progressbar"
+		aria-valuenow={indeterminate ? undefined : clampedValue}
+		aria-valuemin={0}
+		aria-valuemax={max}
+		aria-label={label ? undefined : 'Progress'}
+		aria-labelledby={labelId}
+	>
+		<div
+			class={cn(
+				'sx-progress-fill',
+				`sx-progress-color-${color}`,
+				indeterminate && 'sx-progress-indeterminate'
+			)}
+			style={indeterminate ? undefined : `width: ${percentage}%`}
+		></div>
+	</div>
+
+	{#if showValue && !indeterminate && !label}
+		<span class="sx-progress-value sx-progress-value-below" aria-hidden="true">
+			{displayValue}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.sx-progress-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1-5);
+		width: 100%;
+	}
+
+	.sx-progress-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+	}
+
+	.sx-progress-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-progress-value {
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sx-progress-value-below {
+		align-self: flex-end;
+	}
+
+	/* Track */
+	.sx-progress-track {
+		width: 100%;
+		background: var(--sx-color-surface-2);
+		border-radius: var(--sx-radius-full);
+		overflow: hidden;
+	}
+
+	.sx-progress-sm {
+		height: 4px;
+	}
+
+	.sx-progress-md {
+		height: 8px;
+	}
+
+	.sx-progress-lg {
+		height: 12px;
+	}
+
+	/* Fill */
+	.sx-progress-fill {
+		height: 100%;
+		border-radius: var(--sx-radius-full);
+		transition: width 0.3s var(--sx-ease-out);
+	}
+
+	/* Colors */
+	.sx-progress-color-cyan {
+		background: var(--sx-color-cyan);
+	}
+
+	.sx-progress-color-green {
+		background: var(--sx-color-green);
+	}
+
+	.sx-progress-color-gold {
+		background: var(--sx-color-gold);
+	}
+
+	.sx-progress-color-red {
+		background: var(--sx-color-red);
+	}
+
+	.sx-progress-color-purple {
+		background: var(--sx-color-purple);
+	}
+
+	/* Indeterminate */
+	.sx-progress-indeterminate {
+		width: 40% !important;
+		animation: sx-progress-slide 1.5s var(--sx-ease-out) infinite;
+	}
+
+	@keyframes sx-progress-slide {
+		0% {
+			transform: translateX(-100%);
+		}
+		100% {
+			transform: translateX(350%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-progress-fill {
+			transition: none;
+		}
+
+		.sx-progress-indeterminate {
+			animation: none;
+			width: 100% !important;
+			opacity: 0.5;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sx-progress-track {
+			border: 1px solid CanvasText;
+		}
+
+		.sx-progress-fill {
+			background: Highlight;
+		}
+	}
+</style>

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

@@ -0,0 +1,40 @@
+type ProgressSize = 'sm' | 'md' | 'lg';
+type ProgressColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+interface Props {
+    /** Current value (0–max). Ignored when indeterminate. */
+    value?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Show an indeterminate animation instead of a fixed bar. */
+    indeterminate?: boolean;
+    /** Accessible label (always announced, optionally visible). */
+    label?: string;
+    /** Hide the visible label text (still announced to SR). */
+    hideLabel?: boolean;
+    /** Display the numeric value/percentage next to the bar. */
+    showValue?: boolean;
+    /** Format function for the displayed value. Receives (value, max). */
+    formatValue?: (value: number, max: number) => string;
+    /** Height variant. */
+    size?: ProgressSize;
+    /** Accent color. */
+    color?: ProgressColor;
+    /** Additional CSS class. */
+    class?: string;
+    testId?: string;
+}
+/**
+ * ProgressBar
+ *
+ * Neo-Brutalist Dark — Determinate & indeterminate progress indicator with
+ * optional label, value display, size variants, and full ARIA compliance.
+ *
+ * @example
+ * <ProgressBar value={65} label="Upload" />
+ * <ProgressBar indeterminate label="Loading..." />
+ * <ProgressBar value={30} max={50} showValue color="cyan" />
+ */
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/ProgressBar/ProgressBar.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElE,UAAU,KAAK;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

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

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

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

package/dist/feedback/ProgressBar/index.js

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

package/dist/feedback/Skeleton/Skeleton.svelte

@@ -0,0 +1,153 @@
+<!--
+  @component Skeleton
+
+  Neo-Brutalist Dark — Content placeholder with shimmer animation.
+  Supports text lines, circles (avatars), and rectangular shapes.
+  Uses aria-busy for screen readers.
+
+  @example
+  <Skeleton width="200px" />
+  <Skeleton variant="circle" width="48px" height="48px" />
+  <Skeleton lines={3} />
+  <Skeleton variant="rect" width="100%" height="200px" />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+
+type SkeletonVariant = 'text' | 'circle' | 'rect';
+
+interface Props {
+	/** Shape variant. */
+	variant?: SkeletonVariant;
+	/** Width (CSS value). Defaults to 100% for text/rect. */
+	width?: string;
+	/** Height (CSS value). Defaults to size-appropriate values per variant. */
+	height?: string;
+	/** Number of text lines to render (only for variant="text"). */
+	lines?: number;
+	/** Gap between lines. */
+	gap?: string;
+	/** Whether loading is active. When false, renders nothing. */
+	loading?: boolean;
+	/** Custom border radius override. */
+	rounded?: string;
+	/** Additional CSS class. */
+	class?: string;
+	testId?: string;
+}
+
+let {
+	variant = 'text',
+	width,
+	height,
+	lines = 1,
+	gap = 'var(--sx-space-2)',
+	loading = true,
+	rounded,
+	class: className = '',
+	testId
+}: Props = $props();
+
+const effectiveWidth = $derived(width ?? (variant === 'circle' ? '40px' : '100%'));
+const effectiveHeight = $derived(
+	height ??
+		(variant === 'circle'
+			? effectiveWidth
+			: variant === 'text'
+				? '1em'
+				: '100px')
+);
+
+const borderRadius = $derived(
+	rounded ??
+		(variant === 'circle'
+			? 'var(--sx-radius-full)'
+			: 'var(--sx-radius-sm)')
+);
+
+const lineWidths = $derived(
+	lines > 1
+		? Array.from({ length: lines }, (_, i) => (i === lines - 1 ? '75%' : '100%'))
+		: ['100%']
+);
+</script>
+
+{#if loading}
+	<div
+		class={cn('sx-skeleton-wrapper', className)}
+		aria-busy="true"
+		aria-label="Loading content"
+		role="status"
+		data-testid={testId}
+	>
+		{#if variant === 'text' && lines > 1}
+			<div class="sx-skeleton-lines" style="gap: {gap};">
+				{#each lineWidths as lw}
+					<div
+						class="sx-skeleton-bone sx-skeleton-shimmer"
+						style="width: {lw}; height: {effectiveHeight}; border-radius: {borderRadius};"
+					></div>
+				{/each}
+			</div>
+		{:else}
+			<div
+				class="sx-skeleton-bone sx-skeleton-shimmer"
+				style="width: {effectiveWidth}; height: {effectiveHeight}; border-radius: {borderRadius};"
+			></div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.sx-skeleton-wrapper {
+		display: inline-flex;
+		width: 100%;
+	}
+
+	.sx-skeleton-lines {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.sx-skeleton-bone {
+		background: var(--sx-color-surface-2);
+	}
+
+	.sx-skeleton-shimmer {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.sx-skeleton-shimmer::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			var(--sx-color-surface-3) 50%,
+			transparent 100%
+		);
+		animation: sx-skeleton-sweep 1.8s ease-in-out infinite;
+	}
+
+	@keyframes sx-skeleton-sweep {
+		0% {
+			transform: translateX(-100%);
+		}
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-skeleton-shimmer::after {
+			animation: none;
+		}
+
+		.sx-skeleton-bone {
+			opacity: 0.7;
+		}
+	}
+</style>

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

@@ -0,0 +1,37 @@
+type SkeletonVariant = 'text' | 'circle' | 'rect';
+interface Props {
+    /** Shape variant. */
+    variant?: SkeletonVariant;
+    /** Width (CSS value). Defaults to 100% for text/rect. */
+    width?: string;
+    /** Height (CSS value). Defaults to size-appropriate values per variant. */
+    height?: string;
+    /** Number of text lines to render (only for variant="text"). */
+    lines?: number;
+    /** Gap between lines. */
+    gap?: string;
+    /** Whether loading is active. When false, renders nothing. */
+    loading?: boolean;
+    /** Custom border radius override. */
+    rounded?: string;
+    /** Additional CSS class. */
+    class?: string;
+    testId?: string;
+}
+/**
+ * Skeleton
+ *
+ * Neo-Brutalist Dark — Content placeholder with shimmer animation.
+ * Supports text lines, circles (avatars), and rectangular shapes.
+ * Uses aria-busy for screen readers.
+ *
+ * @example
+ * <Skeleton width="200px" />
+ * <Skeleton variant="circle" width="48px" height="48px" />
+ * <Skeleton lines={3} />
+ * <Skeleton variant="rect" width="100%" height="200px" />
+ */
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,UAAU,KAAK;IACd,qBAAqB;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA6DD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

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

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

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

package/dist/feedback/Skeleton/index.js

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