@mrintel/villain-ui 0.3.0 → 0.6.3

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

@@ -1,4 +1,5 @@
 export { default as Table } from './Table.svelte';
+export type { Column as TableColumn, SortDirection, RowKey, SelectionState } from './Table.types';
 export { default as Pagination } from './Pagination.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Tag } from './Tag.svelte';
@@ -6,3 +7,6 @@ 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';
+export { default as CalendarGrid } from './CalendarGrid.svelte';
+export type { CalendarEvent } from './CalendarGrid.types';
+export { default as Sparkline } from './Sparkline.svelte';

package/dist/components/data/index.js

@@ -6,3 +6,5 @@ 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';
+export { default as CalendarGrid } from './CalendarGrid.svelte';
+export { default as Sparkline } from './Sparkline.svelte';

package/dist/components/forms/Checkbox.svelte

@@ -1,51 +1,39 @@
-<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>
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { checked = $bindable(false), disabled = false, label, id = createId('checkbox'), 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"
+    {id}
+    {disabled}
+    bind:checked
+    onchange={onchange}
+    class="w-6 h-6 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 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"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    background-image: url("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 6L5 8.5L9.5 3.5' 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

@@ -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 Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/forms/DatePicker.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { value = $bindable(''), min, max, placeholder, disabled = false, error = false, label, id = createId('datepicker'), 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="date"
+			{id}
+			{placeholder}
+			{disabled}
+			{min}
+			{max}
+			bind:value
+			{onchange}
+			class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+		/>
+	</div>
+{:else}
+	<input
+		type="date"
+		{id}
+		{placeholder}
+		{disabled}
+		{min}
+		{max}
+		bind:value
+		{onchange}
+		class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+			? disabledClasses
+			: ''} {className}"
+	/>
+{/if}
+
+<style>
+	input[type='date'] {
+		min-height: 3rem;
+		cursor: pointer;
+	}
+
+	input[type='date']::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(0.7);
+		transition: filter 120ms var(--ease-sharp);
+	}
+
+	input[type='date']:hover::-webkit-calendar-picker-indicator {
+		filter: invert(1);
+	}
+
+	input[type='date']:disabled::-webkit-calendar-picker-indicator {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}</style>

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

@@ -1,164 +1,136 @@
-<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>
+<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

@@ -16,6 +16,7 @@ interface Props {
             files: FileList;
         };
     }) => void;
+    icon?: import('svelte').Snippet;
 }
 declare const FileUpload: import("svelte").Component<Props, {}, "files">;
 type FileUpload = ReturnType<typeof FileUpload>;