@salmexio/ui 0.4.0 → 1.1.0

package/dist/forms/Textarea/Textarea.svelte

@@ -0,0 +1,615 @@
+<!--
+  @component Textarea
+
+  INFRARED — Multi-line text input with custom resize handle,
+  auto-resize, character count, validation states, and full accessibility.
+  Follows TextInput visual patterns.
+
+  @example
+  <Textarea label="Description" bind:value={desc} />
+  <Textarea label="Bio" autoResize maxRows={8} showCharCount maxLength={500} />
+  <Textarea label="Notes" resize="both" />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { tick, onMount } from 'svelte';
+
+type TextareaSize = 'sm' | 'md' | 'lg';
+type ResizeMode = 'none' | 'vertical' | 'horizontal' | 'both';
+
+interface Props {
+	id?: string;
+	name?: string;
+	label: string;
+	value?: string;
+	placeholder?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	error?: string;
+	hint?: string;
+	successMessage?: string;
+	maxLength?: number;
+	minLength?: number;
+	showCharCount?: boolean;
+	rows?: number;
+	minRows?: number;
+	maxRows?: number;
+	autoResize?: boolean;
+	/** Manual resize direction. Ignored when autoResize is true. */
+	resize?: ResizeMode;
+	size?: TextareaSize;
+	hideLabel?: boolean;
+	class?: string;
+	oninput?: (event: Event) => void;
+	onblur?: (event: FocusEvent) => void;
+	onfocus?: (event: FocusEvent) => void;
+	testId?: string;
+}
+
+let {
+	id = `textarea-${Math.random().toString(36).slice(2, 9)}`,
+	name,
+	label,
+	value = $bindable(''),
+	placeholder = '',
+	required = false,
+	disabled = false,
+	readonly = false,
+	error = '',
+	hint = '',
+	successMessage = '',
+	maxLength,
+	minLength,
+	showCharCount = false,
+	rows = 3,
+	minRows,
+	maxRows,
+	autoResize = false,
+	resize = 'vertical',
+	size = 'md',
+	hideLabel = false,
+	class: className = '',
+	oninput,
+	onblur,
+	onfocus,
+	testId
+}: Props = $props();
+
+let textareaEl = $state<HTMLTextAreaElement | null>(null);
+let wrapperEl = $state<HTMLElement | null>(null);
+let isFocused = $state(false);
+let isDragging = $state(false);
+
+const errorId = $derived(`${id}-error`);
+const hintId = $derived(`${id}-hint`);
+const successId = $derived(`${id}-success`);
+const charCountId = $derived(`${id}-charcount`);
+
+const charCount = $derived(value.length);
+const charWarning = $derived(maxLength ? charCount >= maxLength * 0.9 : false);
+const charExceeded = $derived(maxLength ? charCount > maxLength : false);
+
+const effectiveResize = $derived<ResizeMode>(autoResize ? 'none' : resize);
+const showHandle = $derived(effectiveResize !== 'none' && !disabled);
+const resizeVertical = $derived(effectiveResize === 'vertical' || effectiveResize === 'both');
+const resizeHorizontal = $derived(effectiveResize === 'horizontal' || effectiveResize === 'both');
+
+const describedBy = $derived(
+	[
+		error ? errorId : null,
+		successMessage && !error ? successId : null,
+		hint && !error && !successMessage ? hintId : null,
+		showCharCount ? charCountId : null
+	]
+		.filter(Boolean)
+		.join(' ') || undefined
+);
+
+function handleInput(e: Event) {
+	if (autoResize) adjustHeight();
+	oninput?.(e);
+}
+
+function handleFocus(e: FocusEvent) {
+	isFocused = true;
+	onfocus?.(e);
+}
+
+function handleBlur(e: FocusEvent) {
+	isFocused = false;
+	onblur?.(e);
+}
+
+// ── Auto-resize ──
+
+function adjustHeight() {
+	if (!textareaEl) return;
+	textareaEl.style.height = 'auto';
+
+	const style = getComputedStyle(textareaEl);
+	const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5;
+	const paddingTop = parseFloat(style.paddingTop);
+	const paddingBottom = parseFloat(style.paddingBottom);
+	const borderTop = parseFloat(style.borderTopWidth);
+	const borderBottom = parseFloat(style.borderBottomWidth);
+	const extra = paddingTop + paddingBottom + borderTop + borderBottom;
+
+	const effectiveMinRows = minRows ?? rows;
+	const minH = lineHeight * effectiveMinRows + extra;
+	let maxH = Infinity;
+	if (maxRows) {
+		maxH = lineHeight * maxRows + extra;
+	}
+
+	const scrollH = textareaEl.scrollHeight;
+	const height = Math.max(minH, Math.min(scrollH, maxH));
+	textareaEl.style.height = `${height}px`;
+}
+
+$effect(() => {
+	if (autoResize && textareaEl) {
+		void value;
+		tick().then(adjustHeight);
+	}
+});
+
+// ── Custom resize handle ──
+
+let startX = 0;
+let startY = 0;
+let startW = 0;
+let startH = 0;
+const MIN_HEIGHT = 48;
+const MIN_WIDTH = 120;
+
+function onHandlePointerDown(e: PointerEvent) {
+	if (disabled || effectiveResize === 'none') return;
+	e.preventDefault();
+
+	const wrapper = wrapperEl;
+	if (!wrapper) return;
+
+	isDragging = true;
+	startX = e.clientX;
+	startY = e.clientY;
+	startW = wrapper.offsetWidth;
+	startH = wrapper.offsetHeight;
+
+	(e.target as HTMLElement).setPointerCapture(e.pointerId);
+}
+
+function onHandlePointerMove(e: PointerEvent) {
+	if (!isDragging || !wrapperEl) return;
+
+	if (resizeHorizontal) {
+		const newW = Math.max(MIN_WIDTH, startW + (e.clientX - startX));
+		wrapperEl.style.width = `${newW}px`;
+	}
+
+	if (resizeVertical) {
+		const newH = Math.max(MIN_HEIGHT, startH + (e.clientY - startY));
+		wrapperEl.style.height = `${newH}px`;
+		if (textareaEl) {
+			textareaEl.style.height = '100%';
+		}
+	}
+}
+
+function onHandlePointerUp() {
+	isDragging = false;
+}
+
+// If resize mode includes vertical, set the wrapper to a measured initial height
+// so the textarea fills it and the custom handle works naturally.
+onMount(() => {
+	if (effectiveResize !== 'none' && wrapperEl && textareaEl) {
+		// Let the textarea render at its natural size, then pin the wrapper
+		const naturalH = wrapperEl.offsetHeight;
+		wrapperEl.style.height = `${naturalH}px`;
+		textareaEl.style.height = '100%';
+	}
+});
+</script>
+
+<div class={cn('sx-textarea-wrapper', disabled && 'sx-textarea-disabled-wrap', className)}>
+	<label
+		for={id}
+		class={cn('sx-textarea-label', hideLabel && 'sx-sr-only')}
+	>
+		{label}
+		{#if required}
+			<span class="sx-textarea-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<div
+		bind:this={wrapperEl}
+		class={cn(
+			'sx-textarea-field-wrapper',
+			`sx-textarea-${size}`,
+			isFocused && 'sx-textarea-focused',
+			error && 'sx-textarea-error-state',
+			successMessage && !error && 'sx-textarea-success-state',
+			disabled && 'sx-textarea-disabled',
+			showHandle && 'sx-textarea-resizable',
+			isDragging && 'sx-textarea-dragging'
+		)}
+	>
+		<textarea
+			bind:this={textareaEl}
+			bind:value
+			{id}
+			{name}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{rows}
+			maxlength={maxLength}
+			minlength={minLength}
+			class={cn('sx-textarea-input', autoResize && 'sx-textarea-autoresize')}
+			aria-required={required || undefined}
+			aria-invalid={error ? 'true' : undefined}
+			aria-describedby={describedBy}
+			data-testid={testId}
+			oninput={handleInput}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+		></textarea>
+
+		{#if showHandle}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<span
+				class={cn(
+					'sx-textarea-handle',
+					`sx-textarea-handle-${effectiveResize}`,
+					isDragging && 'sx-textarea-handle-active'
+				)}
+				aria-hidden="true"
+				onpointerdown={onHandlePointerDown}
+				onpointermove={onHandlePointerMove}
+				onpointerup={onHandlePointerUp}
+				onpointercancel={onHandlePointerUp}
+			>
+				<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+					{#if effectiveResize === 'horizontal'}
+						<!-- Horizontal dots -->
+						<circle cx="2" cy="5" r="1" fill="currentColor" />
+						<circle cx="5" cy="5" r="1" fill="currentColor" />
+						<circle cx="8" cy="5" r="1" fill="currentColor" />
+					{:else if effectiveResize === 'vertical'}
+						<!-- Vertical dots -->
+						<circle cx="5" cy="2" r="1" fill="currentColor" />
+						<circle cx="5" cy="5" r="1" fill="currentColor" />
+						<circle cx="5" cy="8" r="1" fill="currentColor" />
+					{:else}
+						<!-- Diagonal grip (both) -->
+						<circle cx="8" cy="2" r="1" fill="currentColor" />
+						<circle cx="5" cy="5" r="1" fill="currentColor" />
+						<circle cx="8" cy="5" r="1" fill="currentColor" />
+						<circle cx="2" cy="8" r="1" fill="currentColor" />
+						<circle cx="5" cy="8" r="1" fill="currentColor" />
+						<circle cx="8" cy="8" r="1" fill="currentColor" />
+					{/if}
+				</svg>
+			</span>
+		{/if}
+	</div>
+
+	<div class="sx-textarea-footer">
+		<div class="sx-textarea-messages">
+			{#if error}
+				<p id={errorId} class="sx-textarea-error-msg" role="alert">
+					<svg class="sx-textarea-msg-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+						<circle cx="12" cy="12" r="10" /><path d="M15 9l-6 6M9 9l6 6" />
+					</svg>
+					{error}
+				</p>
+			{:else if successMessage}
+				<p id={successId} class="sx-textarea-success-msg" aria-live="polite">
+					<svg class="sx-textarea-msg-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+						<circle cx="12" cy="12" r="10" /><path d="M9 12l2 2 4-4" />
+					</svg>
+					{successMessage}
+				</p>
+			{:else if hint}
+				<p id={hintId} class="sx-textarea-hint">{hint}</p>
+			{/if}
+		</div>
+
+		{#if showCharCount}
+			<span
+				id={charCountId}
+				class={cn(
+					'sx-textarea-charcount',
+					charWarning && 'sx-textarea-charcount-warning',
+					charExceeded && 'sx-textarea-charcount-exceeded'
+				)}
+				aria-live="polite"
+			>
+				{charCount}{maxLength ? `/${maxLength}` : ''}
+			</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.sx-textarea-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1-5);
+		width: 100%;
+	}
+
+	/* Label */
+	.sx-textarea-label {
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		font-weight: 600;
+		color: var(--sx-color-text);
+		line-height: var(--sx-leading-normal);
+	}
+
+	.sx-textarea-required {
+		color: var(--sx-color-red);
+		margin-left: var(--sx-space-0-5);
+	}
+
+	.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;
+	}
+
+	/* Field wrapper */
+	.sx-textarea-field-wrapper {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		overflow: hidden;
+		transition:
+			border-color var(--sx-transition-fast),
+			box-shadow var(--sx-transition-fast);
+	}
+
+	.sx-textarea-resizable {
+		overflow: hidden;
+	}
+
+	.sx-textarea-field-wrapper:hover:not(.sx-textarea-disabled):not(.sx-textarea-focused):not(.sx-textarea-error-state) {
+		border-color: var(--sx-color-border-hover);
+	}
+
+	.sx-textarea-focused {
+		border-color: var(--sx-color-primary);
+		box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
+	}
+
+	.sx-textarea-error-state {
+		border-color: var(--sx-color-red);
+		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+	}
+
+	.sx-textarea-success-state {
+		border-color: var(--sx-color-green);
+	}
+
+	.sx-textarea-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background: var(--sx-color-surface-2);
+	}
+
+	.sx-textarea-dragging {
+		user-select: none;
+	}
+
+	/* Textarea input — always hide native resize */
+	.sx-textarea-input {
+		width: 100%;
+		flex: 1;
+		min-height: 0;
+		border: none;
+		background: transparent;
+		outline: none;
+		resize: none;
+		font-family: var(--sx-font-body);
+		color: var(--sx-color-text);
+		line-height: var(--sx-leading-relaxed);
+	}
+
+	.sx-textarea-input::placeholder {
+		color: var(--sx-color-text-disabled);
+	}
+
+	.sx-textarea-input:focus-visible {
+		box-shadow: none;
+	}
+
+	.sx-textarea-autoresize {
+		flex: none;
+		overflow-y: hidden;
+	}
+
+	.sx-textarea-input:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Sizes */
+	.sx-textarea-sm .sx-textarea-input {
+		padding: var(--sx-space-2) var(--sx-space-3);
+		font-size: var(--sx-text-xs);
+	}
+
+	.sx-textarea-md .sx-textarea-input {
+		padding: var(--sx-space-3) var(--sx-space-4);
+		font-size: var(--sx-text-sm);
+	}
+
+	.sx-textarea-lg .sx-textarea-input {
+		padding: var(--sx-space-4) var(--sx-space-5);
+		font-size: var(--sx-text-base);
+	}
+
+	/* ── Custom resize handle ── */
+
+	.sx-textarea-handle {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--sx-color-text-disabled);
+		touch-action: none;
+		z-index: 1;
+		transition: color var(--sx-transition-fast), background var(--sx-transition-fast);
+	}
+
+	.sx-textarea-handle:hover,
+	.sx-textarea-handle-active {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-textarea-handle-active {
+		color: var(--sx-color-primary);
+	}
+
+	/* Vertical: bar along the bottom edge */
+	.sx-textarea-handle-vertical {
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 14px;
+		cursor: ns-resize;
+		border-radius: 0 0 var(--sx-radius-md) var(--sx-radius-md);
+	}
+
+	.sx-textarea-handle-vertical:hover,
+	.sx-textarea-handle-vertical.sx-textarea-handle-active {
+		background: var(--sx-color-surface-2);
+	}
+
+	/* Horizontal: bar along the right edge */
+	.sx-textarea-handle-horizontal {
+		top: 0;
+		bottom: 0;
+		right: 0;
+		width: 14px;
+		cursor: ew-resize;
+		border-radius: 0 var(--sx-radius-md) var(--sx-radius-md) 0;
+	}
+
+	.sx-textarea-handle-horizontal:hover,
+	.sx-textarea-handle-horizontal.sx-textarea-handle-active {
+		background: var(--sx-color-surface-2);
+	}
+
+	/* Both: corner grip at bottom-right */
+	.sx-textarea-handle-both {
+		bottom: 0;
+		right: 0;
+		width: 18px;
+		height: 18px;
+		cursor: nwse-resize;
+		border-radius: 0 0 calc(var(--sx-radius-md) - 1px) 0;
+	}
+
+	.sx-textarea-handle-both:hover,
+	.sx-textarea-handle-both.sx-textarea-handle-active {
+		background: var(--sx-color-surface-2);
+	}
+
+	/* Footer */
+	.sx-textarea-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: var(--sx-space-4);
+		min-height: 0;
+	}
+
+	.sx-textarea-messages {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.sx-textarea-error-msg,
+	.sx-textarea-success-msg,
+	.sx-textarea-hint {
+		margin: 0;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-xs);
+		line-height: var(--sx-leading-relaxed);
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-1);
+	}
+
+	.sx-textarea-error-msg {
+		color: var(--sx-color-red);
+	}
+
+	.sx-textarea-success-msg {
+		color: var(--sx-color-green);
+	}
+
+	.sx-textarea-hint {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-textarea-msg-icon {
+		flex-shrink: 0;
+	}
+
+	/* Character count */
+	.sx-textarea-charcount {
+		flex-shrink: 0;
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sx-textarea-charcount-warning {
+		color: var(--sx-color-secondary);
+	}
+
+	.sx-textarea-charcount-exceeded {
+		color: var(--sx-color-red);
+		font-weight: 600;
+	}
+
+	/* Disabled wrapper */
+	.sx-textarea-disabled-wrap .sx-textarea-label {
+		opacity: 0.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-textarea-field-wrapper {
+			transition: none;
+		}
+
+		.sx-textarea-handle {
+			transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sx-textarea-handle {
+			color: ButtonText;
+		}
+
+		.sx-textarea-handle-active {
+			color: Highlight;
+		}
+	}
+</style>

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

@@ -0,0 +1,47 @@
+type TextareaSize = 'sm' | 'md' | 'lg';
+type ResizeMode = 'none' | 'vertical' | 'horizontal' | 'both';
+interface Props {
+    id?: string;
+    name?: string;
+    label: string;
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: string;
+    hint?: string;
+    successMessage?: string;
+    maxLength?: number;
+    minLength?: number;
+    showCharCount?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
+    autoResize?: boolean;
+    /** Manual resize direction. Ignored when autoResize is true. */
+    resize?: ResizeMode;
+    size?: TextareaSize;
+    hideLabel?: boolean;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    testId?: string;
+}
+/**
+ * Textarea
+ *
+ * INFRARED — Multi-line text input with custom resize handle,
+ * auto-resize, character count, validation states, and full accessibility.
+ * Follows TextInput visual patterns.
+ *
+ * @example
+ * <Textarea label="Description" bind:value={desc} />
+ * <Textarea label="Bio" autoResize maxRows={8} showCharCount maxLength={500} />
+ * <Textarea label="Notes" resize="both" />
+ */
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;
+//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/forms/Textarea/Textarea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.svelte.ts"],"names":[],"mappings":"AAOA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAE9D,UAAU,KAAK;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuQD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/forms/Textarea/index.d.ts

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

package/dist/forms/Textarea/index.d.ts.map

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

package/dist/forms/Textarea/index.js

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