@mrintel/villain-ui 0.3.0 → 0.6.3

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/Switch.svelte

@@ -1,56 +1,44 @@
-<script lang="ts">
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    checked?: boolean;
-    disabled?: boolean;
-    label?: string;
-    id?: string;
-    onchange?: (event: Event) => void;
-  }
-
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    label,
-    id = createId('switch'),
-    onchange
-  }: Props = $props();
-</script>
-
-<label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
-  <input
-    type="checkbox"
-    role="switch"
-    aria-checked={checked}
-    {id}
-    {disabled}
-    bind:checked
-    onchange={onchange}
-    class="w-11 h-6 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 label}
-    <span class="text-text text-sm select-none">
-      {label}
-    </span>
-  {/if}
-</label>
-
-<style>
-  input[type="checkbox"]::after {
-    content: '';
-    position: absolute;
-    left: 0.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 1rem;
-    height: 1rem;
-    border-radius: var(--radius-pill);
-    background: var(--color-text);
-    transition: all 0.3s var(--ease-luxe);
-  }
-
-  input[type="checkbox"]:checked::after {
-    transform: translate(1.25rem, -50%);
-  }
-</style>
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { checked = $bindable(false), disabled = false, label, id = createId('switch'), onchange, iconBefore, class: className = '' } = $props();
+</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}
+    {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>
+  {/if}
+  {#if label}
+    <span class="text-text text-sm select-none">
+      {label}
+    </span>
+  {/if}
+</label>
+
+<style>
+  input[type="checkbox"]::after {
+    content: '';
+    position: absolute;
+    left: 0.375rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-text);
+    transition: all 0.3s var(--ease-luxe);
+  }
+
+  input[type="checkbox"]:checked::after {
+    transform: translate(1.75rem, -50%);
+  }</style>

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

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

package/dist/components/forms/Textarea.svelte

@@ -1,57 +1,52 @@
-<script lang="ts">
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    value?: string;
-    placeholder?: string;
-    rows?: number;
-    disabled?: boolean;
-    error?: boolean;
-    label?: string;
-    id?: string;
-    oninput?: (event: Event) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    placeholder,
-    rows = 4,
-    disabled = false,
-    error = false,
-    label,
-    id = createId('textarea'),
-    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 resize-y min-h-[100px]';
-  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>
-    <textarea
-      {id}
-      {placeholder}
-      {disabled}
-      {rows}
-      bind:value
-      oninput={oninput}
-      class="{baseClasses} {focusClasses} {errorClasses} {disabledClasses}"
-    ></textarea>
-  </div>
-{:else}
-  <textarea
-    {id}
-    {placeholder}
-    {disabled}
-    {rows}
-    bind:value
-    oninput={oninput}
-    class="{baseClasses} {focusClasses} {errorClasses} {disabledClasses}"
-  ></textarea>
-{/if}
+<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'), oninput, iconBefore, class: className = '' } = $props();
+// 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' : '');
+</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-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none">
+          {@render iconBefore()}
+        </span>
+      {/if}
+      <textarea
+        {id}
+        {placeholder}
+        {disabled}
+        {rows}
+        bind:value
+        oninput={oninput}
+        class="{textareaClasses} {focusClasses} {errorClasses} {disabled ? disabledClasses : ''} {className}"
+        class:pl-12={iconBefore}
+      ></textarea>
+    </div>
+  </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>
+    {/if}
+    <textarea
+      {id}
+      {placeholder}
+      {disabled}
+      {rows}
+      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

@@ -1,4 +1,4 @@
-interface Props {
+export interface Props {
     value?: string;
     placeholder?: string;
     rows?: number;
@@ -7,6 +7,8 @@ interface Props {
     label?: string;
     id?: string;
     oninput?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    class?: string;
 }
 declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;