@mrintel/villain-ui 0.2.2 → 0.3.0

package/dist/components/data/Tag.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	interface Props {
+		variant?: 'default' | 'accent';
+		dismissible?: boolean;
+		ondismiss?: () => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'default', dismissible = false, ondismiss, children }: Props = $props();
+
+	const variantClasses = {
+		default:
+			'bg-[var(--color-base-2)] text-[var(--color-text-soft)] border-[var(--color-border)]',
+		accent:
+			'bg-[rgba(127,61,255,0.1)] text-[var(--color-accent-soft)] border-[var(--color-accent)] shadow-[0_0_12px_rgba(127,61,255,0.2)]'
+	};
+
+	const classes = $derived(
+		`inline-flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-pill)] border font-[var(--font-body)] font-medium text-sm transition-all duration-300 hover:scale-[1.02] ${variantClasses[variant]}`
+	);
+
+	function handleDismiss() {
+		ondismiss?.();
+	}
+</script>
+
+<span class={classes}>
+	{@render children?.()}
+
+	{#if dismissible}
+		<button
+			class="ml-1 opacity-60 hover:opacity-100 hover:text-[var(--color-text)] transition-all duration-300"
+			onclick={handleDismiss}
+			aria-label="Remove tag"
+		>
+			<svg
+				width="14"
+				height="14"
+				viewBox="0 0 14 14"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	{/if}
+</span>

package/dist/components/data/Tag.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    variant?: 'default' | 'accent';
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    children?: import('svelte').Snippet;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

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

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as List } from './List.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Stat } from './Stat.svelte';

package/dist/components/data/index.js

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as List } from './List.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Stat } from './Stat.svelte';

package/dist/components/forms/Checkbox.svelte

@@ -0,0 +1,51 @@
+<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('checkbox'),
+    onchange
+  }: Props = $props();
+</script>
+
+<label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+  <input
+    type="checkbox"
+    {id}
+    {disabled}
+    bind:checked
+    onchange={onchange}
+    class="w-5 h-5 rounded-sm border-2 border-border-strong bg-transparent appearance-none transition-all duration-200 ease-luxe cursor-pointer checked:bg-accent checked:border-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"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 5L4 7L8 3' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/forms/FileUpload.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { createId } from '../../lib/internal/id.js';
+
+  /**
+   * 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;
+  }
+
+  let {
+    files = $bindable(null),
+    accept,
+    multiple = false,
+    disabled = false,
+    label,
+    id = createId('file-upload'),
+    onchange
+  }: Props = $props();
+
+  let isDragging = $state(false);
+  let inputElement: HTMLInputElement;
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    if (!disabled) {
+      isDragging = true;
+    }
+  }
+
+  function handleDragLeave() {
+    isDragging = false;
+  }
+
+  function handleDrop(event: DragEvent) {
+    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: Event) {
+    const input = event.target as HTMLInputElement;
+    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="glass-panel rounded-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">
+      <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>
+      
+      <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,22 @@
+/**
+ * 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;
+}
+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,57 @@
+<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}

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

@@ -0,0 +1,13 @@
+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;
+}
+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">
+  // 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>

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,87 @@
+<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>

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

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

package/dist/components/forms/RangeSlider.svelte

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

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

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