@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/Rating/Rating.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		max?: number;
+		allowHalf?: boolean;
+		readonly?: boolean;
+		disabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		color?: string;
+		emptyColor?: string;
+		showValue?: boolean;
+		class?: string;
+		onchange?: (value: number) => void;
+	}
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		allowHalf = false,
+		readonly = false,
+		disabled = false,
+		size = 'md',
+		color,
+		emptyColor,
+		showValue = false,
+		class: className = '',
+		onchange
+	}: Props = $props();
+
+	let hoverValue = $state<number | null>(null);
+	let containerRef: HTMLDivElement | null = $state(null);
+
+	const displayValue = $derived(hoverValue ?? value);
+
+	// Size mapping for star dimensions
+	const sizeMap = {
+		sm: '20px',
+		md: '24px',
+		lg: '32px'
+	};
+
+	// Calculate star state (filled, half, or empty)
+	function getStarState(index: number): 'filled' | 'half' | 'empty' {
+		const starNumber = index + 1;
+		if (displayValue >= starNumber) return 'filled';
+		if (allowHalf && displayValue >= starNumber - 0.5) return 'half';
+		return 'empty';
+	}
+
+	// Handle star click
+	function handleStarClick(index: number, e: MouseEvent) {
+		if (readonly || disabled) return;
+
+		const star = e.currentTarget as HTMLElement;
+		const rect = star.getBoundingClientRect();
+		const clickX = e.clientX - rect.left;
+		const isLeftHalf = clickX < rect.width / 2;
+
+		let newValue: number;
+		if (allowHalf && isLeftHalf) {
+			newValue = index + 0.5;
+		} else {
+			newValue = index + 1;
+		}
+
+		// Allow clicking same value to reset to 0
+		if (newValue === value) {
+			newValue = 0;
+		}
+
+		value = newValue;
+		onchange?.(newValue);
+	}
+
+	// Handle hover
+	function handleStarHover(index: number, e: MouseEvent) {
+		if (readonly || disabled) return;
+
+		const star = e.currentTarget as HTMLElement;
+		const rect = star.getBoundingClientRect();
+		const hoverX = e.clientX - rect.left;
+		const isLeftHalf = hoverX < rect.width / 2;
+
+		if (allowHalf && isLeftHalf) {
+			hoverValue = index + 0.5;
+		} else {
+			hoverValue = index + 1;
+		}
+	}
+
+	// Clear hover
+	function handleMouseLeave() {
+		hoverValue = null;
+	}
+
+	// Keyboard navigation
+	function handleKeyDown(e: KeyboardEvent) {
+		if (readonly || disabled) return;
+
+		let newValue = value;
+		const step = allowHalf ? 0.5 : 1;
+
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				e.preventDefault();
+				newValue = Math.min(max, value + step);
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				e.preventDefault();
+				newValue = Math.max(0, value - step);
+				break;
+			case 'Home':
+				e.preventDefault();
+				newValue = 0;
+				break;
+			case 'End':
+				e.preventDefault();
+				newValue = max;
+				break;
+			default:
+				return;
+		}
+
+		if (newValue !== value) {
+			value = newValue;
+			onchange?.(newValue);
+		}
+	}
+
+	// Generate array of star indices
+	const stars = $derived(Array.from({ length: max }, (_, i) => i));
+
+	// ARIA label
+	const ariaLabel = $derived(`Rating: ${value} out of ${max} stars`);
+</script>
+
+<div
+	bind:this={containerRef}
+	class="rating rating--{size} {className}"
+	class:rating--readonly={readonly}
+	class:rating--disabled={disabled}
+	role="slider"
+	aria-label={ariaLabel}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={value}
+	aria-readonly={readonly}
+	aria-disabled={disabled}
+	tabindex={readonly || disabled ? -1 : 0}
+	onkeydown={handleKeyDown}
+	onmouseleave={handleMouseLeave}
+>
+	<div class="rating-stars">
+		{#each stars as index (index)}
+			{@const state = getStarState(index)}
+			<div
+				class="rating-star"
+				class:rating-star--filled={state === 'filled'}
+				class:rating-star--half={state === 'half'}
+				class:rating-star--empty={state === 'empty'}
+				onclick={(e) => handleStarClick(index, e)}
+				onmousemove={(e) => handleStarHover(index, e)}
+				role="presentation"
+				style:--star-color={color}
+				style:--star-empty-color={emptyColor}
+			>
+				{#if state === 'filled'}
+					<!-- Filled star -->
+					<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+						<path
+							d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+						/>
+					</svg>
+				{:else if state === 'half'}
+					<!-- Half star -->
+					<svg viewBox="0 0 24 24" aria-hidden="true" class="rating-star-half">
+						<defs>
+							<linearGradient id="half-{index}">
+								<stop offset="50%" stop-color="currentColor" />
+								<stop offset="50%" stop-color="transparent" />
+							</linearGradient>
+						</defs>
+						<path
+							d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+							fill="url(#half-{index})"
+							stroke="currentColor"
+							stroke-width="1.5"
+						/>
+					</svg>
+				{:else}
+					<!-- Empty star -->
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						aria-hidden="true"
+					>
+						<path
+							d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+						/>
+					</svg>
+				{/if}
+			</div>
+		{/each}
+	</div>
+
+	{#if showValue}
+		<div class="rating-value" aria-hidden="true">
+			{value.toFixed(allowHalf ? 1 : 0)}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.rating {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		outline: none;
+	}
+
+	.rating:focus-visible {
+		outline: 2px solid var(--color-primary, #0090ff);
+		outline-offset: 4px;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.rating--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.rating-stars {
+		display: inline-flex;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.rating-star {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition:
+			transform var(--transition-fast, 150ms ease),
+			color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+
+		/* Touch target */
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.rating--readonly .rating-star,
+	.rating--disabled .rating-star {
+		cursor: default;
+	}
+
+	.rating-star svg {
+		display: block;
+		width: var(--star-size, 24px);
+		height: var(--star-size, 24px);
+		pointer-events: none;
+	}
+
+	/* Size variants */
+	.rating--sm {
+		--star-size: 20px;
+	}
+
+	.rating--md {
+		--star-size: 24px;
+	}
+
+	.rating--lg {
+		--star-size: 32px;
+	}
+
+	/* Star states */
+	.rating-star--filled {
+		color: var(--star-color, var(--color-warning, #ffc107));
+	}
+
+	.rating-star--half {
+		color: var(--star-color, var(--color-warning, #ffc107));
+	}
+
+	.rating-star--half path {
+		stroke: var(--star-empty-color, var(--color-border, #d9d9d9));
+	}
+
+	.rating-star--empty {
+		color: var(--star-empty-color, var(--color-border, #d9d9d9));
+	}
+
+	/* Hover effects - only when not readonly/disabled */
+	.rating:not(.rating--readonly):not(.rating--disabled) .rating-star:hover {
+		transform: scale(1.15);
+	}
+
+	.rating:not(.rating--readonly):not(.rating--disabled) .rating-star:active {
+		transform: scale(1.05);
+	}
+
+	/* Value display */
+	.rating-value {
+		margin-left: var(--space-xs, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: var(--font-medium, 500);
+		color: var(--color-text-secondary, #666666);
+		line-height: 1;
+	}
+</style>

package/dist/components/Rating/Rating.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    value?: number;
+    max?: number;
+    allowHalf?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: string;
+    emptyColor?: string;
+    showValue?: boolean;
+    class?: string;
+    onchange?: (value: number) => void;
+}
+declare const Rating: import("svelte").Component<Props, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/components/Rating/index.d.ts

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

package/dist/components/Rating/index.js

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