@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/forms/Input.svelte

@@ -1,57 +1,282 @@
-<script lang="ts">
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    value?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    error?: boolean;
-    label?: string;
-    id?: string;
-    oninput?: (event: Event) => void;
-  }
-
-  let {
-    type = 'text',
-    value = $bindable(''),
-    placeholder,
-    disabled = false,
-    error = false,
-    label,
-    id = createId('input'),
-    oninput
-  }: Props = $props();
-
-  const baseClasses = 'glass-panel rounded-lg px-4 py-3 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full';
-  const focusClasses = 'focus:outline-none focus:border-accent focus:accent-glow';
-  const errorClasses = error ? 'border-error' : '';
-  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
-</script>
-
-{#if label}
-  <div>
-    <label for={id} class="text-text-soft text-sm mb-2 block">
-      {label}
-    </label>
-    <input
-      {type}
-      {id}
-      {placeholder}
-      {disabled}
-      bind:value
-      oninput={oninput}
-      class="{baseClasses} {focusClasses} {errorClasses} {disabledClasses}"
-    />
-  </div>
-{:else}
-  <input
-    {type}
-    {id}
-    {placeholder}
-    {disabled}
-    bind:value
-    oninput={oninput}
-    class="{baseClasses} {focusClasses} {errorClasses} {disabledClasses}"
-  />
-{/if}
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { type = 'text', value = $bindable(''), placeholder, disabled = false, error = false, label, id = createId('input'), oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, class: className = '', } = $props();
+// Built-in validation patterns
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
+const telPattern = /^[\d\s\-\+\(\)]+$/;
+// Validation logic
+let validationError = $state(null);
+function performValidation(val) {
+    if (!val || val === '') {
+        validationError = null;
+        return true;
+    }
+    // Custom validation function
+    if (validate) {
+        const result = validate(val);
+        if (result === true) {
+            validationError = null;
+            return true;
+        }
+        else if (typeof result === 'string') {
+            validationError = result;
+            return false;
+        }
+        else {
+            validationError = validationMessage || 'Invalid input';
+            return false;
+        }
+    }
+    // Built-in validation based on type
+    const stringVal = String(val);
+    switch (type) {
+        case 'email':
+            if (!emailPattern.test(stringVal)) {
+                validationError = validationMessage || 'Please enter a valid email address';
+                return false;
+            }
+            break;
+        case 'url':
+            if (!urlPattern.test(stringVal)) {
+                validationError = validationMessage || 'Please enter a valid URL';
+                return false;
+            }
+            break;
+        case 'tel':
+            if (!telPattern.test(stringVal)) {
+                validationError = validationMessage || 'Please enter a valid phone number';
+                return false;
+            }
+            break;
+    }
+    validationError = null;
+    return true;
+}
+// Validate on value change
+$effect(() => {
+    if (value !== undefined && value !== '') {
+        performValidation(value);
+    }
+});
+const hasError = $derived(error || (validationError !== null));
+const errorClasses = $derived(hasError ? 'error-state' : '');
+function increment() {
+    if (disabled || type !== 'number')
+        return;
+    value = Number(value || 0) + 1;
+}
+function decrement() {
+    if (disabled || type !== 'number')
+        return;
+    value = Number(value || 0) - 1;
+}
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<div class="relative flex items-center">
+			<!-- BEFORE ICON -->
+			{#if iconBefore}
+				<span
+					class="absolute left-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
+				>
+					{@render iconBefore()}
+				</span>
+			{/if}
+
+			<!-- INPUT FIELD -->
+			<input
+				{type}
+				{id}
+				{placeholder}
+				{disabled}
+				bind:value
+				{oninput}
+				class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+					? disabledClasses
+					: ''} {className}"
+				class:pl-12={iconBefore}
+				class:pr-12={iconAfter || type === 'number'}
+			/>
+
+			<!-- AFTER ICON (non-number) -->
+			{#if iconAfter && type !== 'number'}
+				<span
+					class="absolute right-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
+				>
+					{@render iconAfter()}
+				</span>
+			{/if}
+
+			<!-- CUSTOM ARROWS (NUMBER INPUT ONLY) -->
+			{#if type === 'number'}
+				<div class="number-arrows">
+					<button
+						type="button"
+						onclick={increment}
+						class="arrow-btn arrow-up"
+						tabindex="-1"
+					>
+						▲
+					</button>
+					<button
+						type="button"
+						onclick={decrement}
+						class="arrow-btn arrow-down"
+						tabindex="-1"
+					>
+						▼
+					</button>
+				</div>
+			{/if}
+		</div>
+		{#if showValidation && validationError}
+			<p class="text-error text-xs mt-1.5">
+				{validationError}
+			</p>
+		{/if}
+	</div>
+{:else}
+	<div>
+		<div class="relative flex items-center">
+			{#if iconBefore}
+				<span
+					class="absolute left-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
+				>
+					{@render iconBefore()}
+				</span>
+			{/if}
+
+			<input
+				{type}
+				{id}
+				{placeholder}
+				{disabled}
+				bind:value
+				{oninput}
+				class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+					? disabledClasses
+					: ''} {className}"
+				class:pl-12={iconBefore}
+				class:pr-12={iconAfter || type === 'number'}
+			/>
+
+			{#if iconAfter && type !== 'number'}
+				<span
+					class="absolute right-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
+				>
+					{@render iconAfter()}
+				</span>
+			{/if}
+
+			{#if type === 'number'}
+				<div class="number-arrows">
+					<button
+						type="button"
+						onclick={increment}
+						class="arrow-btn arrow-up"
+						tabindex="-1"
+					>
+						▲
+					</button>
+					<button
+						type="button"
+						onclick={decrement}
+						class="arrow-btn arrow-down"
+						tabindex="-1"
+					>
+						▼
+					</button>
+				</div>
+			{/if}
+		</div>
+		{#if showValidation && validationError}
+			<p class="text-error text-xs mt-1.5">
+				{validationError}
+			</p>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.number-arrows {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: 100%;
+		width: 2.25rem; /* doesn't overlap your icons */
+		display: flex;
+		flex-direction: column;
+		border-left: 1px solid var(--color-border-strong);
+		background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+		border-radius: 0 var(--radius-md) var(--radius-md) 0;
+		overflow: hidden;
+	}
+
+	.arrow-btn {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		color: var(--color-text-soft);
+		font-size: 0.7rem;
+		cursor: pointer;
+		transition: all 120ms var(--ease-sharp);
+		user-select: none;
+	}
+
+	.arrow-btn:hover {
+		background: var(--color-accent-overlay-20);
+		color: var(--color-accent-soft);
+	}
+
+	.arrow-btn:active {
+		background: var(--color-accent-overlay-30);
+		color: var(--color-accent);
+	}
+
+	.arrow-btn:disabled,
+	.arrow-btn[disabled] {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	/* Remove default browser arrows */
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+		appearance: textfield;
+	}
+
+	/* Color input styling */
+	input[type='color'] {
+		width: 60px;
+		min-width: 60px;
+		min-height: 3rem;
+		padding: 0.375rem;
+		cursor: pointer;
+	}
+
+	input[type='color']::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	input[type='color']::-webkit-color-swatch {
+		border: 1px solid var(--color-border-strong);
+		border-radius: calc(var(--radius-md) - 2px);
+	}
+
+	input[type='color']::-moz-color-swatch {
+		border: 1px solid var(--color-border-strong);
+		border-radius: calc(var(--radius-md) - 2px);
+	}</style>

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

@@ -1,12 +1,18 @@
-interface Props {
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    value?: string;
+export interface Props {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'color' | 'search';
+    value?: string | number;
     placeholder?: string;
     disabled?: boolean;
     error?: boolean;
     label?: string;
     id?: string;
     oninput?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    iconAfter?: import('svelte').Snippet;
+    validate?: (value: string | number) => boolean | string;
+    validationMessage?: string;
+    showValidation?: boolean;
+    class?: string;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/forms/InputGroup.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
-  // No props needed for standard slot usage
-</script>
-
-<div class="flex items-stretch rounded-[var(--radius-lg)] overflow-hidden glass-panel [&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none">
-  <slot />
-</div>
+<script lang="ts">"use strict";
+// No props needed for standard slot usage
+</script>
+
+<div class="flex items-stretch rounded-[var(--radius-lg)] overflow-hidden panel-raised [&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none">
+  <slot />
+</div>

package/dist/components/forms/RadioGroup.svelte

@@ -1,87 +1,77 @@
-<script lang="ts">
-  interface Props {
-    value?: string;
-    options: Array<{ value: string; label: string }>;
-    name: string;
-    disabled?: boolean;
-    orientation?: 'vertical' | 'horizontal';
-    label?: string;
-    onchange?: (event: Event) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    options,
-    name,
-    disabled = false,
-    orientation = 'vertical',
-    label,
-    onchange
-  }: Props = $props();
-
-  const containerClasses = $derived(orientation === 'vertical' ? 'flex flex-col gap-3' : 'flex flex-row gap-4');
-</script>
-
-{#if label}
-  <fieldset class={disabled ? 'opacity-50' : ''}>
-    <legend class="text-[var(--color-text-soft)] text-sm mb-3 block">
-      {label}
-    </legend>
-    <div class={containerClasses}>
-      {#each options as option}
-        {@const radioId = `${name}-${option.value}`}
-        <label for={radioId} class="flex items-center gap-2 cursor-pointer {disabled ? 'cursor-not-allowed' : ''}">
-          <input
-            type="radio"
-            id={radioId}
-            {name}
-            value={option.value}
-            {disabled}
-            bind:group={value}
-            onchange={onchange}
-            class="w-5 h-5 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' : ''}"
-          />
-          <span class="text-[var(--color-text)] text-sm select-none">
-            {option.label}
-          </span>
-        </label>
-      {/each}
-    </div>
-  </fieldset>
-{:else}
-  <div class={containerClasses}>
-    {#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-5 h-5 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' : ''}"
-        />
-        <span class="text-[var(--color-text)] text-sm select-none">
-          {option.label}
-        </span>
-      </label>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  input[type="radio"]:checked::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 0.625rem;
-    height: 0.625rem;
-    border-radius: var(--radius-pill);
-    background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
-  }
-</style>
+<script lang="ts">let { value = $bindable(''), options, name, disabled = false, orientation = 'vertical', label, onchange, class: className = '' } = $props();
+const containerClasses = $derived(orientation === 'vertical' ? 'flex flex-col gap-3' : 'flex flex-row gap-4');
+export {};
+</script>
+
+{#if label}
+  <fieldset class="{disabled ? 'opacity-50' : ''} {className}">
+    <legend class="text-[var(--color-text-soft)] text-sm mb-3 block">
+      {label}
+    </legend>
+    <div class={containerClasses}>
+      {#each options as option}
+        {@const radioId = `${name}-${option.value}`}
+        <label for={radioId} class="flex items-center gap-2 cursor-pointer {disabled ? '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()}
+            </span>
+          {/if}
+          <span class="text-[var(--color-text)] text-sm select-none">
+            {option.label}
+          </span>
+        </label>
+      {/each}
+    </div>
+  </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()}
+          </span>
+        {/if}
+        <span class="text-[var(--color-text)] text-sm select-none">
+          {option.label}
+        </span>
+      </label>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  input[type="radio"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+  }</style>

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

@@ -1,14 +1,16 @@
-interface Props {
+export interface Props {
     value?: string;
     options: Array<{
         value: string;
         label: string;
+        iconBefore?: import('svelte').Snippet;
     }>;
     name: string;
     disabled?: boolean;
     orientation?: 'vertical' | 'horizontal';
     label?: string;
     onchange?: (event: Event) => void;
+    class?: string;
 }
 declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;