@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/inputs/Textarea.svelte

@@ -1,154 +1,160 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @see resolve — wrap parent `<form>` with `use:resolve` to flash status on submit.
+	 * @example
+	 * <Textarea label="notes" bind:value={notes} placeholder="enter notes..." />
+	 * <Textarea label="message" rows={6} bind:value={msg} autoresize error={msgError} />
+	 */
+	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}
+		aria-describedby={(error || hint) ? `${textareaId}-desc` : undefined}
+		class={cn('hyvui-textarea', error && 'hyvui-textarea-error')}
+		oninput={handleInput}
+	></textarea>
+	{#if error}
+		<span id="{textareaId}-desc" class="hyvui-textarea-message hyvui-textarea-message-error">{error}</span>
+	{:else if hint}
+		<span id="{textareaId}-desc" 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

@@ -1,3 +1,9 @@
+/**
+ * @see resolve — wrap parent `<form>` with `use:resolve` to flash status on submit.
+ * @example
+ * <Textarea label="notes" bind:value={notes} placeholder="enter notes..." />
+ * <Textarea label="message" rows={6} bind:value={msg} autoresize error={msgError} />
+ */
 interface Props {
     /** Current value (bindable). */
     value?: string;

package/dist/components/inputs/Toggle.svelte

@@ -1,120 +1,125 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <Toggle label="enable notifications" bind:checked={enabled} />
+	 * <Toggle label="dark mode" bind:checked={dark} onchange={applyTheme} />
+	 */
+	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-smooth),
+			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

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <Toggle label="enable notifications" bind:checked={enabled} />
+ * <Toggle label="dark mode" bind:checked={dark} onchange={applyTheme} />
+ */
 interface Props {
     /** Whether the toggle is on (bindable). */
     checked?: boolean;