@mrintel/villain-ui 0.7.8 → 0.8.0

package/dist/components/forms/Input.svelte

@@ -1,6 +1,10 @@
-<script lang="ts">import { createId } from '../../lib/internal/id.js';
+<script lang="ts">import { createId } from '../../lib/internal/id';
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
-let { type = 'text', name, value = $bindable(), placeholder, disabled = false, error = false, label, id = createId('input'), autocomplete, oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, class: className = '', } = $props();
+let { type = 'text', name, value = $bindable(), placeholder, disabled = false, error = false, label, id = createId('input'), autocomplete, oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, revealable = false, min, max, step = 1, class: className = '', } = $props();
+// Password reveal toggle (revealable only applies to type="password")
+let revealed = $state(false);
+const showReveal = $derived(revealable && type === 'password');
+const effectiveType = $derived(showReveal && revealed ? 'text' : type);
 // Built-in validation patterns
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
@@ -65,15 +69,22 @@ $effect(() => {
 });
 const hasError = $derived(error || (validationError !== null));
 const errorClasses = $derived(hasError ? 'error-state' : '');
+function clamp(n) {
+    if (min !== undefined && n < min)
+        return min;
+    if (max !== undefined && n > max)
+        return max;
+    return n;
+}
 function increment() {
     if (disabled || type !== 'number')
         return;
-    value = Number(value || 0) + 1;
+    value = clamp(Number(value || 0) + step);
 }
 function decrement() {
     if (disabled || type !== 'number')
         return;
-    value = Number(value || 0) - 1;
+    value = clamp(Number(value || 0) - step);
 }
 </script>
 
@@ -94,23 +105,60 @@ function decrement() {
 
 			<!-- INPUT FIELD -->
 			<input
-				{type}
+				type={effectiveType}
 				{name}
 				{id}
 				{placeholder}
 				{disabled}
 				{autocomplete}
+				min={type === 'number' ? min : undefined}
+				max={type === 'number' ? max : undefined}
+				step={type === 'number' ? step : undefined}
 				bind:value
 				{oninput}
 				class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
 					? disabledClasses
 					: ''} {className}"
 				class:pl-12={iconBefore}
-				class:pr-12={iconAfter || type === 'number'}
+				class:pr-12={iconAfter || showReveal || type === 'number'}
 			/>
 
 			<!-- AFTER ICON (non-number) -->
