@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/feedback/StatusLine.svelte

@@ -1,122 +1,128 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Status determining the glyph and color. */
-    status?: 'ok' | 'pend' | 'warn' | 'fail';
-    /** Message text displayed after the status glyph. */
-    message?: string;
-    /** Controls visibility with stagger animation. */
-    visible?: boolean;
-    /** When true, the full line inherits the status tone. */
-    tone?: 'split' | 'line';
-    /** Shows a blinking cursor after the message. */
-    cursor?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    status = 'ok',
-    message = '',
-    visible = false,
-    tone = 'split',
-    cursor = false,
-    class: className = '',
-  }: Props = $props();
-
-  const glyphMap: Record<string, string> = {
-    ok: '[ OK ]',
-    pend: '[ .. ]',
-    warn: '[WARN]',
-    fail: '[FAIL]',
-  };
-
-  const colorMap: Record<string, string> = {
-    ok: 'var(--status-ok)',
-    pend: 'var(--status-pend)',
-    warn: 'var(--status-warn)',
-    fail: 'var(--status-fail)',
-  };
-</script>
-
-<div
-  class={cn(
-    'hyvui-status-line',
-    visible && 'hyvui-status-line-visible',
-    tone === 'line' && 'hyvui-status-line-tone-line',
-    className
-  )}
-  style:color={tone === 'line' ? colorMap[status] : undefined}
-  aria-live="polite"
->
-  <span class="hyvui-status-glyph" style:color={tone === 'split' ? colorMap[status] : undefined}>
-    {glyphMap[status]}
-  </span>
-  <span class="hyvui-status-message">{message}</span>
-  {#if cursor}
-    <span class="hyvui-status-cursor" aria-hidden="true">_</span>
-  {/if}
-</div>
-
-<style>
-  .hyvui-status-line {
-    display: flex;
-    align-items: baseline;
-    gap: 0.75rem;
-    font-family: var(--font-mono);
-    font-size: 0.82rem;
-    opacity: 0;
-    transform: translateY(6px);
-    transition:
-      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
-      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .hyvui-status-line-visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .hyvui-status-glyph {
-    font-weight: 400;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
-  .hyvui-status-message {
-    color: var(--text-soft);
-  }
-
-  .hyvui-status-line-tone-line .hyvui-status-message,
-  .hyvui-status-line-tone-line .hyvui-status-glyph {
-    color: inherit;
-  }
-
-  .hyvui-status-cursor {
-    color: var(--muted-strong);
-    animation: blink 1s step-end infinite;
-    margin-left: 2px;
-  }
-
-  @keyframes blink {
-    50% {
-      opacity: 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-status-line {
-      transition: none;
-      transform: none;
-    }
-
-    .hyvui-status-line-visible {
-      opacity: 1;
-    }
-
-    .hyvui-status-cursor {
-      animation: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <StatusLine status="ok" message="database connected" visible={true} />
+	 * <StatusLine status="pend" message="waiting for signal" visible={show} cursor />
+	 * <StatusLine status="fail" message="stream interrupted" visible={true} tone="line" />
+	 */
+	interface Props {
+		/** Status determining the glyph and color. */
+		status?: 'ok' | 'pend' | 'warn' | 'fail';
+		/** Message text displayed after the status glyph. */
+		message?: string;
+		/** Controls visibility with stagger animation. */
+		visible?: boolean;
+		/** When true, the full line inherits the status tone. */
+		tone?: 'split' | 'line';
+		/** Shows a blinking cursor after the message. */
+		cursor?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		status = 'ok',
+		message = '',
+		visible = false,
+		tone = 'split',
+		cursor = false,
+		class: className = ''
+	}: Props = $props();
+
+	const glyphMap: Record<string, string> = {
+		ok: '[ OK ]',
+		pend: '[ .. ]',
+		warn: '[WARN]',
+		fail: '[FAIL]'
+	};
+
+	const colorMap: Record<string, string> = {
+		ok: 'var(--status-ok)',
+		pend: 'var(--status-pend)',
+		warn: 'var(--status-warn)',
+		fail: 'var(--status-fail)'
+	};
+</script>
+
+<div
+	class={cn(
+		'hyvui-status-line',
+		visible && 'hyvui-status-line-visible',
+		tone === 'line' && 'hyvui-status-line-tone-line',
+		className
+	)}
+	style:color={tone === 'line' ? colorMap[status] : undefined}
+	aria-live="polite"
+>
+	<span class="hyvui-status-glyph" style:color={tone === 'split' ? colorMap[status] : undefined}>
+		{glyphMap[status]}
+	</span>
+	<span class="hyvui-status-message">{message}</span>
+	{#if cursor}
+		<span class="hyvui-status-cursor" aria-hidden="true">_</span>
+	{/if}
+</div>
+
+<style>
+	.hyvui-status-line {
+		display: flex;
+		align-items: baseline;
+		gap: 0.75rem;
+		font-family: var(--font-mono);
+		font-size: 0.82rem;
+		opacity: 0;
+		transform: translateY(6px);
+		transition:
+			opacity var(--transition-smooth),
+			transform var(--transition-smooth);
+	}
+
+	.hyvui-status-line-visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.hyvui-status-glyph {
+		font-weight: 400;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.hyvui-status-message {
+		color: var(--text-soft);
+	}
+
+	.hyvui-status-line-tone-line .hyvui-status-message,
+	.hyvui-status-line-tone-line .hyvui-status-glyph {
+		color: inherit;
+	}
+
+	.hyvui-status-cursor {
+		color: var(--muted-strong);
+		animation: blink 1s step-end infinite;
+		margin-left: 2px;
+	}
+
+	@keyframes blink {
+		50% {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-status-line {
+			transition: none;
+			transform: none;
+		}
+
+		.hyvui-status-line-visible {
+			opacity: 1;
+		}
+
+		.hyvui-status-cursor {
+			animation: none;
+		}
+	}
+</style>

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

@@ -1,3 +1,9 @@
+/**
+ * @example
+ * <StatusLine status="ok" message="database connected" visible={true} />
+ * <StatusLine status="pend" message="waiting for signal" visible={show} cursor />
+ * <StatusLine status="fail" message="stream interrupted" visible={true} tone="line" />
+ */
 interface Props {
     /** Status determining the glyph and color. */
     status?: 'ok' | 'pend' | 'warn' | 'fail';

package/dist/components/feedback/Toast.svelte

@@ -1,136 +1,144 @@
-<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>
+<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';
+
+	/**
+	 * Place once in your root layout. Trigger toasts anywhere via `toastStore.push(message, variant)`.
+	 * Variants: 'ok' | 'pend' | 'warn' | 'fail'
+	 * @example
+	 * <Toast position="bottom-right" />
+	 * @example
+	 * toastStore.push('file saved', 'ok');
+	 * toastStore.push('connection lost', 'fail');
+	 * toastStore.push('uploading...', 'pend', 8000);
+	 */
+	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([]);
+
+	$effect(() => {
+		const unsub = toastStore.subscribe((v) => {
+			items = v;
+		});
+		return unsub;
+	});
+
+	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;
+		backface-visibility: hidden;
+		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

@@ -10,6 +10,16 @@ export declare const toastStore: {
     /** Push a new toast notification. */
     push(message: string, variant?: "ok" | "pend" | "warn" | "fail", duration?: number): void;
 };
+/**
+ * Place once in your root layout. Trigger toasts anywhere via `toastStore.push(message, variant)`.
+ * Variants: 'ok' | 'pend' | 'warn' | 'fail'
+ * @example
+ * <Toast position="bottom-right" />
+ * @example
+ * toastStore.push('file saved', 'ok');
+ * toastStore.push('connection lost', 'fail');
+ * toastStore.push('uploading...', 'pend', 8000);
+ */
 interface Props {
     /** Position of the toast stack. */
     position?: 'bottom-right' | 'bottom-center';