@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.31

package/dist/forms/Slider.svelte

@@ -0,0 +1,342 @@
+<!-- A unified slider component supporting enum, single value, and range selection -->
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { slider } from './slider.js';
+	import { Size } from '../variants.js';
+	import type { SliderProps } from '../index.js';
+
+	interface EnumOption {
+		value: string | number;
+		label: string;
+	}
+
+	type SliderMode = 'single' | 'range' | 'enum';
+	type ThumbType = 'start' | 'end' | 'single';
+	type NotationType = 'standard' | 'compact' | 'scientific' | 'engineering';
+
+	let {
+		name,
+		label,
+		mode = 'single' as SliderMode,
+		disabled = false,
+		size = Size.BASE,
+		errors = [],
+		class: className = '',
+		min = 0,
+		max = 100,
+		step = 1,
+		value = $bindable(min),
+		valueStart = $bindable(min),
+		valueEnd = $bindable(max),
+		showValue = true,
+		valuePrefix = '',
+		valueSuffix = '',
+		options = [] as EnumOption[],
+		formatOptions = {
+			notation: 'standard' as NotationType,
+			maximumFractionDigits: 1,
+			minimumFractionDigits: 0
+		}
+	}: SliderProps = $props();
+
+	$effect(() => {
+		if (mode === 'enum' && options.length > 0 && value === min) {
+			value = options[0].value;
+		}
+	});
+
+	const {
+		base,
+		track,
+		range,
+		thumb,
+		mark,
+		label: labelClass,
+		value: valueClass
+	} = $derived(
+		slider({
+			size,
+			disabled,
+			hasError: errors.length > 0
+		})
+	);
+
+	const baseClass = $derived(cn(base(), { 'mb-12': mode === 'enum' }, className));
+	const trackClass = $derived(cn(track()));
+	const rangeClass = $derived(cn(range()));
+	const thumbClass = $derived(cn(thumb()));
+	const markClass = $derived(cn(mark()));
+	const labelClass_ = $derived(cn(labelClass()));
+	const valueClass_ = $derived(cn(valueClass()));
+
+	let isDragging = $state(false);
+	let activeThumb = $state<ThumbType>('single');
+	let trackElement: HTMLDivElement;
+
+	function getEnumStepSize() {
+		return options.length > 1 ? 100 / (options.length - 1) : 100;
+	}
+
+	function getEnumIndex() {
+		const index = options.findIndex((opt) => opt.value === value);
+		return index >= 0 ? index : 0;
+	}
+
+	function getSingleThumbPosition() {
+		if (typeof value !== 'number') return '0%';
+		return `${((value - min) / (max - min)) * 100}%`;
+	}
+
+	function getSingleRangeWidth() {
+		if (typeof value !== 'number') return '0%';
+		return `${((value - min) / (max - min)) * 100}%`;
+	}
+
+	function getEnumThumbPosition() {
+		const index = getEnumIndex();
+		const stepSize = getEnumStepSize();
+		return `${index * stepSize}%`;
+	}
+
+	function getEnumRangeWidth() {
+		const index = getEnumIndex();
+		const stepSize = getEnumStepSize();
+		return `${index * stepSize}%`;
+	}
+
+	function getRangeThumbStartPosition() {
+		return `${((valueStart - min) / (max - min)) * 100}%`;
+	}
+
+	function getRangeThumbEndPosition() {
+		return `${((valueEnd - min) / (max - min)) * 100}%`;
+	}
+
+	function getRangeWidth() {
+		return `${((valueEnd - valueStart) / (max - min)) * 100}%`;
+	}
+
+	function getRangeLeft() {
+		return `${((valueStart - min) / (max - min)) * 100}%`;
+	}
+
+	function formatValue(val: number | string): string {
+		if (typeof val === 'string') return val;
+
+		const formatter = new Intl.NumberFormat('en-US', formatOptions);
+		return `${valuePrefix}${formatter.format(val)}${valueSuffix}`;
+	}
+
+	function calculateValueFromPosition(x: number): number {
+		const rect = trackElement.getBoundingClientRect();
+		const percentage = Math.max(0, Math.min(100, ((x - rect.left) / rect.width) * 100));
+		const rawValue = (percentage / 100) * (max - min) + min;
+		return Math.min(Math.max(min, Math.round(rawValue / step) * step), max);
+	}
+
+	function handleTrackClick(event: MouseEvent) {
+		if (disabled) return;
+
+		const newValue = calculateValueFromPosition(event.clientX);
+
+		if (mode === 'enum') {
+			const percentage = ((newValue - min) / (max - min)) * 100;
+			const index = Math.round(percentage / getEnumStepSize());
+			value = options[Math.min(Math.max(0, index), options.length - 1)].value;
+		} else if (mode === 'range') {
+			const distanceToStart = Math.abs(valueStart - newValue);
+			const distanceToEnd = Math.abs(valueEnd - newValue);
+
+			if (distanceToStart < distanceToEnd) {
+				valueStart = Math.min(newValue, valueEnd - step);
+			} else {
+				valueEnd = Math.max(newValue, valueStart + step);
+			}
+		} else {
+			value = newValue;
+		}
+	}
+
+	function handleThumbMouseDown(event: MouseEvent, thumb: ThumbType = 'single') {
+		if (disabled) return;
+		event.preventDefault();
+
+		isDragging = true;
+		activeThumb = thumb;
+
+		window.addEventListener('mousemove', handleGlobalMouseMove);
+		window.addEventListener('mouseup', handleGlobalMouseUp);
+		document.body.style.userSelect = 'none';
+	}
+
+	function handleGlobalMouseMove(event: MouseEvent) {
+		if (!isDragging || disabled) return;
+		event.preventDefault();
+
+		const newValue = calculateValueFromPosition(event.clientX);
+
+		if (mode === 'enum') {
+			const percentage = ((newValue - min) / (max - min)) * 100;
+			const index = Math.round(percentage / getEnumStepSize());
+			if (index >= 0 && index < options.length) {
+				value = options[index].value;
+			}
+		} else if (mode === 'range') {
+			if (activeThumb === 'start') {
+				valueStart = Math.min(newValue, valueEnd - step);
+			} else {
+				valueEnd = Math.max(newValue, valueStart + step);
+			}
+		} else {
+			value = newValue;
+		}
+	}
+
+	function handleGlobalMouseUp(event: MouseEvent) {
+		if (!isDragging) return;
+		event.preventDefault();
+
+		isDragging = false;
+		window.removeEventListener('mousemove', handleGlobalMouseMove);
+		window.removeEventListener('mouseup', handleGlobalMouseUp);
+		document.body.style.userSelect = '';
+	}
+
+	function handleKeydown(event: KeyboardEvent, thumb: ThumbType = 'single') {
+		if (disabled) return;
+
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+			event.preventDefault();
+			const direction = event.key === 'ArrowLeft' ? -1 : 1;
+
+			if (mode === 'enum') {
+				const currentIndex = options.findIndex((opt) => opt.value === value);
+				const newIndex = Math.min(Math.max(0, currentIndex + direction), options.length - 1);
+				value = options[newIndex].value;
+			} else if (mode === 'range') {
+				if (thumb === 'start') {
+					const newValue = valueStart + direction * step;
+					valueStart = Math.min(Math.max(min, newValue), valueEnd - step);
+				} else {
+					const newValue = valueEnd + direction * step;
+					valueEnd = Math.max(Math.min(max, newValue), valueStart + step);
+				}
+			} else {
+				const newValue = (typeof value === 'number' ? value : min) + direction * step;
+				value = Math.min(Math.max(min, newValue), max);
+			}
+		}
+	}
+
+	$effect(() => {
+		if (errors.length) {
+			trackElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	});
+</script>
+
+<input type="hidden" name={`${name}[value]`} bind:value />
+{#if mode === 'range'}
+	<input type="hidden" name={`${name}[start]`} bind:value={valueStart} />
+	<input type="hidden" name={`${name}[end]`} bind:value={valueEnd} />
+{/if}
+<input type="hidden" name={`${name}[mode]`} bind:value={mode} />
+
+<div class={baseClass}>
+	<div class="flex items-center justify-between">
+		{#if label}
+			<label for={name} class={labelClass_}>{label}</label>
+		{/if}
+		{#if showValue && mode !== 'enum'}
+			<div class={valueClass_}>
+				{#if mode === 'range'}
+					<span>{formatValue(valueStart)}</span>
+					<span class="mx-1">-</span>
+					<span>{formatValue(valueEnd)}</span>
+				{:else}
+					<span>{formatValue(value)}</span>
+				{/if}
+			</div>
+		{:else if showValue && mode === 'enum'}
+			<div class={valueClass_}>
+				<span>{options[getEnumIndex()]?.label || ''}</span>
+			</div>
+		{/if}
+	</div>
+
+	<div
+		bind:this={trackElement}
+		class={trackClass}
+		role={mode === 'range' ? 'group' : 'slider'}
+		aria-disabled={disabled}
+		aria-label={label}
+		onclick={handleTrackClick}
+	>
+		{#if mode === 'range'}
+			<div class={rangeClass} style="width: {getRangeWidth()}; left: {getRangeLeft()}"></div>
+			<div
+				class={thumbClass}
+				style="left: {getRangeThumbStartPosition()}"
+				role="slider"
+				aria-label="Minimum value"
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={valueStart}
+				tabindex={disabled ? -1 : 0}
+				onkeydown={(e) => handleKeydown(e, 'start')}
+				onmousedown={(e) => handleThumbMouseDown(e, 'start')}
+			></div>
+			<div
+				class={thumbClass}
+				style="left: {getRangeThumbEndPosition()}"
+				role="slider"
+				aria-label="Maximum value"
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={valueEnd}
+				tabindex={disabled ? -1 : 0}
+				onkeydown={(e) => handleKeydown(e, 'end')}
+				onmousedown={(e) => handleThumbMouseDown(e, 'end')}
+			></div>
+		{:else if mode === 'enum'}
+			<div class={rangeClass} style="width: {getEnumRangeWidth()}"></div>
+			<div
+				class={thumbClass}
+				style="left: {getEnumThumbPosition()}"
+				role="slider"
+				aria-valuemin={0}
+				aria-valuemax={options.length - 1}
+				aria-valuenow={getEnumIndex()}
+				tabindex={disabled ? -1 : 0}
+				onkeydown={handleKeydown}
+				onmousedown={(e) => handleThumbMouseDown(e, 'single')}
+			></div>
+			{#each options as option, i}
+				<div class={markClass} style="left: {(i / (options.length - 1)) * 100}%">
+					{option.label}
+				</div>
+			{/each}
+		{:else}
+			<div class={rangeClass} style="width: {getSingleRangeWidth()}"></div>
+			<div
+				class={thumbClass}
+				style="left: {getSingleThumbPosition()}"
+				role="slider"
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={typeof value === 'number' ? value : min}
+				tabindex={disabled ? -1 : 0}
+				onkeydown={handleKeydown}
+				onmousedown={(e) => handleThumbMouseDown(e, 'single')}
+			></div>
+		{/if}
+	</div>
+
+	{#if errors.length}
+		{#each errors as error}
+			<p class="mt-2.5 text-sm text-red-600" role="alert">
+				{error}
+			</p>
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { SliderProps } from '../index.js';
+declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "valueStart" | "valueEnd">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/forms/Tags.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import Badge from '../elements/badge/Badge.svelte';
+	import { Size } from '../variants.js';
+	import { cn } from '../helper/cls.js';
+	import type { TagsProps } from '../index.js';
+
+	let {
+		value = $bindable([]),
+		name,
+		label,
+		errors,
+		placeholder = 'Type and press enter to add tags...',
+		size = Size.BASE,
+		class: className = '',
+		suggestions = [],
+		onaddtag: onAddTag,
+		onremovetag: onRemoveTag
+	}: TagsProps = $props();
+
+	let inputValue = $state('');
+	let inputRef = $state<HTMLInputElement | null>(null);
+	let showSuggestions = $state(false);
+	let highlightedIndex = $state(-1);
+
+	const isUnselected = (suggestion: string) => !value.includes(suggestion);
+
+	const matchesInput = (suggestion: string) =>
+		!inputValue || suggestion.toLowerCase().includes(inputValue.toLowerCase());
+
+	const filteredSuggestions = $derived(
+		showSuggestions ? suggestions.filter(isUnselected).filter(matchesInput).slice(0, 5) : []
+	);
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (highlightedIndex >= 0 && highlightedIndex < filteredSuggestions.length) {
+				handleTagAddition(filteredSuggestions[highlightedIndex]);
+			} else {
+				const tag = inputValue.trim();
+				if (tag) handleTagAddition(tag);
+			}
+			return;
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			if (!showSuggestions) {
+				showSuggestions = true;
+				highlightedIndex = 0;
+				return;
+			}
+			highlightedIndex = Math.min(highlightedIndex + 1, filteredSuggestions.length - 1);
+			if (highlightedIndex === -1 && filteredSuggestions.length > 0) highlightedIndex = 0;
+			return;
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, -1);
+			return;
+		}
+
+		if (event.key === 'Escape') {
+			showSuggestions = false;
+			highlightedIndex = -1;
+		}
+	}
+
+	function handleTagAddition(tag: string) {
+		if (!value.includes(tag)) {
+			value = [...value, tag];
+			onAddTag?.(tag);
+		}
+		inputValue = '';
+		showSuggestions = false;
+		highlightedIndex = -1;
+	}
+
+	function handleTagRemoval(tag: string) {
+		value = value.filter((t) => t !== tag);
+		onRemoveTag?.(tag);
+		inputRef?.focus();
+	}
+
+	function handleFocusOut(event: FocusEvent) {
+		const target = event.currentTarget as HTMLElement;
+		if (!target.contains(event.relatedTarget as Node)) {
+			showSuggestions = false;
+			highlightedIndex = -1;
+		}
+	}
+
+	function handleFocusIn() {
+		showSuggestions = true;
+	}
+
+	function handleSuggestionHover(index: number) {
+		highlightedIndex = index;
+	}
+
+	function handleSuggestionSelect(suggestion: string) {
+		handleTagAddition(suggestion);
+	}
+
+	const containerClass = $derived(
+		cn(
+			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-sm px-3 py-2',
+			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+			{
+				'border-red-300 focus-within:border-red-500 focus-within:ring-red-500': errors?.length
+			},
+			className
+		)
+	);
+
+	const suggestionClass = $derived(
+		cn(
+			'absolute top-[calc(100%+8px)] right-0 left-0 z-50 max-h-[200px] overflow-auto rounded-lg border border-default-300 bg-white shadow-lg'
+		)
+	);
+
+	const suggestionItemClass = $derived((isHighlighted: boolean) =>
+		cn(
+			'flex w-full cursor-pointer items-center px-3 py-2 text-sm transition-colors',
+			isHighlighted && 'bg-default-50'
+		)
+	);
+</script>
+
+<div class="space-y-1">
+	{#if label}
+		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
+	{/if}
+	<div class={containerClass} onfocusout={handleFocusOut}>
+		{#each value as tag}
+			<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
+				{tag}
+			</Badge>
+		{/each}
+		<input
+			bind:this={inputRef}
+			bind:value={inputValue}
+			{name}
+			id={name}
+			{placeholder}
+			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-default-400', {
+				'text-sm': size === Size.SM,
+				'text-base': size === Size.BASE,
+				'text-lg': size === Size.LG
+			})}
+			type="text"
+			autocomplete="off"
+			onkeydown={handleKeydown}
+			onfocus={handleFocusIn}
+		/>
+
+		{#if showSuggestions && filteredSuggestions.length > 0}
+			<div class={suggestionClass}>
+				{#each filteredSuggestions as suggestion, i}
+					<button
+						type="button"
+						class={suggestionItemClass(i === highlightedIndex)}
+						onmousedown={() => handleSuggestionSelect(suggestion)}
+						onmouseover={() => handleSuggestionHover(i)}
+						onfocus={() => handleSuggestionHover(i)}
+						tabindex="-1"
+					>
+						{suggestion}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if errors?.length}
+		{#each errors as error}
+			<p class="text-sm text-red-600">{error}</p>
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { TagsProps } from '../index.js';
+declare const Tags: import("svelte").Component<TagsProps, {}, "value">;
+type Tags = ReturnType<typeof Tags>;
+export default Tags;

package/dist/forms/Toggle.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { Color, Size } from '../variants.js';
+	import type { ToggleProps } from '../index.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		disabled = false,
+		class: className = '',
+		size = Size.BASE,
+		color = Color.PRIMARY,
+		value = $bindable(false),
+		errors = [],
+		offColor = 'bg-default-200',
+		onColor,
+		...restProps
+	}: ToggleProps = $props();
+
+	const activeColor = $derived(
+		onColor ||
+			{
+				[Color.PRIMARY]: 'bg-primary-500',
+				[Color.SECONDARY]: 'bg-secondary-500',
+				[Color.SUCCESS]: 'bg-green-500',
+				[Color.DANGER]: 'bg-red-500',
+				[Color.WARNING]: 'bg-yellow-500',
+				[Color.INFO]: 'bg-blue-500',
+				[Color.DEFAULT]: 'bg-default-800'
+			}[color]
+	);
+
+	const toggleSize = $derived(
+		{
+			[Size.SM]: 'w-8 h-4',
+			[Size.BASE]: 'w-10 h-5',
+			[Size.LG]: 'w-12 h-6'
+		}[size]
+	);
+
+	const thumbSize = $derived(
+		{
+			[Size.SM]: 'h-3 w-3',
+			[Size.BASE]: 'h-4 w-4',
+			[Size.LG]: 'h-5 w-5'
+		}[size]
+	);
+
+	const thumbPosition = $derived(
+		{
+			[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
+			[Size.BASE]: value ? 'translate-x-5' : 'translate-x-0.5',
+			[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5'
+		}[size]
+	);
+
+	const toggleWrapperClasses = $derived(
+		cn(
+			'relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+			toggleSize,
+			value ? activeColor : offColor,
+			{
+				'opacity-50 cursor-not-allowed': disabled,
+				'cursor-pointer': !disabled,
+				'focus:ring-red-500': errors.length,
+				[`focus:ring-${color}-500`]: !errors.length
+			},
+			className
+		)
+	);
+
+	const thumbClasses = $derived(
+		cn(
+			'inline-block transform rounded-full bg-white transition-transform',
+			thumbSize,
+			thumbPosition
+		)
+	);
+
+	const labelClasses = $derived(
+		cn('text-sm font-medium', {
+			'text-default-700': !errors.length,
+			'text-red-600': errors.length,
+			'opacity-50': disabled
+		})
+	);
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			value = !value;
+		}
+	}
+</script>
+
+<div class="flex items-center">
+	{#if label}
+		<label for={id} class={cn('mr-3', labelClasses)}>{label}</label>
+	{/if}
+	<button
+		type="button"
+		role="switch"
+		aria-checked={value}
+		{id}
+		{name}
+		{disabled}
+		aria-invalid={!!errors.length}
+		aria-describedby={errors.length ? `${name}-errors` : undefined}
+		class={toggleWrapperClasses}
+		onclick={() => {
+			if (!disabled) value = !value;
+		}}
+		onkeydown={handleKeyDown}
+		tabindex={disabled ? -1 : 0}
+		{...restProps}
+	>
+		<span class={thumbClasses} aria-hidden="true"></span>
+		<input type="checkbox" class="hidden" {name} bind:checked={value} />
+	</button>
+</div>
+
+{#if errors.length}
+	<div id="{name}-errors" class="mt-1">
+		{#each errors as error (error)}
+			<p class="text-sm text-red-600" role="alert">
+				{error}
+			</p>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { ToggleProps } from '../index.js';
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "value">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;