@mrintel/villain-ui 0.2.0 → 0.3.0

package/dist/components/forms/Select.svelte

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

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

@@ -0,0 +1,16 @@
+interface Props {
+    value?: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/forms/Switch.svelte

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

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

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

package/dist/components/forms/Textarea.svelte

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

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

@@ -0,0 +1,13 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    oninput?: (event: Event) => void;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

@@ -0,0 +1,9 @@
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Switch } from './Switch.svelte';
+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';

package/dist/components/forms/index.js

@@ -0,0 +1,9 @@
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Switch } from './Switch.svelte';
+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';

package/dist/components/navigation/Breadcrumbs.svelte

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

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onclick?: () => void;
+}
+interface Props {
+    items: BreadcrumbItem[];
+    separator?: string;
+    separatorIcon?: Snippet;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/navigation/ContextMenu.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    x?: number;
+    y?: number;
+    trigger?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    x = $bindable(0),
+    y = $bindable(0),
+    trigger,
+    children
+  }: Props = $props();
+
+  let menuElement = $state<HTMLDivElement>();
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    x = event.clientX;
+    y = event.clientY;
+    open = true;
+
+    // Adjust position if menu would overflow viewport
+    requestAnimationFrame(() => {
+      if (menuElement) {
+        const menuRect = menuElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        if (x + menuRect.width > viewportWidth) {
+          x = viewportWidth - menuRect.width - 10;
+        }
+
+        if (y + menuRect.height > viewportHeight) {
+          y = viewportHeight - menuRect.height - 10;
+        }
+      }
+    });
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (menuElement && !menuElement.contains(event.target as Node)) {
+      open = false;
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+
+      return () => {
+        document.removeEventListener('click', handleClickOutside);
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  });
+</script>
+
+<div oncontextmenu={handleContextMenu} role="presentation" class="contents">
+  {@render trigger?.()}
+</div>
+
+{#if open}
+  <div
+    bind:this={menuElement}
+    class="fixed z-50 glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
+    style="left: {x}px; top: {y}px;"
+  >
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    x?: number;
+    y?: number;
+    trigger?: Snippet;
+    children?: Snippet;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "open" | "x" | "y">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/navigation/DropdownMenu.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    trigger?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    placement = 'bottom-start',
+    trigger,
+    children
+  }: Props = $props();
+
+  let menuElement: HTMLDivElement;
+  let wrapperElement: HTMLDivElement;
+
+  const placementClasses = {
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2'
+  };
+
+  function toggleMenu() {
+    open = !open;
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (menuElement && !wrapperElement.contains(event.target as Node)) {
+      open = false;
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+
+      return () => {
+        document.removeEventListener('click', handleClickOutside);
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  });
+</script>
+
+<div bind:this={wrapperElement} class="relative">
+  <button
+    type="button"
+    onclick={toggleMenu}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMenu();
+      }
+    }}
+    class="bg-transparent border-none p-0 cursor-pointer"
+  >
+    {@render trigger?.()}
+  </button>
+
+  {#if open}
+    <div
+      bind:this={menuElement}
+      class="absolute {placementClasses[placement]} z-50 glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    trigger?: Snippet;
+    children?: Snippet;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/navigation/Menu.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface MenuItem {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    onclick?: () => void;
+  }
+
+  interface Props {
+    items?: MenuItem[];
+    children?: Snippet;
+  }
+
+  let {
+    items,
+    children
+  }: Props = $props();
+
+  function handleItemClick(item: MenuItem) {
+    if (!item.disabled && item.onclick) {
+      item.onclick();
+    }
+  }
+</script>
+
+<div role="menu" class="glass-panel rounded-[var(--radius-lg)] p-2 shadow-[var(--shadow-deep)]">
+  {#if children}
+    {@render children()}
+  {:else if items}
+    {#each items as item}
+      <button
+        role="menuitem"
+        aria-disabled={item.disabled}
+        onclick={() => handleItemClick(item)}
+        disabled={item.disabled}
+        class="flex items-center gap-2 w-full px-3 py-2 rounded-[var(--radius-md)] text-[var(--color-text)] text-sm font-[var(--font-body)] hover:bg-[var(--color-base-3)] transition-all duration-200 ease-[var(--ease-luxe)] {item.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+      >
+        {#if item.icon}
+          {@render item.icon()}
+        {/if}
+        <span>{item.label}</span>
+      </button>
+    {/each}
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface MenuItem {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    onclick?: () => void;
+}
+interface Props {
+    items?: MenuItem[];
+    children?: Snippet;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/navigation/Navbar.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    position?: 'sticky' | 'fixed';
+    height?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+  }
+
+  let {
+    position = 'sticky',
+    height = 'md',
+    children
+  }: Props = $props();
+
+  const positionClasses = {
+    sticky: 'sticky top-0',
+    fixed: 'fixed top-0 left-0 right-0'
+  };
+
+  const heightClasses = {
+    sm: 'h-14',
+    md: 'h-16',
+    lg: 'h-20'
+  };
+
+  const baseClasses = 'z-40 glass-panel flex items-center justify-between px-4 md:px-6 lg:px-8 transition-all duration-300 ease-[var(--ease-luxe)]';
+</script>
+
+<nav class="{baseClasses} {positionClasses[position]} {heightClasses[height]}">
+  {@render children?.()}
+</nav>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    position?: 'sticky' | 'fixed';
+    height?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+}
+declare const Navbar: import("svelte").Component<Props, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/navigation/Sidebar.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    side?: 'left' | 'right';
+    width?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(true),
+    side = 'left',
+    width = 'md',
+    children
+  }: Props = $props();
+
+  const widthClasses = {
+    sm: { open: 'w-56', collapsed: 'w-14' },
+    md: { open: 'w-64', collapsed: 'w-16' },
+    lg: { open: 'w-80', collapsed: 'w-20' }
+  };
+
+  const sideClasses = {
+    left: 'left-0',
+    right: 'right-0'
+  };
+
+  const currentWidth = $derived(open ? widthClasses[width].open : widthClasses[width].collapsed);
+  const baseClasses = 'fixed top-0 bottom-0 z-30 glass-panel overflow-y-auto overflow-x-hidden transition-all duration-300 ease-[var(--ease-luxe)]';
+</script>
+
+<aside class="{baseClasses} {sideClasses[side]} {currentWidth}">
+  {@render children?.()}
+</aside>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    side?: 'left' | 'right';
+    width?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "open">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;