@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/forms/RangeSlider.svelte

@@ -1,116 +1,90 @@
-<script lang="ts">
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-    label?: string;
-    showValue?: boolean;
-    id?: string;
-    oninput?: (event: Event) => void;
-  }
-
-  let {
-    value = $bindable(0),
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-    label,
-    showValue = true,
-    id = createId('range'),
-    oninput
-  }: Props = $props();
-
-  const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
-</script>
-
-<div>
-  {#if label || showValue}
-    <div class="flex justify-between items-center mb-2">
-      {#if label}
-        <label for={id} class="text-text-soft text-sm">
-          {label}
-        </label>
-      {/if}
-      {#if showValue}
-        <span class="text-text-soft text-sm">
-          {value}
-        </span>
-      {/if}
-    </div>
-  {/if}
-  <input
-    type="range"
-    {id}
-    {min}
-    {max}
-    {step}
-    {disabled}
-    bind:value
-    oninput={oninput}
-    aria-valuemin={min}
-    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);"
-  />
-</div>
-
-<style>
-  input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: var(--radius-pill);
-    background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
-    cursor: pointer;
-    transition: transform 0.2s var(--ease-luxe);
-  }
-
-  input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.1);
-  }
-
-  input[type="range"]::-moz-range-thumb {
-    appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: var(--radius-pill);
-    background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
-    cursor: pointer;
-    transition: transform 0.2s var(--ease-luxe);
-    border: none;
-  }
-
-  input[type="range"]::-moz-range-thumb:hover {
-    transform: scale(1.1);
-  }
-
-  input[type="range"]:focus::-webkit-slider-thumb {
-    box-shadow: 
-      var(--shadow-accent-glow),
-      0 0 0 3px var(--color-base-1),
-      0 0 0 5px var(--color-accent);
-  }
-
-  input[type="range"]:focus::-moz-range-thumb {
-    box-shadow: 
-      var(--shadow-accent-glow),
-      0 0 0 3px var(--color-base-1),
-      0 0 0 5px var(--color-accent);
-  }
-
-  input[type="range"]:disabled::-webkit-slider-thumb {
-    cursor: not-allowed;
-  }
-
-  input[type="range"]:disabled::-moz-range-thumb {
-    cursor: not-allowed;
-  }
-</style>
+<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'), oninput } = $props();
+const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
+</script>
+
+<div>
+  {#if label || showValue}
+    <div class="flex justify-between items-center mb-2">
+      {#if label}
+        <label for={id} class="text-text-soft text-sm">
+          {label}
+        </label>
+      {/if}
+      {#if showValue}
+        <span class="text-text-soft text-sm">
+          {value}
+        </span>
+      {/if}
+    </div>
+  {/if}
+  <input
+    type="range"
+    {id}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    bind:value
+    oninput={oninput}
+    aria-valuemin={min}
+    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);"
+  />
+</div>
+
+<style>
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+    cursor: pointer;
+    transition: transform 0.2s var(--ease-luxe);
+  }
+
+  input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+    cursor: pointer;
+    transition: transform 0.2s var(--ease-luxe);
+    border: none;
+  }
+
+  input[type="range"]::-moz-range-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  input[type="range"]:focus::-webkit-slider-thumb {
+    box-shadow: 
+      var(--shadow-accent-glow),
+      0 0 0 3px var(--color-base-1),
+      0 0 0 5px var(--color-accent);
+  }
+
+  input[type="range"]:focus::-moz-range-thumb {
+    box-shadow: 
+      var(--shadow-accent-glow),
+      0 0 0 3px var(--color-base-1),
+      0 0 0 5px var(--color-accent);
+  }
+
+  input[type="range"]:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+  }
+
+  input[type="range"]:disabled::-moz-range-thumb {
+    cursor: not-allowed;
+  }</style>

package/dist/components/forms/Select.svelte

