@synthaxai/ui 1.0.0

package/dist/feedback/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,585 @@
+<!--
+  @component ProgressBar
+  
+  A comprehensive progress bar component for displaying completion status.
+  Designed for healthcare applications with support for multi-step processes,
+  file uploads, and long-running operations.
+  
+  Features:
+  - Determinate and indeterminate states
+  - Multiple visual styles (solid, striped, gradient)
+  - Segmented/stepped progress
+  - Buffer indicator for streaming/loading
+  - Circular progress variant
+  - Proper ARIA accessibility
+  - Smooth animations with reduced motion support
+  
+  @example
+  <ProgressBar value={75} max={100} showPercentage />
+  
+  @example
+  <ProgressBar indeterminate label="Processing..." />
+  
+  @example
+  <ProgressBar value={3} max={5} segmented showSteps />
+-->
+<script lang="ts">
+	type ProgressSize = 'xs' | 'sm' | 'md' | 'lg';
+	type ProgressVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+	type ProgressStyle = 'solid' | 'striped' | 'gradient';
+
+	interface Props {
+		/** Current progress value (0-max) */
+		value?: number;
+		/** Maximum value */
+		max?: number;
+		/** Buffer value for showing buffered/loaded amount (0-max) */
+		buffer?: number;
+		/** Whether to show indeterminate (animated) state */
+		indeterminate?: boolean;
+		/** Accessible label for screen readers */
+		label?: string;
+		/** Whether to show the label visually */
+		showLabel?: boolean;
+		/** Whether to show percentage text */
+		showPercentage?: boolean;
+		/** Whether to show value as fraction (e.g., "3/5") */
+		showValue?: boolean;
+		/** Size of the progress bar */
+		size?: ProgressSize;
+		/** Color variant */
+		variant?: ProgressVariant;
+		/** Visual style */
+		style?: ProgressStyle;
+		/** Whether to show as segmented/stepped progress */
+		segmented?: boolean;
+		/** Whether to show step indicators for segmented progress */
+		showSteps?: boolean;
+		/** Custom step labels for segmented progress */
+		stepLabels?: string[];
+		/** Whether to animate value changes */
+		animated?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** ID for the progress element */
+		id?: string;
+	}
+
+	let {
+		value = 0,
+		max = 100,
+		buffer,
+		indeterminate = false,
+		label = 'Progress',
+		showLabel = false,
+		showPercentage = false,
+		showValue = false,
+		size = 'md',
+		variant = 'primary',
+		style = 'solid',
+		segmented = false,
+		showSteps = false,
+		stepLabels = [],
+		animated = true,
+		class: className = '',
+		id
+	}: Props = $props();
+
+	// Calculate percentages
+	const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+	const bufferPercentage = $derived(buffer !== undefined ? Math.min(100, Math.max(0, (buffer / max) * 100)) : undefined);
+	
+	// For segmented progress
+	const segments = $derived(segmented ? max : 0);
+	const completedSegments = $derived(segmented ? Math.min(max, Math.max(0, Math.floor(value))) : 0);
+
+	// Generate unique ID
+	const generatedId = `progress-${Math.random().toString(36).substr(2, 9)}`;
+	const progressId = $derived(id || generatedId);
+</script>
+
+<div class="progress-wrapper progress-{size} {className}" id={progressId}>
+	<!-- Header with label and value -->
+	{#if showLabel || showPercentage || showValue}
+		<div class="progress-header">
+			{#if showLabel}
+				<span class="progress-label" id="{progressId}-label">{label}</span>
+			{/if}
+			{#if (showPercentage || showValue) && !indeterminate}
+				<span class="progress-value">
+					{#if showValue}
+						{value}/{max}
+					{:else}
+						{Math.round(percentage)}%
+					{/if}
+				</span>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Segmented Progress -->
+	{#if segmented}
+		<div 
+			class="progress-segmented"
+			role="progressbar"
+			aria-label={label}
+			aria-valuenow={value}
+			aria-valuemin={0}
+			aria-valuemax={max}
+			aria-valuetext="{value} of {max} steps complete"
+		>
+			{#each Array(segments) as _, i}
+				<div 
+					class="progress-segment"
+					class:progress-segment-complete={i < completedSegments}
+					class:progress-segment-current={i === completedSegments}
+					class:progress-variant-primary={variant === 'primary'}
+					class:progress-variant-success={variant === 'success'}
+					class:progress-variant-warning={variant === 'warning'}
+					class:progress-variant-error={variant === 'error'}
+					class:progress-variant-info={variant === 'info'}
+				>
+					{#if showSteps}
+						<span class="progress-step-indicator">
+							{#if i < completedSegments}
+								<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+									<polyline points="20 6 9 17 4 12"></polyline>
+								</svg>
+							{:else}
+								{i + 1}
+							{/if}
+						</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		
+		<!-- Step Labels -->
+		{#if stepLabels.length > 0}
+			<div class="progress-step-labels">
+				{#each stepLabels as stepLabel, i}
+					<span 
+						class="progress-step-label"
+						class:progress-step-label-complete={i < completedSegments}
+						class:progress-step-label-current={i === completedSegments}
+					>
+						{stepLabel}
+					</span>
+				{/each}
+			</div>
+		{/if}
+	{:else}
+		<!-- Standard Progress Bar -->
+		<div
+			class="progress-track"
+			role="progressbar"
+			aria-label={label}
+			aria-labelledby={showLabel ? `${progressId}-label` : undefined}
+			aria-valuenow={indeterminate ? undefined : value}
+			aria-valuemin={0}
+			aria-valuemax={max}
+			aria-valuetext={indeterminate ? 'Loading' : `${Math.round(percentage)}%`}
+		>
+			<!-- Buffer bar (optional) -->
+			{#if bufferPercentage !== undefined && !indeterminate}
+				<div 
+					class="progress-buffer"
+					style="width: {bufferPercentage}%"
+				></div>
+			{/if}
+
+			<!-- Main progress bar -->
+			<div
+				class="progress-bar progress-variant-{variant} progress-style-{style}"
+				class:progress-animated={animated && !indeterminate}
+				class:progress-indeterminate={indeterminate}
+				style={indeterminate ? undefined : `width: ${percentage}%`}
+			></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   BASE WRAPPER STYLES
+	   ======================================== */
+	.progress-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		width: 100%;
+	}
+
+	/* ========================================
+	   HEADER STYLES
+	   ======================================== */
+	.progress-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.progress-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--ui-text-secondary);
+	}
+
+	.progress-value {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--ui-text-primary);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* ========================================
+	   SIZE VARIANTS
+	   ======================================== */
+	.progress-xs .progress-track {
+		height: 4px;
+	}
+
+	.progress-sm .progress-track {
+		height: 6px;
+	}
+
+	.progress-md .progress-track {
+		height: 10px;
+	}
+
+	.progress-lg .progress-track {
+		height: 14px;
+	}
+
+	.progress-xs .progress-header,
+	.progress-sm .progress-header {
+		margin-bottom: 0.125rem;
+	}
+
+	.progress-xs .progress-label,
+	.progress-xs .progress-value {
+		font-size: 0.75rem;
+	}
+
+	.progress-sm .progress-label,
+	.progress-sm .progress-value {
+		font-size: 0.8125rem;
+	}
+
+	/* ========================================
+	   TRACK STYLES
+	   ======================================== */
+	.progress-track {
+		position: relative;
+		width: 100%;
+		background-color: var(--ui-bg-tertiary);
+		border-radius: 999px;
+		overflow: hidden;
+	}
+
+	/* ========================================
+	   BUFFER BAR
+	   ======================================== */
+	.progress-buffer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background-color: var(--ui-bg-tertiary);
+		opacity: 0.5;
+		border-radius: 999px;
+		transition: width 0.3s ease-out;
+	}
+
+	/* ========================================
+	   PROGRESS BAR STYLES
+	   ======================================== */
+	.progress-bar {
+		position: relative;
+		height: 100%;
+		border-radius: 999px;
+		min-width: 0;
+	}
+
+	.progress-animated {
+		transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	/* ========================================
+	   COLOR VARIANTS
+	   ======================================== */
+	.progress-variant-primary {
+		background-color: rgb(var(--ui-color-primary));
+	}
+
+	.progress-variant-success {
+		background-color: rgb(var(--ui-color-success));
+	}
+
+	.progress-variant-warning {
+		background-color: rgb(var(--ui-color-warning));
+	}
+
+	.progress-variant-error {
+		background-color: rgb(var(--ui-color-error));
+	}
+
+	.progress-variant-info {
+		background-color: rgb(var(--ui-color-info));
+	}
+
+	/* Dark mode adjustments */
+	:global([data-theme='dark']) .progress-variant-primary {
+		background-color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .progress-variant-primary {
+			background-color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* ========================================
+	   STYLE VARIANTS
+	   ======================================== */
+	
+	/* Striped style */
+	.progress-style-striped {
+		background-image: linear-gradient(
+			45deg,
+			rgba(255, 255, 255, 0.15) 25%,
+			transparent 25%,
+			transparent 50%,
+			rgba(255, 255, 255, 0.15) 50%,
+			rgba(255, 255, 255, 0.15) 75%,
+			transparent 75%,
+			transparent
+		);
+		background-size: 1rem 1rem;
+		animation: progress-stripes 1s linear infinite;
+	}
+
+	@keyframes progress-stripes {
+		from {
+			background-position: 1rem 0;
+		}
+		to {
+			background-position: 0 0;
+		}
+	}
+
+	/* Gradient style */
+	.progress-style-gradient.progress-variant-primary {
+		background: linear-gradient(
+			90deg,
+			rgb(var(--ui-color-primary)) 0%,
+			rgb(var(--ui-color-primary-light)) 100%
+		);
+	}
+
+	.progress-style-gradient.progress-variant-success {
+		background: linear-gradient(
+			90deg,
+			rgb(var(--ui-color-success)) 0%,
+			rgb(var(--ui-color-success-light, var(--ui-color-success))) 100%
+		);
+	}
+
+	.progress-style-gradient.progress-variant-warning {
+		background: linear-gradient(
+			90deg,
+			rgb(var(--ui-color-warning)) 0%,
+			rgb(var(--ui-color-warning-light, var(--ui-color-warning))) 100%
+		);
+	}
+
+	.progress-style-gradient.progress-variant-error {
+		background: linear-gradient(
+			90deg,
+			rgb(var(--ui-color-error)) 0%,
+			rgb(var(--ui-color-error-light, var(--ui-color-error))) 100%
+		);
+	}
+
+	.progress-style-gradient.progress-variant-info {
+		background: linear-gradient(
+			90deg,
+			rgb(var(--ui-color-info)) 0%,
+			rgb(var(--ui-color-info-light, var(--ui-color-info))) 100%
+		);
+	}
+
+	/* ========================================
+	   INDETERMINATE ANIMATION
+	   ======================================== */
+	.progress-indeterminate {
+		width: 40% !important;
+		animation: indeterminate 1.5s ease-in-out infinite;
+	}
+
+	@keyframes indeterminate {
+		0% {
+			left: -40%;
+			transform: translateX(0);
+		}
+		50% {
+			left: 100%;
+			transform: translateX(-100%);
+		}
+		50.01% {
+			left: -40%;
+			transform: translateX(0);
+		}
+		100% {
+			left: 100%;
+			transform: translateX(-100%);
+		}
+	}
+
+	/* Ensure indeterminate bar is positioned correctly */
+	.progress-track:has(.progress-indeterminate) {
+		overflow: hidden;
+	}
+
+	.progress-indeterminate {
+		position: absolute;
+		left: -40%;
+	}
+
+	/* ========================================
+	   SEGMENTED PROGRESS
+	   ======================================== */
+	.progress-segmented {
+		display: flex;
+		gap: 4px;
+		width: 100%;
+	}
+
+	.progress-segment {
+		flex: 1;
+		height: 8px;
+		background-color: var(--ui-bg-tertiary);
+		border-radius: 999px;
+		transition: all 0.3s ease;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.progress-md .progress-segment {
+		height: 10px;
+	}
+
+	.progress-lg .progress-segment {
+		height: 14px;
+	}
+
+	.progress-segment-complete {
+		background-color: rgb(var(--ui-color-primary));
+	}
+
+	.progress-segment-complete.progress-variant-success {
+		background-color: rgb(var(--ui-color-success));
+	}
+
+	.progress-segment-complete.progress-variant-warning {
+		background-color: rgb(var(--ui-color-warning));
+	}
+
+	.progress-segment-complete.progress-variant-error {
+		background-color: rgb(var(--ui-color-error));
+	}
+
+	.progress-segment-complete.progress-variant-info {
+		background-color: rgb(var(--ui-color-info));
+	}
+
+	.progress-segment-current {
+		background-color: rgb(var(--ui-color-primary) / 0.3);
+		animation: segment-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes segment-pulse {
+		0%, 100% {
+			opacity: 0.5;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
+
+	/* Step indicators */
+	.progress-step-indicator {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.625rem;
+		font-weight: 600;
+		background: var(--ui-bg-primary);
+		border: 2px solid var(--ui-border-default);
+		color: var(--ui-text-tertiary);
+		transition: all 0.3s ease;
+	}
+
+	.progress-segment-complete .progress-step-indicator {
+		background: rgb(var(--ui-color-primary));
+		border-color: rgb(var(--ui-color-primary));
+		color: white;
+	}
+
+	.progress-segment-current .progress-step-indicator {
+		border-color: rgb(var(--ui-color-primary));
+		color: rgb(var(--ui-color-primary));
+	}
+
+	/* Step labels */
+	.progress-step-labels {
+		display: flex;
+		margin-top: 0.5rem;
+	}
+
+	.progress-step-label {
+		flex: 1;
+		text-align: center;
+		font-size: 0.75rem;
+		color: var(--ui-text-tertiary);
+		transition: color 0.3s ease;
+	}
+
+	.progress-step-label-complete,
+	.progress-step-label-current {
+		color: var(--ui-text-primary);
+	}
+
+	.progress-step-label-current {
+		font-weight: 600;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.progress-animated {
+			transition: none;
+		}
+
+		.progress-style-striped {
+			animation: none;
+		}
+
+		.progress-indeterminate {
+			animation: none;
+			left: 30%;
+			width: 40% !important;
+			opacity: 0.8;
+		}
+
+		.progress-segment-current {
+			animation: none;
+			opacity: 0.6;
+		}
+	}
+</style>

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

@@ -0,0 +1,68 @@
+type ProgressSize = 'xs' | 'sm' | 'md' | 'lg';
+type ProgressVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+type ProgressStyle = 'solid' | 'striped' | 'gradient';
+interface Props {
+    /** Current progress value (0-max) */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Buffer value for showing buffered/loaded amount (0-max) */
+    buffer?: number;
+    /** Whether to show indeterminate (animated) state */
+    indeterminate?: boolean;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Whether to show the label visually */
+    showLabel?: boolean;
+    /** Whether to show percentage text */
+    showPercentage?: boolean;
+    /** Whether to show value as fraction (e.g., "3/5") */
+    showValue?: boolean;
+    /** Size of the progress bar */
+    size?: ProgressSize;
+    /** Color variant */
+    variant?: ProgressVariant;
+    /** Visual style */
+    style?: ProgressStyle;
+    /** Whether to show as segmented/stepped progress */
+    segmented?: boolean;
+    /** Whether to show step indicators for segmented progress */
+    showSteps?: boolean;
+    /** Custom step labels for segmented progress */
+    stepLabels?: string[];
+    /** Whether to animate value changes */
+    animated?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** ID for the progress element */
+    id?: string;
+}
+/**
+ * ProgressBar
+ *
+ * A comprehensive progress bar component for displaying completion status.
+ * Designed for healthcare applications with support for multi-step processes,
+ * file uploads, and long-running operations.
+ *
+ * Features:
+ * - Determinate and indeterminate states
+ * - Multiple visual styles (solid, striped, gradient)
+ * - Segmented/stepped progress
+ * - Buffer indicator for streaming/loading
+ * - Circular progress variant
+ * - Proper ARIA accessibility
+ * - Smooth animations with reduced motion support
+ *
+ * @example
+ * <ProgressBar value={75} max={100} showPercentage />
+ *
+ * @example
+ * <ProgressBar indeterminate label="Processing..." />
+ *
+ * @example
+ * <ProgressBar value={3} max={5} segmented showSteps />
+ */
+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":"AAGC,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5E,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,UAAU,KAAK;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mBAAmB;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2GF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;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';