@mrintel/villain-ui 0.3.0 → 0.7.1

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ValidationMode, StepperFormContext } from './Stepper.types';
+interface Props {
+    form: any;
+    validationMode?: ValidationMode;
+    initialStep?: number;
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    onValidationError?: (stepId: string, errors: string[]) => void;
+    onComplete?: () => void;
+    header?: Snippet<[StepperFormContext]>;
+    footer?: Snippet<[StepperFormContext]>;
+    children?: Snippet<[StepperFormContext]>;
+    class?: string;
+}
+declare const StepperForm: import("svelte").Component<Props, {}, "">;
+type StepperForm = ReturnType<typeof StepperForm>;
+export default StepperForm;

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>;

package/dist/components/forms/TimePicker.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('timepicker'), 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="time"
+			{id}
+			{placeholder}
+			{disabled}
+			{min}
+			{max}
+			{step}
+			bind:value
+			{onchange}
+			class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+		/>
+	</div>
+{:else}
+	<input
+		type="time"
+		{id}
+		{placeholder}
+		{disabled}
+		{min}
+		{max}
+		{step}
+		bind:value
+		{onchange}
+		class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+			? disabledClasses
+			: ''} {className}"
+	/>
+{/if}
+
+<style>
+	input[type='time'] {
+		min-height: 3rem;
+		cursor: pointer;
+	}
+
+	input[type='time']::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(0.7);
+		transition: filter 120ms var(--ease-sharp);
+	}
+
+	input[type='time']:hover::-webkit-calendar-picker-indicator {
+		filter: invert(1);
+	}
+
+	input[type='time']:disabled::-webkit-calendar-picker-indicator {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}</style>

package/dist/components/forms/TimePicker.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 TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

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

@@ -0,0 +1,3 @@
+export declare const baseInputClasses = "glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full";
+export declare const focusClasses = "focus:outline-none focus:border-accent focus:accent-glow";
+export declare const disabledClasses = "opacity-50 cursor-not-allowed";

package/dist/components/forms/formClasses.js

@@ -0,0 +1,3 @@
+export const baseInputClasses = 'glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full';
+export const focusClasses = 'focus:outline-none focus:border-accent focus:accent-glow';
+export const disabledClasses = 'opacity-50 cursor-not-allowed';

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

@@ -7,3 +7,9 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RangeSlider } from './RangeSlider.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as TimePicker } from './TimePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker.svelte';
+export { default as Step } from './Step.svelte';
+export { default as StepperForm } from './StepperForm.svelte';
+export type { StepState, ValidationMode, StepRegistration, StepperFormContext, StepMeta, StepContext } from './Stepper.types';

package/dist/components/forms/index.js

@@ -7,3 +7,8 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RangeSlider } from './RangeSlider.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as TimePicker } from './TimePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker.svelte';
+export { default as Step } from './Step.svelte';
+export { default as StepperForm } from './StepperForm.svelte';

package/dist/components/navigation/Breadcrumbs.svelte

@@ -1,59 +1,56 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface BreadcrumbItem {
-    label: string;
-    href?: string;
-    onclick?: () => void;
-  }
-
-  interface Props {
-    items: BreadcrumbItem[];
-    separator?: string;
-    separatorIcon?: Snippet;
-  }
-
-  let {
-    items,
-    separator = '/',
-    separatorIcon
-  }: Props = $props();
-</script>
-
-<nav role="navigation" aria-label="Breadcrumb">
-  <ol class="flex items-center gap-2">
-    {#each items as item, index}
-      <li class="flex items-center gap-2">
-        {#if item.href}
-          <a
-            href={item.href}
-            class="text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
-          >
-            {item.label}
-          </a>
-        {:else if item.onclick}
-          <button
-            onclick={item.onclick}
-            class="text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
-          >
-            {item.label}
-          </button>
-        {:else}
-          <span class="text-sm font-[var(--font-body)] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
-            {item.label}
-          </span>
-        {/if}
-
-        {#if index < items.length - 1}
-          <span class="text-[var(--color-text-muted)] text-sm" aria-hidden="true">
-            {#if separatorIcon}
-              {@render separatorIcon()}
-            {:else}
-              {separator}
-            {/if}
-          </span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-</nav>
+<script lang="ts">let { items, separator = '/', separatorIcon } = $props();
+export {};
+</script>
+
+<nav role="navigation" aria-label="Breadcrumb">
+  <ol class="flex items-center gap-2">
+    {#each items as item, index}
+      <li class="flex items-center gap-2">
+        {#if item.href}
+          <a
+            href={item.href}
+            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
+          >
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </a>
+        {:else if item.onclick}
+          <button
+            onclick={item.onclick}
+            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
+          >
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </button>
+        {:else}
+          <span class="flex items-center gap-2 text-sm font-[var(--font-body)] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </span>
+        {/if}
+
+        {#if index < items.length - 1}
+          <span class="text-[var(--color-text-muted)] text-sm" aria-hidden="true">
+            {#if separatorIcon}
+              {@render separatorIcon()}
+            {:else}
+              {separator}
+            {/if}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -3,6 +3,7 @@ interface BreadcrumbItem {
     label: string;
     href?: string;
     onclick?: () => void;
+    icon?: Snippet;
 }
 interface Props {
     items: BreadcrumbItem[];