@makolabs/ripple 0.0.1-dev.6 → 0.0.1-dev.8

package/dist/forms/NumberInput.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { Size } from '../variants.js';
+	import type { NumberInputProps } from '../index.js';
+
+	let {
+		value = $bindable(0),
+		unit = $bindable('USD'),
+		name,
+		label,
+		placeholder = 'Enter a number',
+		size = Size.BASE,
+		class: className = '',
+		units = [],
+		errors,
+		disabled = false,
+		dropdownicon: DropdownIcon,
+		onunitchange: onUnitChange,
+		...restProps
+	}: NumberInputProps = $props();
+
+	let showUnitDropdown = $state(false);
+	let containerRef = $state<HTMLDivElement | null>(null);
+
+	const selectedOption = $derived(units.find((u) => u.value === unit));
+
+	const containerClass = $derived(
+		cn(
+			'relative flex items-center gap-1 rounded-lg border bg-white shadow-sm',
+			{
+				'border-danger-300': errors?.length,
+				'cursor-not-allowed opacity-50': disabled
+			},
+			{
+				'h-8': size === Size.SM,
+				'h-10': size === Size.BASE,
+				'h-12': size === Size.LG
+			},
+			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+			className
+		)
+	);
+
+	const inputClass = $derived(
+		cn('w-full bg-transparent outline-none disabled:cursor-not-allowed px-3', {
+			'text-sm': size === Size.SM,
+			'text-base': size === Size.BASE,
+			'text-lg': size === Size.LG
+		})
+	);
+
+	const dropdownClass = cn(
+		'absolute right-0 top-full z-50 mt-1 max-h-[200px] w-[100px] overflow-auto rounded-md border bg-white shadow-lg'
+	);
+
+	const iconClass = $derived(
+		cn('h-4 w-4 transition-transform', { 'rotate-180': showUnitDropdown })
+	);
+
+	function handleUnitSelect(selectedUnit: string) {
+		onUnitChange?.(unit, selectedUnit);
+		unit = selectedUnit;
+		showUnitDropdown = false;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as Node;
+		if (containerRef && !containerRef.contains(target)) {
+			showUnitDropdown = false;
+		}
+	}
+
+	function handleUnitToggle() {
+		showUnitDropdown = !showUnitDropdown;
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div class="space-y-1">
+	{#if label}
+		<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+	{/if}
+	<div class={containerClass} bind:this={containerRef}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			class="text-default-500 ml-3 size-4 flex-shrink-0"
+		>
+			<path
+				fill="none"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M17 9V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2m2 4h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m7-5a2 2 0 1 1-4 0a2 2 0 0 1 4 0"
+			/>
+		</svg>
+		<input
+			{name}
+			id={name}
+			bind:value
+			type="number"
+			{placeholder}
+			{disabled}
+			class={inputClass}
+			{...restProps}
+		/>
+
+		<button
+			type="button"
+			class="hover:bg-default-100 flex items-center gap-1 rounded px-1"
+			onclick={handleUnitToggle}
+			{disabled}
+		>
+			{#if selectedOption?.icon}
+				{@const Icon = selectedOption.icon}
+				<Icon />
+			{/if}
+			<span class="text-sm">{unit}</span>
+			{#if DropdownIcon}
+				<DropdownIcon class={iconClass} />
+			{:else}
+				<svg class={iconClass} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+				</svg>
+			{/if}
+		</button>
+
+		{#if showUnitDropdown}
+			<div class={dropdownClass}>
+				{#each units as unitOption}
+					<button
+						type="button"
+						class="hover:bg-default-100 w-full px-3 py-1.5 text-left text-sm"
+						class:bg-default-50={unit === unitOption.value}
+						onclick={() => handleUnitSelect(unitOption.value)}
+					>
+						<div class="flex items-center gap-2">
+							{#if unitOption.icon}
+								{@const Icon = unitOption.icon}
+								<Icon />
+							{/if}
+							{unitOption.value}
+						</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if errors?.length}
+		{#each errors as error}
+			<p class="text-danger-600 text-sm">{error}</p>
+		{/each}
+	{/if}
+</div>

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

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

package/dist/forms/RadioInputs.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { RadioInputsProps } from '../index.js';
+
+	let {
+		name,
+		label,
+		options,
+		value = $bindable(),
+		disabled = false,
+		class: className = '',
+		errors = [],
+		required = false
+	}: RadioInputsProps = $props();
+
+	const containerClass = $derived(cn('space-y-2', className));
+
+	const radioClass = $derived(
+		cn('w-4 h-4 text-primary-600 border-gray-300 focus:ring-primary-500', {
+			'opacity-50 cursor-not-allowed': disabled,
+			'border-red-300 focus:ring-red-500': errors.length
+		})
+	);
+
+	const labelClass = $derived(
+		cn('block text-sm font-medium', {
+			'text-gray-700': !errors.length,
+			'text-red-600': errors.length
+		})
+	);
+</script>
+
+<div class={containerClass}>
+	{#if label}
+		<label class={labelClass} for={`${name}-${value || options[0].value}`}>{label}</label>
+	{/if}
+	<div class="space-y-2">
+		{#each options as option}
+			<div class="flex items-center gap-2">
+				<input
+					type="radio"
+					{name}
+					id={`${name}-${option.value}`}
+					value={option.value}
+					bind:group={value}
+					class={radioClass}
+					{disabled}
+					{required}
+					aria-describedby={errors.length ? `${name}-errors` : undefined}
+				/>
+				<label for={`${name}-${option.value}`} class="text-sm text-gray-700">
+					{option.label}
+				</label>
+			</div>
+		{/each}
+	</div>
+	{#if errors.length}
+		{#each errors as error (error)}
+			<p id={`${name}-errors`} class="mt-1 text-sm text-red-600" role="alert">
+				{error}
+			</p>
+		{/each}
+	{/if}
+</div>

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

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

package/dist/forms/RadioPill.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { RadioPillProps } from '../index.js';
+
+	let {
+		options = [],
+		value = $bindable(options.length > 0 ? options[0].value : ''),
+		name = '',
+		class: className = '',
+		errors = [],
+		onchange = undefined,
+		label = ''
+	}: RadioPillProps = $props();
+
+	function handleSelect(optionValue: string) {
+		value = optionValue;
+		if (onchange) onchange(optionValue);
+	}
+
+	let pillDivRef: HTMLDivElement;	
+	const hasError = $derived(errors && errors.length > 0);
+
+	$effect(() => {
+		if (errors.length) {
+			pillDivRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	});
+</script>
+
+<div class={cn('flex flex-col space-y-2', className)} bind:this={pillDivRef}>
+	{#if hasError}
+		<div class="text-danger-500 text-sm">{errors[0]}</div>
+	{/if}
+	{#if label}
+		<label
+			class={cn('text-sm font-medium', hasError ? 'text-danger-500' : 'text-default-700')}
+			for={value}>{label}</label
+		>
+	{/if}
+	<div class="inline-flex flex-wrap gap-2">
+		{#each options as option}
+			<button
+				id={option.value}
+				type="button"
+				onclick={() => handleSelect(option.value)}
+				class={cn(
+					'border-default-200 cursor-pointer rounded-lg border px-4 py-2 text-sm font-medium transition-all',
+					{
+						'border-info-600 bg-info-600 text-white': value === option.value && !hasError,
+						'border-danger-500 bg-danger-500 text-white': value === option.value && hasError,
+						'text-default-800 hover:border-default-300 bg-white':
+							value !== option.value && !hasError,
+						'border-danger-500 text-danger-500 hover:bg-danger-50':
+							value !== option.value && hasError,
+						'text-default-400': value !== option.value && option.value === '128' && !hasError
+					}
+				)}
+				aria-pressed={value === option.value}
+			>
+				{option.label}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<input type="hidden" {name} {value} />

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

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

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;