-			{#if iconAfter && type !== 'number'}
+			{#if showReveal}
+				<button
+					type="button"
+					onclick={() => (revealed = !revealed)}
+					class="absolute right-4 z-10 inline-flex cursor-pointer items-center justify-center text-text-soft transition-colors hover:text-[var(--color-text)]"
+					aria-label={revealed ? 'Hide password' : 'Show password'}
+					aria-pressed={revealed}
+				>
+					{#if revealed}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+					{:else}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						</svg>
+					{/if}
+				</button>
+			{:else if iconAfter && type !== 'number'}
 				<span
 					class="absolute right-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
 				>
@@ -158,22 +206,59 @@ function decrement() {
 			{/if}
 
 			<input
-				{type}
+				type={effectiveType}
 				{name}
 				{id}
 				{placeholder}
 				{disabled}
 				{autocomplete}
+				min={type === 'number' ? min : undefined}
+				max={type === 'number' ? max : undefined}
+				step={type === 'number' ? step : undefined}
 				bind:value
 				{oninput}
 				class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
 					? disabledClasses
 					: ''} {className}"
 				class:pl-12={iconBefore}
-				class:pr-12={iconAfter || type === 'number'}
+				class:pr-12={iconAfter || showReveal || type === 'number'}
 			/>
 
-			{#if iconAfter && type !== 'number'}
+			{#if showReveal}
+				<button
+					type="button"
+					onclick={() => (revealed = !revealed)}
+					class="absolute right-4 z-10 inline-flex cursor-pointer items-center justify-center text-text-soft transition-colors hover:text-[var(--color-text)]"
+					aria-label={revealed ? 'Hide password' : 'Show password'}
+					aria-pressed={revealed}
+				>
+					{#if revealed}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+					{:else}
+						<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						</svg>
+					{/if}
+				</button>
+			{:else if iconAfter && type !== 'number'}
 				<span
 					class="absolute right-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
 				>

package/dist/components/forms/Input.svelte.d.ts

@@ -14,6 +14,14 @@ export interface Props {
     validate?: (value: string | number) => boolean | string;
     validationMessage?: string;
     showValidation?: boolean;
+    /** Password inputs only: show an eye toggle to reveal the value. Replaces iconAfter. */
+    revealable?: boolean;
+    /** Number inputs only: lower bound enforced by the stepper arrows. */
+    min?: number;
+    /** Number inputs only: upper bound enforced by the stepper arrows. */
+    max?: number;
+    /** Number inputs only: stepper arrow increment. @default 1 */
+    step?: number;
     class?: string;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/RadioGroup.svelte

@@ -1,5 +1,7 @@
-<script lang="ts">let { value = $bindable(), options, name, disabled = false, orientation = 'vertical', label, onchange, class: className = '' } = $props();
+<script lang="ts">let { value = $bindable(), options, name, disabled = false, error = false, orientation = 'vertical', label, onchange, validationMessage, class: className = '' } = $props();
+const hasError = $derived(error || !!validationMessage);
 const containerClasses = $derived(orientation === 'vertical' ? 'flex flex-col gap-3' : 'flex flex-row gap-4');
+const borderClass = $derived(hasError ? 'border-[var(--color-error)]' : 'border-[var(--color-border-strong)]');
 export {};
 </script>
 
@@ -20,7 +22,7 @@ export {};
             {disabled}
             bind:group={value}
             onchange={onchange}
-            class="w-6 h-6 rounded-[var(--radius-pill)] border-2 border-[var(--color-border-strong)] bg-transparent appearance-none transition-all duration-200 ease-[var(--ease-luxe)] cursor-pointer checked:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)] focus:ring-offset-2 focus:ring-offset-[var(--color-base-1)] relative {disabled ? 'cursor-not-allowed' : ''}"
+            class="w-6 h-6 rounded-[var(--radius-pill)] border-2 {borderClass} bg-transparent appearance-none transition-all duration-200 ease-[var(--ease-luxe)] cursor-pointer checked:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)] focus:ring-offset-2 focus:ring-offset-[var(--color-base-1)] relative {disabled ? 'cursor-not-allowed' : ''}"
           />
           {#if option.iconBefore}
             <span class="inline-flex items-center justify-center text-text-soft">
@@ -33,32 +35,40 @@ export {};
         </label>
       {/each}
     </div>
+    {#if validationMessage}
+      <p class="text-error text-xs mt-2">{validationMessage}</p>
+    {/if}
   </fieldset>
 {:else}
-  <div class="{containerClasses} {className}">
-    {#each options as option}
-      {@const radioId = `${name}-${option.value}`}
-      <label for={radioId} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
-        <input
-          type="radio"
-          id={radioId}
-          {name}
-          value={option.value}
-          {disabled}
-          bind:group={value}
-          onchange={onchange}
-          class="w-6 h-6 rounded-[var(--radius-pill)] border-2 border-[var(--color-border-strong)] bg-transparent appearance-none transition-all duration-200 ease-[var(--ease-luxe)] cursor-pointer checked:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)] focus:ring-offset-2 focus:ring-offset-[var(--color-base-1)] relative {disabled ? 'cursor-not-allowed' : ''}"
-        />
-        {#if option.iconBefore}
-          <span class="inline-flex items-center justify-center text-text-soft">
-            {@render option.iconBefore()}
+  <div>
+    <div class="{containerClasses} {className}">
+      {#each options as option}
+        {@const radioId = `${name}-${option.value}`}
+        <label for={radioId} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+          <input
+            type="radio"
+            id={radioId}
+            {name}
+            value={option.value}
+            {disabled}
+            bind:group={value}
+            onchange={onchange}
+            class="w-6 h-6 rounded-[var(--radius-pill)] border-2 {borderClass} bg-transparent appearance-none transition-all duration-200 ease-[var(--ease-luxe)] cursor-pointer checked:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)] focus:ring-offset-2 focus:ring-offset-[var(--color-base-1)] relative {disabled ? 'cursor-not-allowed' : ''}"
+          />
+          {#if option.iconBefore}
+            <span class="inline-flex items-center justify-center text-text-soft">
+              {@render option.iconBefore()}
+            </span>
+          {/if}
+          <span class="text-[var(--color-text)] text-sm select-none">
+            {option.label}
           </span>
-        {/if}
-        <span class="text-[var(--color-text)] text-sm select-none">
-          {option.label}
-        </span>
-      </label>
-    {/each}
+        </label>
+      {/each}
+    </div>
+    {#if validationMessage}
+      <p class="text-error text-xs mt-2">{validationMessage}</p>
+    {/if}
   </div>
 {/if}
 

package/dist/components/forms/RadioGroup.svelte.d.ts

@@ -7,9 +7,11 @@ export interface Props {
     }>;
     name: string;
     disabled?: boolean;
+    error?: boolean;
     orientation?: 'vertical' | 'horizontal';
     label?: string;
     onchange?: (event: Event) => void;
+    validationMessage?: string;
     class?: string;
 }
 declare const RadioGroup: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/RangeSlider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
-let { value = $bindable(0), min = 0, max = 100, step = 1, disabled = false, label, showValue = true, id = createId('range'), name, oninput } = $props();
+let { value = $bindable(0), min = 0, max = 100, step = 1, disabled = false, error = false, label, showValue = true, id = createId('range'), name, oninput, validationMessage } = $props();
+const hasError = $derived(error || !!validationMessage);
 const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
 </script>
 
@@ -32,8 +33,11 @@ const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 10
     aria-valuemax={max}
     aria-valuenow={value}
     class="w-full h-2 rounded-pill appearance-none cursor-pointer transition-opacity duration-200 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    style="background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) {percentage}%, var(--color-base-3) {percentage}%, var(--color-base-3) 100%); border: 1px solid var(--color-border);"
+    style="background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) {percentage}%, var(--color-base-3) {percentage}%, var(--color-base-3) 100%); border: 1px solid {hasError ? 'var(--color-error)' : 'var(--color-border)'};"
   />
+  {#if validationMessage}
+    <p class="text-error text-xs mt-1.5">{validationMessage}</p>
+  {/if}
 </div>
 
 <style>

package/dist/components/forms/RangeSlider.svelte.d.ts

@@ -4,11 +4,13 @@ interface Props {
     max?: number;
     step?: number;
     disabled?: boolean;
+    error?: boolean;
     label?: string;
     showValue?: boolean;
     id?: string;
     name?: string;
     oninput?: (event: Event) => void;
+    validationMessage?: string;
 }
 declare const RangeSlider: import("svelte").Component<Props, {}, "value">;
 type RangeSlider = ReturnType<typeof RangeSlider>;

package/dist/components/forms/Select.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
-let { value = $bindable(), options, placeholder, disabled = false, error = false, label, id = createId('select'), name, autocomplete, onchange, iconBefore, class: className = '', } = $props();
+let { value = $bindable(), options, placeholder, disabled = false, error = false, label, id = createId('select'), name, autocomplete, onchange, iconBefore, validationMessage, class: className = '', } = $props();
 const selectClasses = `${baseInputClasses} pr-12 appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:16px] cursor-pointer select-with-chevron`;
-const errorClasses = $derived(error ? 'error-state' : '');
+const hasError = $derived(error || !!validationMessage);
+const errorClasses = $derived(hasError ? 'error-state' : '');
 </script>
 
 {#if label}
@@ -42,39 +43,47 @@ const errorClasses = $derived(error ? 'error-state' : '');
 				{/each}
 			</select>
 		</div>
+		{#if validationMessage}
+			<p class="text-error text-xs mt-1.5">{validationMessage}</p>
+		{/if}
 	</div>
 {:else}
-	<div class="relative">
-		{#if iconBefore}
-			<span
-				class="absolute left-4 top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
-			>
-				{@render iconBefore()}
-			</span>
-		{/if}
-
-		<select
-			{id}
-			name={name}
-			{disabled}
-			{autocomplete}
-			bind:value
-			{onchange}
-			class="{selectClasses} {focusClasses} {errorClasses} {disabled
-				? disabledClasses
-				: ''} {className}"
-			class:pl-12={iconBefore}
-		>
-			{#if placeholder}
-				<option disabled value="" aria-hidden="true" hidden
-					>{placeholder}</option
+	<div>
+		<div class="relative">
+			{#if iconBefore}
+				<span
+					class="absolute left-4 top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
 				>
+					{@render iconBefore()}
+				</span>
 			{/if}
 
-			{#each options as option}
-				<option value={option.value}>{option.label}</option>
-			{/each}
-		</select>
+			<select
+				{id}
+				name={name}
+				{disabled}
+				{autocomplete}
+				bind:value
+				{onchange}
+				class="{selectClasses} {focusClasses} {errorClasses} {disabled
+					? disabledClasses
+					: ''} {className}"
+				class:pl-12={iconBefore}
+			>
+				{#if placeholder}
+					<option disabled value="" aria-hidden="true" hidden
+						>{placeholder}</option
+					>
+				{/if}
+
+				{#each options as option}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</div>
+		{#if validationMessage}
+			<p class="text-error text-xs mt-1.5">{validationMessage}</p>
+		{/if}
 	</div>
 {/if}
 

package/dist/components/forms/Select.svelte.d.ts

@@ -13,6 +13,7 @@ export interface Props {
     autocomplete?: HTMLSelectElement['autocomplete'];
     onchange?: (event: Event) => void;
     iconBefore?: import('svelte').Snippet;
+    validationMessage?: string;
     class?: string;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/SelectMenu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
 import Dropdown from '../overlays/Dropdown.svelte';
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
-let { value = $bindable(), options, placeholder = 'Select an option', disabled = false, error = false, label, id = createId('selectmenu'), name, iconBefore, onchange, class: className = '', } = $props();
+let { value = $bindable(), options, placeholder = 'Select an option', disabled = false, error = false, label, id = createId('selectmenu'), name, iconBefore, onchange, validationMessage, class: className = '', } = $props();
+const hasError = $derived(error || !!validationMessage);
 let open = $state(false);
 let highlightedIndex = $state(-1);
 let listboxElement = $state();
@@ -105,7 +106,7 @@ const chevronIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
 const triggerClasses = $derived(`
 		${baseInputClasses}
 		${focusClasses}
-		${error ? 'error-state' : ''}
+		${hasError ? 'error-state' : ''}
 		${disabled ? disabledClasses : ''}
 		${iconBefore ? 'pl-12' : ''}
 		${className}
@@ -189,6 +190,10 @@ const triggerClasses = $derived(`
 			{/each}
 		</div>
 	</Dropdown>
+
+	{#if validationMessage}
+		<p class="text-error text-xs mt-1.5">{validationMessage}</p>
+	{/if}
 </div>
 
 <style>

package/dist/components/forms/SelectMenu.svelte.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     name?: string;
     iconBefore?: import('svelte').Snippet;
     onchange?: (value: string) => void;
+    validationMessage?: string;
     class?: string;
 }
 declare const SelectMenu: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/Switch.svelte

@@ -1,30 +1,36 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
-let { checked = $bindable(false), disabled = false, label, id = createId('switch'), name, onchange, iconBefore, class: className = '' } = $props();
+let { checked = $bindable(false), disabled = false, error = false, label, id = createId('switch'), name, onchange, iconBefore, validationMessage, class: className = '' } = $props();
+const hasError = $derived(error || !!validationMessage);
 </script>
 
-<label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}">
-  <input
-    type="checkbox"
-    role="switch"
-    aria-checked={checked}
-    {id}
-    name={name}
-    {disabled}
-    bind:checked
-    onchange={onchange}
-    class="w-14 h-7 rounded-pill bg-base-3 border border-border appearance-none transition-all duration-300 ease-luxe cursor-pointer checked:bg-accent checked:accent-glow focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base-1 relative {disabled ? 'cursor-not-allowed' : ''}"
-  />
-  {#if iconBefore}
-    <span class="inline-flex items-center justify-center text-text-soft">
-      {@render iconBefore()}
-    </span>
+<div>
+  <label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}">
+    <input
+      type="checkbox"
+      role="switch"
+      aria-checked={checked}
+      {id}
+      name={name}
+      {disabled}
+      bind:checked
+      onchange={onchange}
+      class="w-14 h-7 rounded-pill bg-base-3 border appearance-none transition-all duration-300 ease-luxe cursor-pointer checked:bg-accent checked:accent-glow focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base-1 relative {hasError ? 'border-error' : 'border-border'} {disabled ? 'cursor-not-allowed' : ''}"
+    />
+    {#if iconBefore}
+      <span class="inline-flex items-center justify-center text-text-soft">
+        {@render iconBefore()}
+      </span>
+    {/if}
+    {#if label}
+      <span class="text-text text-sm select-none">
+        {label}
+      </span>
+    {/if}
+  </label>
+  {#if validationMessage}
+    <p class="text-error text-xs mt-1.5 ml-16">{validationMessage}</p>
   {/if}
-  {#if label}
-    <span class="text-text text-sm select-none">
-      {label}
-    </span>
-  {/if}
-</label>
+</div>
 
 <style>
   input[type="checkbox"]::after {
@@ -37,9 +43,11 @@ let { checked = $bindable(false), disabled = false, label, id = createId('switch
     height: 1.25rem;
     border-radius: var(--radius-pill);
     background: var(--color-text);
+    background-image: none;
     transition: all 0.3s var(--ease-luxe);
   }
 
   input[type="checkbox"]:checked::after {
     transform: translate(1.75rem, -50%);
+    background-image: none;
   }</style>

package/dist/components/forms/Switch.svelte.d.ts

@@ -1,11 +1,13 @@
 export interface Props {
     checked?: boolean;
     disabled?: boolean;
+    error?: boolean;
     label?: string;
     id?: string;
     name?: string;
     onchange?: (event: Event) => void;
     iconBefore?: import('svelte').Snippet;
+    validationMessage?: string;
     class?: string;
 }
 declare const Switch: import("svelte").Component<Props, {}, "checked">;

package/dist/components/forms/Textarea.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
 import { baseInputClasses, focusClasses, disabledClasses } from './formClasses';
-let { value = $bindable(), placeholder, rows = 4, disabled = false, error = false, label, id = createId('textarea'), name, autocomplete, oninput, iconBefore, class: className = '' } = $props();
+let { value = $bindable(), placeholder, rows = 4, disabled = false, error = false, label, id = createId('textarea'), name, autocomplete, oninput, iconBefore, validationMessage, class: className = '' } = $props();
+const hasError = $derived(error || !!validationMessage);
 // Icon spacing: pl-12 (3rem) = left-4 (1rem) icon position + ~2rem for icon width and spacing
 // top-4 keeps icon fixed at top when textarea is resized
 // This ensures text doesn't overlap with the absolutely positioned icon
 const textareaClasses = `${baseInputClasses} resize-y min-h-[100px]`;
-const errorClasses = $derived(error ? 'error-state' : '');
+const errorClasses = $derived(hasError ? 'error-state' : '');
 </script>
 
 {#if label}
@@ -32,25 +33,33 @@ const errorClasses = $derived(error ? 'error-state' : '');
         class:pl-12={iconBefore}
       ></textarea>
     </div>
+    {#if validationMessage}
+      <p class="text-error text-xs mt-1.5">{validationMessage}</p>
+    {/if}
   </div>
 {:else}
-  <div class="relative">
-    {#if iconBefore}
-      <span class="absolute left-4 top-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none">
-        {@render iconBefore()}
-      </span>
+  <div>
+    <div class="relative">
+      {#if iconBefore}
+        <span class="absolute left-4 top-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none">
+          {@render iconBefore()}
+        </span>
+      {/if}
+      <textarea
+        {id}
+        name={name}
+        {placeholder}
+        {disabled}
+        {rows}
+        {autocomplete}
+        bind:value
+        oninput={oninput}
+        class="{textareaClasses} {focusClasses} {errorClasses} {disabled ? disabledClasses : ''} {className}"
+        class:pl-12={iconBefore}
+      ></textarea>
+    </div>
+    {#if validationMessage}
+      <p class="text-error text-xs mt-1.5">{validationMessage}</p>
     {/if}
-    <textarea
-      {id}
-      name={name}
-      {placeholder}
-      {disabled}
-      {rows}
-      {autocomplete}
-      bind:value
-      oninput={oninput}
-      class="{textareaClasses} {focusClasses} {errorClasses} {disabled ? disabledClasses : ''} {className}"
-      class:pl-12={iconBefore}
-    ></textarea>
   </div>
 {/if}

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

@@ -10,6 +10,7 @@ export interface Props {
     autocomplete?: HTMLTextAreaElement['autocomplete'];
     oninput?: (event: Event) => void;
     iconBefore?: import('svelte').Snippet;
+    validationMessage?: string;
     class?: string;
 }
 declare const Textarea: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/TimePicker.svelte

@@ -2,7 +2,7 @@
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
 import TimePickerGrid from './TimePickerGrid.svelte';
 import Dropdown from '../overlays/Dropdown.svelte';
-let { variant = 'glass', value = $bindable(), min, max, step = 60, placeholder = 'Select time', disabled = false, error = false, label, id = createId('timepicker'), name, autocomplete, is24Hour = true, onchange, class: className = '', } = $props();
+let { variant = 'glass', value = $bindable(), min, max, step = 60, placeholder = 'Select time', disabled = false, error = false, label, id = createId('timepicker'), name, autocomplete, is24Hour = true, onchange, validationMessage, class: className = '', } = $props();
 let open = $state(false);
 let pickerElement = $state();
 let inputElement = $state();
@@ -108,7 +108,8 @@ $effect(() => {
         });
     }
 });
-const errorClasses = $derived(error ? 'error-state' : '');
+const hasError = $derived(error || !!validationMessage);
+const errorClasses = $derived(hasError ? 'error-state' : '');
 </script>
 
 <div class="time-picker-wrapper w-full">
@@ -181,6 +182,10 @@ const errorClasses = $derived(error ? 'error-state' : '');
 			/>
 		</div>
 	</Dropdown>
+
+	{#if validationMessage}
+		<p class="text-error text-xs mt-1.5">{validationMessage}</p>
+	{/if}
 </div>
 
 <style>

package/dist/components/forms/TimePicker.svelte.d.ts

@@ -13,6 +13,7 @@ export interface Props {
     autocomplete?: HTMLInputElement['autocomplete'];
     is24Hour?: boolean;
     onchange?: (event: Event) => void;
+    validationMessage?: string;
     class?: string;
 }
 declare const TimePicker: import("svelte").Component<Props, {}, "value">;