@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/display/MetricCard.svelte

@@ -1,83 +1,100 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import Surface from '../primitives/Surface.svelte';
-
-  interface Props {
-    /** Metric label. */
-    label?: string;
-    /** Metric value. */
-    value?: string | number;
-    /** Trend direction. */
-    trend?: 'up' | 'down' | 'neutral';
-    /** Trend value string (e.g. "+12%"). */
-    trendValue?: string;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    label = '',
-    value = '',
-    trend,
-    trendValue = '',
-    class: className = '',
-  }: Props = $props();
-
-  const trendArrow: Record<string, string> = {
-    up: '\u2191',
-    down: '\u2193',
-    neutral: '\u2014',
-  };
-
-  const trendColor: Record<string, string> = {
-    up: 'var(--status-ok)',
-    down: 'var(--status-fail)',
-    neutral: 'var(--muted)',
-  };
-</script>
-
-<Surface variant="card" class={cn('hyvui-metric', className)}>
-  <span class="hyvui-metric-label">{label}</span>
-  <span class="hyvui-metric-value">{value}</span>
-  {#if trend}
-    <span class="hyvui-metric-trend" style:color={trendColor[trend]}>
-      {trendArrow[trend]}{#if trendValue}{' '}{trendValue}{/if}
-    </span>
-  {/if}
-</Surface>
-
-<style>
-  :global(.hyvui-metric) {
-    padding: var(--space-card);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
-  }
-
-  .hyvui-metric-label {
-    font-family: var(--font-mono);
-    font-size: 0.68rem;
-    font-weight: 400;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: var(--muted-strong);
-    line-height: 1.2;
-  }
-
-  .hyvui-metric-value {
-    font-family: var(--font-body);
-    font-size: clamp(2rem, 5vw, 3rem);
-    font-weight: 400;
-    line-height: 0.95;
-    letter-spacing: -0.05em;
-    color: var(--text);
-  }
-
-  .hyvui-metric-trend {
-    font-family: var(--font-mono);
-    font-size: 0.72rem;
-    font-weight: 400;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Surface from '../primitives/Surface.svelte';
+
+	/**
+	 * @see surface — add `use:surface` on MetricCard for an entrance animation on mount.
+	 * @example
+	 * <MetricCard label="active sessions" value="1,284" trend="up" trendValue="+8%" />
+	 * <MetricCard label="error rate" value="0.02%" trend="down" trendValue="-0.01%" />
+	 */
+	interface Props {
+		/** Metric label. */
+		label?: string;
+		/** Metric value. */
+		value?: string | number;
+		/** Trend direction. */
+		trend?: 'up' | 'down' | 'neutral';
+		/** Trend value string (e.g. "+12%"). */
+		trendValue?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { label = '', value = '', trend, trendValue = '', class: className = '' }: Props = $props();
+
+	const trendArrow: Record<string, string> = {
+		up: '\u2191',
+		down: '\u2193',
+		neutral: '\u2014'
+	};
+
+	const trendColor: Record<string, string> = {
+		up: 'var(--status-ok)',
+		down: 'var(--status-fail)',
+		neutral: 'var(--muted)'
+	};
+</script>
+
+<Surface variant="card" class={cn('hyvui-metric', className)}>
+	<span class="hyvui-metric-label">{label}</span>
+	<span class="hyvui-metric-value">{value}</span>
+	{#if trend}
+		<span class="hyvui-metric-trend" style:color={trendColor[trend]}>
+			{trendArrow[trend]}{#if trendValue}{' '}{trendValue}{/if}
+		</span>
+	{/if}
+</Surface>
+
+<style>
+	:global(.hyvui-metric) {
+		padding: var(--space-card);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm);
+		transition:
+			transform var(--transition-smooth),
+			border-color var(--transition-fast);
+	}
+
+	:global(.hyvui-metric:hover) {
+		transform: translateY(-1px);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.hyvui-metric) {
+			transition: none;
+		}
+
+		:global(.hyvui-metric:hover) {
+			transform: none;
+		}
+	}
+
+	.hyvui-metric-label {
+		font-family: var(--font-mono);
+		font-size: 0.68rem;
+		font-weight: 400;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		color: var(--muted-strong);
+		line-height: 1.2;
+	}
+
+	.hyvui-metric-value {
+		font-family: var(--font-body);
+		font-size: clamp(2rem, 5vw, 3rem);
+		font-weight: 400;
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+		color: var(--text);
+	}
+
+	.hyvui-metric-trend {
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		font-weight: 400;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+	}
+</style>

package/dist/components/display/MetricCard.svelte.d.ts

@@ -1,3 +1,9 @@
+/**
+ * @see surface — add `use:surface` on MetricCard for an entrance animation on mount.
+ * @example
+ * <MetricCard label="active sessions" value="1,284" trend="up" trendValue="+8%" />
+ * <MetricCard label="error rate" value="0.02%" trend="down" trendValue="-0.01%" />
+ */
 interface Props {
     /** Metric label. */
     label?: string;

package/dist/components/display/Table.svelte

@@ -1,104 +1,106 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import EmptyState from '../feedback/EmptyState.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface TableColumn {
-    key: string;
-    label: string;
-    align?: 'left' | 'center' | 'right';
-  }
-
-  interface Props {
-    /** Column definitions. */
-    columns?: TableColumn[];
-    /** Row data objects. */
-    rows?: Record<string, any>[];
-    /** Additional CSS classes. */
-    class?: string;
-    /** Custom empty state slot. */
-    empty?: Snippet;
-  }
-
-  let {
-    columns = [],
-    rows = [],
-    class: className = '',
-    empty,
-  }: Props = $props();
-</script>
-
-{#if rows.length === 0}
-  {#if empty}
-    {@render empty()}
-  {:else}
-    <EmptyState title="no data" />
-  {/if}
-{:else}
-  <div class={cn('hyvui-table-wrap', className)}>
-    <table class="hyvui-table">
-      <thead>
-        <tr>
-          {#each columns as col}
-            <th class="hyvui-table-th" style:text-align={col.align ?? 'left'}>{col.label}</th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each rows as row}
-          <tr class="hyvui-table-row">
-            {#each columns as col}
-              <td class="hyvui-table-td" style:text-align={col.align ?? 'left'}>
-                {row[col.key] ?? ''}
-              </td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-{/if}
-
-<style>
-  .hyvui-table-wrap {
-    overflow-x: auto;
-  }
-
-  .hyvui-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .hyvui-table-th {
-    font-family: var(--font-mono);
-    font-size: 0.68rem;
-    font-weight: 400;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--muted-strong);
-    padding: 0.625rem 0.75rem;
-    border-bottom: 1px solid var(--line);
-  }
-
-  .hyvui-table-td {
-    font-family: var(--font-body);
-    font-size: 1rem;
-    color: var(--text-soft);
-    padding: 0.625rem 0.75rem;
-    border-bottom: 1px solid var(--line);
-  }
-
-  .hyvui-table-row {
-    transition: background-color var(--transition-fast);
-  }
-
-  .hyvui-table-row:hover {
-    background-color: rgba(199, 156, 87, 0.04);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-table-row {
-      transition: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import EmptyState from '../feedback/EmptyState.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface TableColumn {
+		key: string;
+		label: string;
+		align?: 'left' | 'center' | 'right';
+	}
+
+	/**
+	 * @example
+	 * <Table
+	 *   columns={[{ key: 'name', label: 'name' }, { key: 'status', label: 'status' }]}
+	 *   rows={[{ name: 'alpha', status: 'active' }, { name: 'beta', status: 'pending' }]}
+	 * />
+	 */
+	interface Props {
+		/** Column definitions. */
+		columns?: TableColumn[];
+		/** Row data objects. */
+		rows?: Record<string, any>[];
+		/** Additional CSS classes. */
+		class?: string;
+		/** Custom empty state slot. */
+		empty?: Snippet;
+	}
+
+	let { columns = [], rows = [], class: className = '', empty }: Props = $props();
+</script>
+
+{#if rows.length === 0}
+	{#if empty}
+		{@render empty()}
+	{:else}
+		<EmptyState title="no data" />
+	{/if}
+{:else}
+	<div class={cn('hyvui-table-wrap', className)}>
+		<table class="hyvui-table">
+			<thead>
+				<tr>
+					{#each columns as col}
+						<th class="hyvui-table-th" style:text-align={col.align ?? 'left'}>{col.label}</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each rows as row}
+					<tr class="hyvui-table-row">
+						{#each columns as col}
+							<td class="hyvui-table-td" style:text-align={col.align ?? 'left'}>
+								{row[col.key] ?? ''}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{/if}
+
+<style>
+	.hyvui-table-wrap {
+		overflow-x: auto;
+	}
+
+	.hyvui-table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	.hyvui-table-th {
+		font-family: var(--font-mono);
+		font-size: 0.68rem;
+		font-weight: 400;
+		letter-spacing: 0.14em;
+		text-transform: uppercase;
+		color: var(--muted-strong);
+		padding: 0.625rem 0.75rem;
+		border-bottom: 1px solid var(--line);
+	}
+
+	.hyvui-table-td {
+		font-family: var(--font-body);
+		font-size: 1rem;
+		color: var(--text-soft);
+		padding: 0.625rem 0.75rem;
+		border-bottom: 1px solid var(--line);
+	}
+
+	.hyvui-table-row {
+		transition: background-color var(--transition-fast);
+	}
+
+	.hyvui-table-row:hover {
+		background-color: rgba(199, 156, 87, 0.04);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-table-row {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/display/Table.svelte.d.ts

@@ -4,6 +4,13 @@ interface TableColumn {
     label: string;
     align?: 'left' | 'center' | 'right';
 }
+/**
+ * @example
+ * <Table
+ *   columns={[{ key: 'name', label: 'name' }, { key: 'status', label: 'status' }]}
+ *   rows={[{ name: 'alpha', status: 'active' }, { name: 'beta', status: 'pending' }]}
+ * />
+ */
 interface Props {
     /** Column definitions. */
     columns?: TableColumn[];

package/dist/components/feedback/Alert.svelte

@@ -1,76 +1,95 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Alert variant determining accent color. */
-    variant?: 'info' | 'warn' | 'error' | 'ok';
-    /** Optional title text. */
-    title?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Alert body content. */
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'info',
-    title = '',
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const colorMap: Record<string, string> = {
-    info: 'var(--signal)',
-    warn: 'var(--status-warn)',
-    error: 'var(--status-fail)',
-    ok: 'var(--status-ok)',
-  };
-
-  const bgMap: Record<string, string> = {
-    info: 'rgba(121, 166, 163, 0.06)',
-    warn: 'rgba(199, 156, 87, 0.06)',
-    error: 'rgba(182, 106, 72, 0.06)',
-    ok: 'rgba(121, 166, 163, 0.06)',
-  };
-</script>
-
-<div
-  class={cn('hyvui-alert', className)}
-  style:border-left-color={colorMap[variant]}
-  style:background-color={bgMap[variant]}
-  role="alert"
->
-  {#if title}
-    <div class="hyvui-alert-title">{title}</div>
-  {/if}
-  {#if children}
-    <div class="hyvui-alert-body">
-      {@render children()}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .hyvui-alert {
-    border-left: 2px solid;
-    padding: 0.75rem 1rem;
-  }
-
-  .hyvui-alert-title {
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 400;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-soft);
-    margin-bottom: 0.375rem;
-  }
-
-  .hyvui-alert-body {
-    font-family: var(--font-body);
-    font-size: 0.9rem;
-    color: var(--text-soft);
-    line-height: 1.5;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @example
+	 * <Alert variant="warn" title="rate limited">requests paused for 60 seconds</Alert>
+	 * <Alert variant="error">connection refused</Alert>
+	 * <Alert variant="ok" title="deployment complete">all services nominal</Alert>
+	 */
+	interface Props {
+		/** Alert variant determining accent color. */
+		variant?: 'info' | 'warn' | 'error' | 'ok';
+		/** Optional title text. */
+		title?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Alert body content. */
+		children?: Snippet;
+	}
+
+	let { variant = 'info', title = '', class: className = '', children }: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		info: 'var(--signal)',
+		warn: 'var(--status-warn)',
+		error: 'var(--status-fail)',
+		ok: 'var(--status-ok)'
+	};
+
+	const bgMap: Record<string, string> = {
+		info: 'rgba(121, 166, 163, 0.06)',
+		warn: 'rgba(199, 156, 87, 0.06)',
+		error: 'rgba(182, 106, 72, 0.06)',
+		ok: 'rgba(121, 166, 163, 0.06)'
+	};
+</script>
+
+<div
+	class={cn('hyvui-alert', className)}
+	style:border-left-color={colorMap[variant]}
+	style:background-color={bgMap[variant]}
+	role="alert"
+>
+	{#if title}
+		<div class="hyvui-alert-title">{title}</div>
+	{/if}
+	{#if children}
+		<div class="hyvui-alert-body">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-alert {
+		border-left: 2px solid;
+		padding: 0.75rem 1rem;
+		animation: alert-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
+	}
+
+	@keyframes alert-in {
+		from {
+			opacity: 0;
+			transform: translateX(-6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-alert {
+			animation: none;
+		}
+	}
+
+	.hyvui-alert-title {
+		font-family: var(--font-mono);
+		font-size: 0.75rem;
+		font-weight: 400;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--text-soft);
+		margin-bottom: 0.375rem;
+	}
+
+	.hyvui-alert-body {
+		font-family: var(--font-body);
+		font-size: 0.9rem;
+		color: var(--text-soft);
+		line-height: 1.5;
+	}
+</style>

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

@@ -1,4 +1,10 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <Alert variant="warn" title="rate limited">requests paused for 60 seconds</Alert>
+ * <Alert variant="error">connection refused</Alert>
+ * <Alert variant="ok" title="deployment complete">all services nominal</Alert>
+ */
 interface Props {
     /** Alert variant determining accent color. */
     variant?: 'info' | 'warn' | 'error' | 'ok';