@hyvnt/hyvui 0.1.0

package/dist/components/feedback/Toast.svelte

@@ -0,0 +1,136 @@
+<script lang="ts" module>
+  import { writable } from 'svelte/store';
+
+  interface ToastItem {
+    id: number;
+    message: string;
+    variant: 'ok' | 'pend' | 'warn' | 'fail';
+    duration: number;
+  }
+
+  let nextId = 0;
+  const _items = writable<ToastItem[]>([]);
+
+  /** Toast store. Use toastStore.push() to show a toast. */
+  export const toastStore = {
+    subscribe: _items.subscribe,
+    /** Push a new toast notification. */
+    push(message: string, variant: 'ok' | 'pend' | 'warn' | 'fail' = 'ok', duration = 4000) {
+      const id = nextId++;
+      _items.update((items) => [...items, { id, message, variant, duration }]);
+      setTimeout(() => {
+        _items.update((items) => items.filter((t) => t.id !== id));
+      }, duration);
+    },
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import { flip } from 'svelte/animate';
+
+  interface Props {
+    /** Position of the toast stack. */
+    position?: 'bottom-right' | 'bottom-center';
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    position = 'bottom-right',
+    class: className = '',
+  }: Props = $props();
+
+  let items: ToastItem[] = $state([]);
+
+  toastStore.subscribe((v) => {
+    items = v;
+  });
+
+  const statusColorMap: Record<string, string> = {
+    ok: 'var(--status-ok)',
+    pend: 'var(--status-pend)',
+    warn: 'var(--status-warn)',
+    fail: 'var(--status-fail)',
+  };
+</script>
+
+<div
+  class={cn(
+    'hyvui-toast-container',
+    position === 'bottom-center' && 'hyvui-toast-center',
+    className
+  )}
+  aria-live="polite"
+>
+  {#each items as item (item.id)}
+    <div class="hyvui-toast" animate:flip={{ duration: 200 }}>
+      <span
+        class="hyvui-toast-dot"
+        style:background-color={statusColorMap[item.variant]}
+      ></span>
+      <span class="hyvui-toast-message">{item.message}</span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .hyvui-toast-container {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    pointer-events: none;
+  }
+
+  .hyvui-toast-center {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .hyvui-toast {
+    background: var(--surface-card);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: var(--shadow-veil);
+    padding: 0.625rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    pointer-events: auto;
+    animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .hyvui-toast-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .hyvui-toast-message {
+    font-family: var(--font-body);
+    font-size: 0.88rem;
+    color: var(--text-soft);
+  }
+
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-toast {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/feedback/Toast.svelte.d.ts

@@ -0,0 +1,21 @@
+interface ToastItem {
+    id: number;
+    message: string;
+    variant: 'ok' | 'pend' | 'warn' | 'fail';
+    duration: number;
+}
+/** Toast store. Use toastStore.push() to show a toast. */
+export declare const toastStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastItem[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    /** Push a new toast notification. */
+    push(message: string, variant?: "ok" | "pend" | "warn" | "fail", duration?: number): void;
+};
+interface Props {
+    /** Position of the toast stack. */
+    position?: 'bottom-right' | 'bottom-center';
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/inputs/Button.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+  import { echo as echoAction } from '../../system/actions/echo.js';
+
+  interface Props {
+    /** Button visual style. */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+    /** Button size. */
+    size?: 'sm' | 'md';
+    /** Disables the button. */
+    disabled?: boolean;
+    /** Shows a pending status indicator instead of the label. */
+    loading?: boolean;
+    /** Enables the click echo ripple. */
+    echo?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Button type attribute. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Optional href to render an anchor instead of a button. */
+    href?: string;
+    /** Anchor target. */
+    target?: string;
+    /** Anchor rel. */
+    rel?: string;
+    /** Click handler. */
+    onclick?: (e: MouseEvent) => void;
+    /** Button label content. */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'secondary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    echo = false,
+    class: className = '',
+    type = 'button',
+    href,
+    target,
+    rel,
+    onclick,
+    children,
+  }: Props = $props();
+
+  function activeEcho(node: HTMLElement) {
+    if (!echo) return {};
+    return echoAction(node);
+  }
+
+  function handleAnchorClick(e: MouseEvent) {
+    if (disabled || loading) {
+      e.preventDefault();
+      return;
+    }
+
+    onclick?.(e);
+  }
+</script>
+
+{#if href}
+  <a
+    {href}
+    {target}
+    {rel}
+    use:activeEcho
+    class={cn(
+      'hyvui-btn',
+      `hyvui-btn-${variant}`,
+      `hyvui-btn-${size}`,
+      loading && 'hyvui-btn-loading',
+      disabled && 'hyvui-btn-disabled',
+      className
+    )}
+    aria-disabled={disabled || loading}
+    tabindex={disabled || loading ? -1 : undefined}
+    onclick={handleAnchorClick}
+  >
+    {#if loading}
+      <span class="hyvui-btn-dot" aria-label="loading"></span>
+    {:else if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button
+    {type}
+    use:activeEcho
+    class={cn(
+      'hyvui-btn',
+      `hyvui-btn-${variant}`,
+      `hyvui-btn-${size}`,
+      loading && 'hyvui-btn-loading',
+      className
+    )}
+    disabled={disabled || loading}
+    {onclick}
+  >
+    {#if loading}
+      <span class="hyvui-btn-dot" aria-label="loading"></span>
+    {:else if children}
+      {@render children()}
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .hyvui-btn {
+    position: relative;
+    overflow: clip;
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--control-gap);
+    transition:
+      color var(--transition-smooth),
+      border-color var(--transition-smooth),
+      background var(--transition-smooth),
+      transform var(--transition-smooth),
+      box-shadow var(--transition-smooth);
+    white-space: nowrap;
+    text-decoration: none;
+    line-height: 1;
+    max-width: 100%;
+    box-shadow: var(--surface-stroke);
+  }
+
+  .hyvui-btn:disabled,
+  .hyvui-btn-disabled {
+    opacity: 0.46;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none;
+  }
+
+  .hyvui-btn-md {
+    min-height: var(--control-height-md);
+    padding: 0.75rem 1.15rem;
+  }
+
+  .hyvui-btn-sm {
+    min-height: var(--control-height-sm);
+    padding: 0.5rem 0.8rem;
+    font-size: 0.68rem;
+  }
+
+  /* primary */
+  .hyvui-btn-primary {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 22%, transparent), transparent 70%),
+      linear-gradient(135deg, var(--accent), var(--accent-strong));
+    color: var(--bg);
+    border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--accent));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.16),
+      0 14px 26px rgba(199, 156, 87, 0.16);
+  }
+
+  .hyvui-btn-primary:hover:not(:disabled):not(.hyvui-btn-disabled) {
+    transform: translateY(-2px);
+    filter: brightness(1.03);
+  }
+
+  /* secondary */
+  .hyvui-btn-secondary {
+    background:
+      linear-gradient(180deg, rgba(121, 166, 163, 0.06), transparent 62%),
+      rgba(10, 12, 14, 0.74);
+    color: var(--text-soft);
+    border-color: var(--line-strong);
+  }
+
+  .hyvui-btn-secondary:hover:not(:disabled):not(.hyvui-btn-disabled) {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--accent) 46%, var(--line-strong));
+    color: var(--text);
+  }
+
+  /* ghost */
+  .hyvui-btn-ghost {
+    background: transparent;
+    color: var(--muted);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .hyvui-btn-ghost:hover:not(:disabled):not(.hyvui-btn-disabled) {
+    background: linear-gradient(90deg, rgba(199, 156, 87, 0.12), transparent 78%);
+    color: var(--text);
+    transform: translateX(2px);
+  }
+
+  /* destructive */
+  .hyvui-btn-destructive {
+    background: rgba(10, 12, 14, 0.74);
+    color: var(--text-soft);
+    border-color: rgba(182, 106, 72, 0.34);
+  }
+
+  .hyvui-btn-destructive:hover:not(:disabled):not(.hyvui-btn-disabled) {
+    background-color: rgba(182, 106, 72, 0.1);
+    transform: translateY(-2px);
+  }
+
+  /* loading dot */
+  .hyvui-btn-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--status-pend);
+    animation: pulse-dot 2s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-btn {
+      transition: none;
+    }
+
+    .hyvui-btn:hover:not(:disabled):not(.hyvui-btn-disabled) {
+      transform: none;
+    }
+
+    .hyvui-btn-dot {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/inputs/Button.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Button visual style. */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+    /** Button size. */
+    size?: 'sm' | 'md';
+    /** Disables the button. */
+    disabled?: boolean;
+    /** Shows a pending status indicator instead of the label. */
+    loading?: boolean;
+    /** Enables the click echo ripple. */
+    echo?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Button type attribute. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Optional href to render an anchor instead of a button. */
+    href?: string;
+    /** Anchor target. */
+    target?: string;
+    /** Anchor rel. */
+    rel?: string;
+    /** Click handler. */
+    onclick?: (e: MouseEvent) => void;
+    /** Button label content. */
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/inputs/Checkbox.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Whether the checkbox is checked (bindable). */
+    checked?: boolean;
+    /** Label text. */
+    label?: string;
+    /** Disables the checkbox. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Change handler. */
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    label = '',
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+</script>
+
+<label class={cn('hyvui-checkbox', disabled && 'hyvui-checkbox-disabled', className)}>
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    class="hyvui-checkbox-input"
+    {onchange}
+  />
+  <span class="hyvui-checkbox-box" class:hyvui-checkbox-checked={checked}>
+    {#if checked}
+      <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+        <path d="M2 5.5L4 7.5L8 3" stroke="var(--bg)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    {/if}
+  </span>
+  {#if label}
+    <span class="hyvui-checkbox-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .hyvui-checkbox {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--space-sm);
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  .hyvui-checkbox-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-checkbox-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-checkbox-box {
+    width: 16px;
+    height: 16px;
+    margin-top: 0.1rem;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.02), transparent 48%),
+      var(--bg-elev);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition:
+      background-color var(--transition-fast),
+      border-color var(--transition-fast),
+      box-shadow var(--transition-fast);
+    box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+  }
+
+  .hyvui-checkbox-checked {
+    background-color: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .hyvui-checkbox-label {
+    font-family: var(--font-body);
+    font-size: 0.98rem;
+    color: var(--text-soft);
+    line-height: 1.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-checkbox-box {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Props {
+    /** Whether the checkbox is checked (bindable). */
+    checked?: boolean;
+    /** Label text. */
+    label?: string;
+    /** Disables the checkbox. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Change handler. */
+    onchange?: (e: Event) => void;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/inputs/FileUpload.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Accepted file types (e.g. "image/*"). */
+    accept?: string;
+    /** Allow multiple file selection. */
+    multiple?: boolean;
+    /** Disables the upload zone. */
+    disabled?: boolean;
+    /** Label text displayed in the zone. */
+    label?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires with the selected files. */
+    onfiles?: (files: File[]) => void;
+  }
+
+  let {
+    accept = '',
+    multiple = false,
+    disabled = false,
+    label = 'drop files here or click to browse',
+    class: className = '',
+    onfiles,
+  }: Props = $props();
+
+  let dragging = $state(false);
+  let fileNames = $state<string[]>([]);
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  function handleFiles(fileList: FileList | null) {
+    if (!fileList) return;
+    const files = Array.from(fileList);
+    fileNames = files.map((f) => f.name);
+    onfiles?.(files);
+  }
+
+  function onDrop(e: DragEvent) {
+    e.preventDefault();
+    dragging = false;
+    if (disabled) return;
+    handleFiles(e.dataTransfer?.files ?? null);
+  }
+
+  function onDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (!disabled) dragging = true;
+  }
+
+  function onDragLeave() {
+    dragging = false;
+  }
+
+  function onClick() {
+    if (!disabled) inputEl?.click();
+  }
+
+  function onInputChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    handleFiles(target.files);
+  }
+</script>
+
+<div class={cn('hyvui-file-upload', className)}>
+  <button
+    type="button"
+    class={cn(
+      'hyvui-file-zone',
+      dragging && 'hyvui-file-zone-active',
+      disabled && 'hyvui-file-zone-disabled'
+    )}
+    ondrop={onDrop}
+    ondragover={onDragOver}
+    ondragleave={onDragLeave}
+    onclick={onClick}
+    {disabled}
+  >
+    <span class="hyvui-file-label">{label}</span>
+  </button>
+  <input
+    bind:this={inputEl}
+    type="file"
+    {accept}
+    {multiple}
+    class="hyvui-file-input"
+    onchange={onInputChange}
+    tabindex="-1"
+  />
+  {#if fileNames.length > 0}
+    <div class="hyvui-file-names">
+      {#each fileNames as name}
+        <span class="hyvui-file-name">{name}</span>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .hyvui-file-upload {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .hyvui-file-zone {
+    border: 1px dashed var(--line);
+    background: transparent;
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color var(--transition-fast), background-color var(--transition-fast);
+    width: 100%;
+  }
+
+  .hyvui-file-zone:hover:not(:disabled),
+  .hyvui-file-zone-active {
+    border-color: var(--line-strong);
+    background-color: rgba(199, 156, 87, 0.04);
+  }
+
+  .hyvui-file-zone-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-file-label {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--muted);
+    letter-spacing: 0.08em;
+  }
+
+  .hyvui-file-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .hyvui-file-names {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .hyvui-file-name {
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-file-zone {
+      transition: none;
+    }
+  }
+</style>