@@ -1,71 +1,106 @@
-<script lang="ts">
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    value?: string;
-    options: Array<{ value: string; label: string }>;
-    placeholder?: string;
-    disabled?: boolean;
-    error?: boolean;
-    label?: string;
-    id?: string;
-    onchange?: (event: Event) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    options,
-    placeholder,
-    disabled = false,
-    error = false,
-    label,
-    id = createId('select'),
-    onchange
-  }: Props = $props();
-
-  const chevronIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23ADADAD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";
-  
-  const baseClasses = `glass-panel rounded-lg px-4 py-3 pr-10 font-body text-text transition-all duration-300 ease-luxe w-full appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:12px]`;
-  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>
-    <select
-      {id}
-      {disabled}
-      bind:value
-      onchange={onchange}
-      class="{baseClasses} {focusClasses} {errorClasses} {disabledClasses}"
-      style={`background-image: url('${chevronIcon}')`}
-    >
-      {#if placeholder}
-        <option disabled value="">{placeholder}</option>
-      {/if}
-      {#each options as option}
-        <option value={option.value}>{option.label}</option>
-      {/each}
-    </select>
-  </div>
-{:else}
-  <select
-    {id}
-    {disabled}
-    bind:value
-    onchange={onchange}
-    class="{baseClasses} {focusClasses} {errorClasses} {disabledClasses}"
-    style={`background-image: url('${chevronIcon}')`}
-  >
-    {#if placeholder}
-      <option disabled value="">{placeholder}</option>
-    {/if}
-    {#each options as option}
-      <option value={option.value}>{option.label}</option>
-    {/each}
-  </select>
-{/if}
+<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'), onchange, iconBefore, class: className = '', } = $props();
+const chevronIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23A855F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";
+const selectClasses = `${baseInputClasses} pr-12 appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:16px] cursor-pointer`;
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<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}
+				{disabled}
+				bind:value
+				{onchange}
+				class="{selectClasses} {focusClasses} {errorClasses} {disabled
+					? disabledClasses
+					: ''} {className}"
+				class:pl-12={iconBefore}
+				style={`background-image: url('${chevronIcon}')`}
+			>
+				{#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>
+	</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}
+			{disabled}
+			bind:value
+			{onchange}
+			class="{selectClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+			class:pl-12={iconBefore}
+			style={`background-image: url('${chevronIcon}')`}
+		>
+			{#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}
+
+<style>
+	/* Force dark dropdown (Firefox + Chromium) */
+	select {
+		color-scheme: var(--color-base-0);
+	}
+
+	/* Option styling */
+	select option {
+		background-color: var(--color-base-2);
+		color: var(--color-text);
+		padding: 0.5rem;
+	}
+
+	select option:hover {
+    background-color: var(--color-accent-overlay-50);
+    color: var(--color-text);
+	}
+	select option:focus,
+	select option:checked {
+		background-color: var(--color-accent);
+		color: var(--color-text);
+	}
+
+	select option:disabled {
+		color: var(--color-text-muted);
+		opacity: 0.5;
+	}</style>

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

@@ -1,4 +1,4 @@
-interface Props {
+export interface Props {
     value?: string;
     options: Array<{
         value: string;
@@ -10,6 +10,8 @@ interface Props {
     label?: string;
     id?: string;
     onchange?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    class?: string;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/components/forms/Step.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import { onMount, onDestroy } from 'svelte';
+import { getStepperContext } from './StepContext';
+let { id, label = id, fields = [], optional = false, order, children, } = $props();
+const context = getStepperContext();
+onMount(() => {
+    context?.registerStep({ id, label, fields, optional, order });
+});
+onDestroy(() => {
+    context?.unregisterStep(id);
+});
+const isActive = $derived(context?.currentStepId === id);
+const state = $derived(context?.getStepState(id) ?? 'idle');
+</script>
+
+{#if isActive && children}
+	<div
+		class="step-content"
+		data-step-id={id}
+		data-step-state={state}
+		role="tabpanel"
+		aria-labelledby={`step-${id}`}
+	>
+		{@render children()}
+	</div>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id: string;
+    label?: string;
+    fields?: string[];
+    optional?: boolean;
+    order?: number;
+    children?: Snippet;
+}
+declare const Step: import("svelte").Component<Props, {}, "">;
+type Step = ReturnType<typeof Step>;
+export default Step;

package/dist/components/forms/StepContext.d.ts

@@ -0,0 +1,3 @@
+import type { StepContext } from './Stepper.types';
+export declare const STEPPER_CONTEXT_KEY: unique symbol;
+export declare function getStepperContext(): StepContext | undefined;

package/dist/components/forms/StepContext.js

@@ -0,0 +1,5 @@
+import { getContext } from 'svelte';
+export const STEPPER_CONTEXT_KEY = Symbol('stepper-form-context');
+export function getStepperContext() {
+    return getContext(STEPPER_CONTEXT_KEY);
+}

package/dist/components/forms/Stepper.types.d.ts

@@ -0,0 +1,37 @@
+export type StepState = 'idle' | 'active' | 'completed' | 'error';
+export type ValidationMode = 'strict' | 'loose' | 'submit-only';
+export interface StepRegistration {
+    id: string;
+    label: string;
+    fields?: string[];
+    optional?: boolean;
+    order?: number;
+}
+export interface StepContext {
+    registerStep: (step: StepRegistration) => void;
+    unregisterStep: (id: string) => void;
+    currentStepId: string;
+    getStepState: (id: string) => StepState;
+}
+export interface StepMeta {
+    id: string;
+    label: string;
+    fields: string[];
+    optional: boolean;
+    state: StepState;
+}
+export interface StepperFormContext {
+    next: () => Promise<boolean>;
+    back: () => void;
+    goto: (stepId: string) => Promise<boolean>;
+    currentStep: number;
+    currentStepId: string;
+    totalSteps: number;
+    canNext: boolean;
+    canBack: boolean;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    steps: StepMeta[];
+    validateCurrentStep: () => Promise<boolean>;
+    getStepErrors: (stepId: string) => string[];
+}

package/dist/components/forms/Stepper.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/StepperForm.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">import { setContext, tick } from 'svelte';
+import { STEPPER_CONTEXT_KEY } from './StepContext';
+let { form, validationMode = 'strict', initialStep = 0, onStepChange, onValidationError, onComplete, header, footer, children, class: className = '', } = $props();
+let registeredSteps = $state([]);
+let currentStepIndex = $state(initialStep);
+let stepStates = $state(new Map());
+let stepErrors = $state(new Map());
+const totalSteps = $derived(registeredSteps.length);
+const currentStepId = $derived(registeredSteps[currentStepIndex]?.id ?? '');
+const isFirstStep = $derived(currentStepIndex === 0);
+const isLastStep = $derived(currentStepIndex === totalSteps - 1);
+const canBack = $derived(!isFirstStep);
+const canNext = $derived(validationMode === 'submit-only'
+    ? true
+    : (() => {
+        const step = registeredSteps[currentStepIndex];
+        if (!step)
+            return false;
+        return (stepErrors.get(step.id) ?? []).length === 0;
+    })());
+const steps = $derived(registeredSteps.map((step, i) => ({
+    id: step.id,
+    label: step.label,
+    fields: step.fields ?? [],
+    optional: step.optional ?? false,
+    state: stepStates.get(step.id) ??
+        (i < currentStepIndex
+            ? 'completed'
+            : i === currentStepIndex
+                ? 'active'
+                : 'idle'),
+})));
+async function validateStepFields(stepId) {
+    const step = registeredSteps.find((s) => s.id === stepId);
+    if (!step?.fields?.length)
+        return true;
+    const formErrors = form?.errors;
+    if (!formErrors)
+        return true;
+    const errors = [];
+    for (const field of step.fields) {
+        const fieldErrors = $state.snapshot(formErrors)?.[field];
+        if (Array.isArray(fieldErrors))
+            errors.push(...fieldErrors);
+    }
+    if (errors.length) {
+        stepErrors.set(stepId, errors);
+        stepStates.set(stepId, 'error');
+        onValidationError?.(stepId, errors);
+        return false;
+    }
+    stepErrors.delete(stepId);
+    stepStates.set(stepId, 'active');
+    return true;
+}
+async function validateCurrentStep() {
+    if (validationMode === 'submit-only')
+        return true;
+    return validateStepFields(currentStepId);
+}
+async function next() {
+    if (isLastStep) {
+        onComplete?.();
+        return true;
+    }
+    if (validationMode !== 'submit-only') {
+        const valid = validationMode === 'strict'
+            ? await validateCurrentStep()
+            : (await validateCurrentStep(), true);
+        if (!valid)
+            return false;
+    }
+    stepStates.set(currentStepId, 'completed');
+    currentStepIndex++;
+    const newStepId = registeredSteps[currentStepIndex].id;
+    stepStates.set(newStepId, 'active');
+    await tick();
+    onStepChange?.(currentStepIndex, newStepId);
+    return true;
+}
+function back() {
+    if (isFirstStep)
+        return;
+    stepStates.set(currentStepId, 'idle');
+    currentStepIndex--;
+    const newStepId = registeredSteps[currentStepIndex].id;
+    stepStates.set(newStepId, 'active');
+    onStepChange?.(currentStepIndex, newStepId);
+}
+async function goto(stepId) {
+    const targetIndex = registeredSteps.findIndex((s) => s.id === stepId);
+    if (targetIndex === -1)
+        return false;
+    if (targetIndex > currentStepIndex && validationMode === 'strict') {
+        for (let i = currentStepIndex; i < targetIndex; i++) {
+            const ok = await validateStepFields(registeredSteps[i].id);
+            if (!ok)
+                return false;
+            stepStates.set(registeredSteps[i].id, 'completed');
+        }
+    }
+    for (let i = 0; i < registeredSteps.length; i++) {
+        stepStates.set(registeredSteps[i].id, i < targetIndex
+            ? 'completed'
+            : i === targetIndex
+                ? 'active'
+                : 'idle');
+    }
+    currentStepIndex = targetIndex;
+    await tick();
+    onStepChange?.(targetIndex, stepId);
+    return true;
+}
+function getStepErrors(stepId) {
+    return stepErrors.get(stepId) ?? [];
+}
+function getStepState(id) {
+    return stepStates.get(id) ?? 'idle';
+}
+function registerStep(step) {
+    if (registeredSteps.some((s) => s.id === step.id))
+        return;
+    registeredSteps = [...registeredSteps, step].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    if (!registeredSteps[currentStepIndex]) {
+        currentStepIndex = 0;
+    }
+    const id = registeredSteps[currentStepIndex].id;
+    stepStates.set(id, 'active');
+}
+function unregisterStep(id) {
+    registeredSteps = registeredSteps.filter((s) => s.id !== id);
+    stepStates.delete(id);
+    stepErrors.delete(id);
+    if (currentStepIndex >= registeredSteps.length) {
+        currentStepIndex = Math.max(registeredSteps.length - 1, 0);
+    }
+    const active = registeredSteps[currentStepIndex];
+    if (active)
+        stepStates.set(active.id, 'active');
+}
+const stepContext = {
+    registerStep,
+    unregisterStep,
+    get currentStepId() {
+        return currentStepId;
+    },
+    getStepState,
+};
+setContext(STEPPER_CONTEXT_KEY, stepContext);
+const slotContext = $derived({
+    next,
+    back,
+    goto,
+    currentStep: currentStepIndex,
+    currentStepId,
+    totalSteps,
+    canNext,
+    canBack,
+    isFirstStep,
+    isLastStep,
+    steps,
+    validateCurrentStep,
+    getStepErrors,
+});
+</script>
+
+<div class={`stepper-form ${className}`} data-current-step={currentStepId}>
+	{#if header}
+		<div class="stepper-form-header">
+			{@render header(slotContext)}
+		</div>
+	{/if}
+
+	<div class="stepper-form-content">
+		{@render children?.(slotContext)}
+	</div>
+
+	{#if footer}
+		<div class="stepper-form-footer">
+			{@render footer(slotContext)}
+		</div>
+	{/if}
+</div>