@mrintel/villain-ui 0.2.2 → 0.6.3

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

@@ -0,0 +1,15 @@
+export interface Props {
+    value?: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    class?: string;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/forms/DateTimePicker.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { value = $bindable(''), min, max, step, placeholder, disabled = false, error = false, label, id = createId('datetimepicker'), onchange, class: className = '', } = $props();
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<input
+			type="datetime-local"
+			{id}
+			{placeholder}
+			{disabled}
+			{min}
+			{max}
+			{step}
+			bind:value
+			{onchange}
+			class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+		/>
+	</div>
+{:else}
+	<input
+		type="datetime-local"
+		{id}
+		{placeholder}
+		{disabled}
+		{min}
+		{max}
+		{step}
+		bind:value
+		{onchange}
+		class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+			? disabledClasses
+			: ''} {className}"
+	/>
+{/if}
+
+<style>
+	input[type='datetime-local'] {
+		min-height: 3rem;
+		cursor: pointer;
+	}
+
+	input[type='datetime-local']::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(0.7);
+		transition: filter 120ms var(--ease-sharp);
+	}
+
+	input[type='datetime-local']:hover::-webkit-calendar-picker-indicator {
+		filter: invert(1);
+	}
+
+	input[type='datetime-local']:disabled::-webkit-calendar-picker-indicator {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}</style>

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

@@ -0,0 +1,16 @@
+export interface Props {
+    value?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    class?: string;
+}
+declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/components/forms/FileUpload.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { files = $bindable(null), accept, multiple = false, disabled = false, label, id = createId('file-upload'), onchange, icon } = $props();
+let isDragging = $state(false);
+let inputElement;
+function handleDragOver(event) {
+    event.preventDefault();
+    if (!disabled) {
+        isDragging = true;
+    }
+}
+function handleDragLeave() {
+    isDragging = false;
+}
+function handleDrop(event) {
+    event.preventDefault();
+    isDragging = false;
+    if (!disabled && event.dataTransfer?.files) {
+        files = event.dataTransfer.files;
+        if (onchange) {
+            // Call onchange directly with synthetic event object
+            onchange({ target: { files: event.dataTransfer.files } });
+        }
+    }
+}
+function handleClick() {
+    if (!disabled) {
+        inputElement?.click();
+    }
+}
+function handleInputChange(event) {
+    const input = event.target;
+    if (onchange && input.files) {
+        // Call onchange with consistent event shape
+        onchange({ target: { files: input.files } });
+    }
+}
+const fileList = $derived(files ? Array.from(files) : []);
+</script>
+
+<div>
+  {#if label}
+    <div class="text-text-soft text-sm mb-2 block">
+      {label}
+    </div>
+  {/if}
+  
+  <input
+    type="file"
+    {id}
+    {accept}
+    {multiple}
+    {disabled}
+    bind:this={inputElement}
+    bind:files
+    onchange={handleInputChange}
+    class="hidden"
+  />
+  
+  <div
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-label="Click or drag files to upload"
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    ondrop={handleDrop}
+    onclick={handleClick}
+    onkeydown={(e) => e.key === 'Enter' && handleClick()}
+    class="panel-raised rounded-[var(--radius-lg)] p-8 text-center cursor-pointer transition-all duration-300 ease-luxe {isDragging ? 'border-2 border-accent accent-glow bg-base-2' : ''} {disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}"
+  >
+    <div class="flex flex-col items-center gap-2">
+      {#if icon}
+        <span class="inline-flex items-center justify-center text-text-soft">
+          {@render icon()}
+        </span>
+      {:else}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-text-soft"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+      {/if}
+      
+      <div>
+        <p class="text-text text-sm font-medium">
+          Click to upload or drag and drop
+        </p>
+        <p class="text-text-muted text-xs mt-1">
+          {accept ? `Accepted formats: ${accept}` : 'Any file type'}
+        </p>
+      </div>
+    </div>
+  </div>
+
+  {#if fileList.length > 0}
+    <div class="mt-4">
+      <p class="text-text-soft text-xs mb-2">
+        Selected files:
+      </p>
+      <ul class="space-y-1">
+        {#each fileList as file}
+          <li class="text-text text-xs flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <span>{file.name}</span>
+            <span class="text-text-muted">
+              ({(file.size / 1024).toFixed(1)} KB)
+            </span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,23 @@
+/**
+ * FileUpload component props.
+ *
+ * The `onchange` callback receives an event object with the following shape:
+ * `{ target: { files: FileList } }` for both drag-and-drop and click-based selection.
+ */
+interface Props {
+    files?: FileList | null;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: {
+        target: {
+            files: FileList;
+        };
+    }) => void;
+    icon?: import('svelte').Snippet;
+}
+declare const FileUpload: import("svelte").Component<Props, {}, "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/components/forms/Input.svelte

@@ -0,0 +1,282 @@
+<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

@@ -0,0 +1,19 @@
+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>;
+export default Input;

package/dist/components/forms/InputGroup.svelte

@@ -0,0 +1,7 @@
+<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/InputGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputGroup: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type InputGroup = InstanceType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/forms/RadioGroup.svelte

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,17 @@
+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>;
+export default RadioGroup;