@hyvnt/hyvui 0.1.0

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

@@ -0,0 +1,17 @@
+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;
+}
+declare const FileUpload: import("svelte").Component<Props, {}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/components/inputs/Input.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Input type. */
+    type?: 'text' | 'number' | 'password' | 'email' | 'search';
+    /** Current value (bindable). */
+    value?: string;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Disables the input. */
+    disabled?: boolean;
+    /** Error message. Displays below the input and activates error styling. */
+    error?: string;
+    /** Hint text displayed below the input. */
+    hint?: string;
+    /** Label text displayed above the input. */
+    label?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Input handler. */
+    oninput?: (e: Event) => void;
+    /** Change handler. */
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    type = 'text',
+    value = $bindable(''),
+    placeholder = '',
+    disabled = false,
+    error = '',
+    hint = '',
+    label = '',
+    class: className = '',
+    oninput,
+    onchange,
+  }: Props = $props();
+
+  const inputId = `hyvui-input-${Math.random().toString(36).slice(2, 8)}`;
+</script>
+
+<div class={cn('hyvui-input-wrap', className)}>
+  {#if label}
+    <label class="hyvui-input-label" for={inputId}>{label}</label>
+  {/if}
+  <input
+    id={inputId}
+    {type}
+    bind:value
+    {placeholder}
+    {disabled}
+    class={cn('hyvui-input', error && 'hyvui-input-error')}
+    {oninput}
+    {onchange}
+  />
+  {#if error}
+    <span class="hyvui-input-message hyvui-input-message-error">{error}</span>
+  {:else if hint}
+    <span class="hyvui-input-message">{hint}</span>
+  {/if}
+</div>
+
+<style>
+  .hyvui-input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-width: 0;
+  }
+
+  .hyvui-input-label {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    line-height: 1.2;
+  }
+
+  .hyvui-input {
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    font-weight: 400;
+    color: var(--text);
+    min-height: var(--control-height-md);
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.018), transparent 46%),
+      linear-gradient(135deg, rgba(199, 156, 87, 0.045), transparent 44%),
+      var(--bg-elev);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: var(--control-pad-y) var(--control-pad-x);
+    outline: none;
+    transition:
+      border-color var(--transition-fast),
+      background var(--transition-fast),
+      box-shadow var(--transition-fast);
+    width: 100%;
+    box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+  }
+
+  .hyvui-input::placeholder {
+    color: var(--muted);
+  }
+
+  .hyvui-input:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--line-strong) 82%, transparent);
+  }
+
+  .hyvui-input:focus {
+    border-color: var(--line-strong);
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.022), transparent 46%),
+      linear-gradient(135deg, rgba(199, 156, 87, 0.06), transparent 44%),
+      var(--bg-elev);
+  }
+
+  .hyvui-input:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-input-error {
+    border-color: var(--status-fail);
+  }
+
+  .hyvui-input-message {
+    font-family: var(--font-mono);
+    font-size: 0.66rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    line-height: 1.3;
+  }
+
+  .hyvui-input-message-error {
+    color: var(--status-fail);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-input {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,25 @@
+interface Props {
+    /** Input type. */
+    type?: 'text' | 'number' | 'password' | 'email' | 'search';
+    /** Current value (bindable). */
+    value?: string;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Disables the input. */
+    disabled?: boolean;
+    /** Error message. Displays below the input and activates error styling. */
+    error?: string;
+    /** Hint text displayed below the input. */
+    hint?: string;
+    /** Label text displayed above the input. */
+    label?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Input handler. */
+    oninput?: (e: Event) => void;
+    /** Change handler. */
+    onchange?: (e: Event) => void;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/inputs/Select.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface SelectOption {
+    value: string;
+    label: string;
+  }
+
+  interface Props {
+    /** Available options. */
+    options?: SelectOption[];
+    /** Current selected value (bindable). */
+    value?: string;
+    /** Label text displayed above the select. */
+    label?: string;
+    /** Error message. */
+    error?: string;
+    /** Disables the select. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Change handler. */
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    options = [],
+    value = $bindable(''),
+    label = '',
+    error = '',
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const selectId = `hyvui-select-${Math.random().toString(36).slice(2, 8)}`;
+</script>
+
+<div class={cn('hyvui-select-wrap', className)}>
+  {#if label}
+    <label class="hyvui-select-label" for={selectId}>{label}</label>
+  {/if}
+  <div class="hyvui-select-container">
+    <select
+      id={selectId}
+      bind:value
+      {disabled}
+      class={cn('hyvui-select', error && 'hyvui-select-error')}
+      {onchange}
+    >
+      {#each options as opt}
+        <option value={opt.value}>{opt.label}</option>
+      {/each}
+    </select>
+    <svg class="hyvui-select-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="var(--accent)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </div>
+  {#if error}
+    <span class="hyvui-select-message">{error}</span>
+  {/if}
+</div>
+
+<style>
+  .hyvui-select-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-width: 0;
+  }
+
+  .hyvui-select-label {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    line-height: 1.2;
+  }
+
+  .hyvui-select-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .hyvui-select {
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    font-weight: 400;
+    color: var(--text);
+    min-height: var(--control-height-md);
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.018), transparent 46%),
+      linear-gradient(135deg, rgba(199, 156, 87, 0.045), transparent 44%),
+      var(--bg-elev);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: var(--control-pad-y) 2.3rem var(--control-pad-y) var(--control-pad-x);
+    outline: none;
+    appearance: none;
+    width: 100%;
+    cursor: pointer;
+    transition:
+      border-color var(--transition-fast),
+      background var(--transition-fast),
+      box-shadow var(--transition-fast);
+    box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+  }
+
+  .hyvui-select:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--line-strong) 82%, transparent);
+  }
+
+  .hyvui-select:focus {
+    border-color: var(--line-strong);
+  }
+
+  .hyvui-select:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-select-error {
+    border-color: var(--status-fail);
+  }
+
+  .hyvui-select-chevron {
+    position: absolute;
+    right: 0.85rem;
+    pointer-events: none;
+    opacity: 0.8;
+  }
+
+  .hyvui-select-message {
+    font-family: var(--font-mono);
+    font-size: 0.66rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--status-fail);
+    line-height: 1.3;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-select {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,23 @@
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface Props {
+    /** Available options. */
+    options?: SelectOption[];
+    /** Current selected value (bindable). */
+    value?: string;
+    /** Label text displayed above the select. */
+    label?: string;
+    /** Error message. */
+    error?: string;
+    /** Disables the select. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Change handler. */
+    onchange?: (e: Event) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/inputs/Textarea.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Current value (bindable). */
+    value?: string;
+    /** Number of visible rows. */
+    rows?: number;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Label text displayed above the textarea. */
+    label?: string;
+    /** Error message. */
+    error?: string;
+    /** Hint text. */
+    hint?: string;
+    /** Auto-expand height based on content. */
+    autoresize?: boolean;
+    /** Disables the textarea. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Input handler. */
+    oninput?: (e: Event) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    rows = 4,
+    placeholder = '',
+    label = '',
+    error = '',
+    hint = '',
+    autoresize = false,
+    disabled = false,
+    class: className = '',
+    oninput,
+  }: Props = $props();
+
+  const textareaId = `hyvui-textarea-${Math.random().toString(36).slice(2, 8)}`;
+
+  let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+  function handleInput(e: Event) {
+    if (autoresize && textareaEl) {
+      textareaEl.style.height = 'auto';
+      textareaEl.style.height = textareaEl.scrollHeight + 'px';
+    }
+    oninput?.(e);
+  }
+</script>
+
+<div class={cn('hyvui-textarea-wrap', className)}>
+  {#if label}
+    <label class="hyvui-textarea-label" for={textareaId}>{label}</label>
+  {/if}
+  <textarea
+    id={textareaId}
+    bind:this={textareaEl}
+    bind:value
+    {rows}
+    {placeholder}
+    {disabled}
+    class={cn('hyvui-textarea', error && 'hyvui-textarea-error')}
+    oninput={handleInput}
+  ></textarea>
+  {#if error}
+    <span class="hyvui-textarea-message hyvui-textarea-message-error">{error}</span>
+  {:else if hint}
+    <span class="hyvui-textarea-message">{hint}</span>
+  {/if}
+</div>
+
+<style>
+  .hyvui-textarea-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-width: 0;
+  }
+
+  .hyvui-textarea-label {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    line-height: 1.2;
+  }
+
+  .hyvui-textarea {
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    font-weight: 400;
+    color: var(--text);
+    min-height: calc(var(--control-height-md) * 2.4);
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.018), transparent 46%),
+      linear-gradient(135deg, rgba(199, 156, 87, 0.045), transparent 44%),
+      var(--bg-elev);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: var(--control-pad-y) var(--control-pad-x);
+    outline: none;
+    resize: vertical;
+    transition:
+      border-color var(--transition-fast),
+      background var(--transition-fast),
+      box-shadow var(--transition-fast);
+    width: 100%;
+    box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+  }
+
+  .hyvui-textarea::placeholder {
+    color: var(--muted);
+  }
+
+  .hyvui-textarea:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--line-strong) 82%, transparent);
+  }
+
+  .hyvui-textarea:focus {
+    border-color: var(--line-strong);
+  }
+
+  .hyvui-textarea:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-textarea-error {
+    border-color: var(--status-fail);
+  }
+
+  .hyvui-textarea-message {
+    font-family: var(--font-mono);
+    font-size: 0.66rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    line-height: 1.3;
+  }
+
+  .hyvui-textarea-message-error {
+    color: var(--status-fail);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-textarea {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,25 @@
+interface Props {
+    /** Current value (bindable). */
+    value?: string;
+    /** Number of visible rows. */
+    rows?: number;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Label text displayed above the textarea. */
+    label?: string;
+    /** Error message. */
+    error?: string;
+    /** Hint text. */
+    hint?: string;
+    /** Auto-expand height based on content. */
+    autoresize?: boolean;
+    /** Disables the textarea. */
+    disabled?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Input handler. */
+    oninput?: (e: Event) => void;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/inputs/Toggle.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface Props {
+    /** Whether the toggle is on (bindable). */
+    checked?: boolean;
+    /** Label text. */
+    label?: string;
+    /** Disables the toggle. */
+    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();
+
+  function toggle() {
+    if (disabled) return;
+    checked = !checked;
+    onchange?.(new Event('change'));
+  }
+</script>
+
+<label class={cn('hyvui-toggle', disabled && 'hyvui-toggle-disabled', className)}>
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    {disabled}
+    aria-label={label || 'toggle'}
+    class="hyvui-toggle-track"
+    class:hyvui-toggle-on={checked}
+    onclick={toggle}
+  >
+    <span class="hyvui-toggle-thumb" class:hyvui-toggle-thumb-on={checked}></span>
+  </button>
+  {#if label}
+    <span class="hyvui-toggle-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .hyvui-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  .hyvui-toggle-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-toggle-track {
+    width: 42px;
+    height: 24px;
+    border-radius: 999px;
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.02), transparent 48%),
+      var(--bg-elev);
+    border: 1px solid var(--line-strong);
+    position: relative;
+    cursor: pointer;
+    padding: 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-toggle-track:disabled {
+    cursor: not-allowed;
+  }
+
+  .hyvui-toggle-on {
+    background-color: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .hyvui-toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--muted);
+    transition: transform var(--transition-fast), background-color var(--transition-fast);
+  }
+
+  .hyvui-toggle-thumb-on {
+    transform: translateX(18px);
+    background-color: var(--bg);
+  }
+
+  .hyvui-toggle-label {
+    font-family: var(--font-body);
+    font-size: 0.98rem;
+    color: var(--text-soft);
+    line-height: 1.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-toggle-track,
+    .hyvui-toggle-thumb {
+      transition: none;
+    }
+  }
+</style>

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

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