@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/display/Badge.svelte

@@ -1,63 +1,59 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Badge color variant. */
-    variant?: 'default' | 'accent' | 'signal' | 'ok' | 'warn' | 'fail';
-    /** Additional CSS classes. */
-    class?: string;
-    /** Badge text. */
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'default',
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const colorMap: Record<string, string> = {
-    default: 'var(--muted)',
-    accent: 'var(--accent)',
-    signal: 'var(--signal)',
-    ok: 'var(--status-ok)',
-    warn: 'var(--status-warn)',
-    fail: 'var(--status-fail)',
-  };
-
-  const bgMap: Record<string, string> = {
-    default: 'rgba(167, 157, 139, 0.08)',
-    accent: 'rgba(199, 156, 87, 0.08)',
-    signal: 'rgba(121, 166, 163, 0.08)',
-    ok: 'rgba(121, 166, 163, 0.08)',
-    warn: 'rgba(199, 156, 87, 0.08)',
-    fail: 'rgba(182, 106, 72, 0.08)',
-  };
-</script>
-
-<span
-  class={cn('hyvui-badge', className)}
-  style:color={colorMap[variant]}
-  style:background-color={bgMap[variant]}
-  style:border-color={colorMap[variant]}
->
-  {#if children}{@render children()}{/if}
-</span>
-
-<style>
-  .hyvui-badge {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--font-mono);
-    font-size: 0.62rem;
-    font-weight: 400;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    line-height: 1;
-    padding: 0.25rem 0.5rem;
-    border: 1px solid;
-    border-color: currentColor;
-    opacity: 0.8;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Badge color variant. */
+		variant?: 'default' | 'accent' | 'signal' | 'ok' | 'warn' | 'fail';
+		/** Additional CSS classes. */
+		class?: string;
+		/** Badge text. */
+		children?: Snippet;
+	}
+
+	let { variant = 'default', class: className = '', children }: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		default: 'var(--muted)',
+		accent: 'var(--accent)',
+		signal: 'var(--signal)',
+		ok: 'var(--status-ok)',
+		warn: 'var(--status-warn)',
+		fail: 'var(--status-fail)'
+	};
+
+	const bgMap: Record<string, string> = {
+		default: 'rgba(167, 157, 139, 0.08)',
+		accent: 'rgba(199, 156, 87, 0.08)',
+		signal: 'rgba(121, 166, 163, 0.08)',
+		ok: 'rgba(121, 166, 163, 0.08)',
+		warn: 'rgba(199, 156, 87, 0.08)',
+		fail: 'rgba(182, 106, 72, 0.08)'
+	};
+</script>
+
+<span
+	class={cn('hyvui-badge', className)}
+	style:color={colorMap[variant]}
+	style:background-color={bgMap[variant]}
+	style:border-color={colorMap[variant]}
+>
+	{#if children}{@render children()}{/if}
+</span>
+
+<style>
+	.hyvui-badge {
+		display: inline-flex;
+		align-items: center;
+		font-family: var(--font-mono);
+		font-size: 0.62rem;
+		font-weight: 400;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		line-height: 1;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid;
+		border-color: currentColor;
+		opacity: 0.8;
+	}
+</style>

package/dist/components/display/Blockquote.svelte

@@ -1,34 +1,31 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Additional CSS classes. */
-    class?: string;
-    /** Quote content. */
-    children?: Snippet;
-  }
-
-  let {
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<blockquote class={cn('hyvui-blockquote', className)}>
-  {#if children}{@render children()}{/if}
-</blockquote>
-
-<style>
-  .hyvui-blockquote {
-    font-family: var(--font-body);
-    font-style: italic;
-    font-weight: 400;
-    color: var(--text-soft);
-    line-height: 1.6;
-    margin: 0;
-    padding: 1rem 1.25rem;
-    border-left: 2px solid var(--line-strong);
-    background: linear-gradient(135deg, rgba(199, 156, 87, 0.06), transparent 60%);
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Additional CSS classes. */
+		class?: string;
+		/** Quote content. */
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<blockquote class={cn('hyvui-blockquote', className)}>
+	{#if children}{@render children()}{/if}
+</blockquote>
+
+<style>
+	.hyvui-blockquote {
+		font-family: var(--font-body);
+		font-style: italic;
+		font-weight: 400;
+		color: var(--text-soft);
+		line-height: 1.6;
+		margin: 0;
+		padding: 1rem 1.25rem;
+		border-left: 2px solid var(--line-strong);
+		background: linear-gradient(135deg, rgba(199, 156, 87, 0.06), transparent 60%);
+	}
+</style>

package/dist/components/display/CodeBlock.svelte

@@ -1,76 +1,71 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import Button from '../inputs/Button.svelte';
-
-  interface Props {
-    /** Code string to display. */
-    code?: string;
-    /** Language label (informational only, no syntax highlighting built-in). */
-    language?: string;
-    /** Show copy-to-clipboard button. */
-    copyable?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    code = '',
-    language = '',
-    copyable = true,
-    class: className = '',
-  }: Props = $props();
-
-  let copied = $state(false);
-
-  async function copyCode() {
-    try {
-      await navigator.clipboard.writeText(code);
-      copied = true;
-      setTimeout(() => {
-        copied = false;
-      }, 2000);
-    } catch {
-      // clipboard access denied
-    }
-  }
-</script>
-
-<div class={cn('hyvui-codeblock', className)}>
-  {#if copyable}
-    <div class="hyvui-codeblock-actions">
-      <Button variant="ghost" size="sm" onclick={copyCode}>
-        {copied ? 'copied' : 'copy'}
-      </Button>
-    </div>
-  {/if}
-  <pre class="hyvui-codeblock-pre"><code class="hyvui-codeblock-code">{code}</code></pre>
-</div>
-
-<style>
-  .hyvui-codeblock {
-    position: relative;
-    background-color: var(--bg-elev);
-    border: 1px solid var(--line);
-    overflow: hidden;
-  }
-
-  .hyvui-codeblock-actions {
-    position: absolute;
-    top: 0.375rem;
-    right: 0.375rem;
-    z-index: 1;
-  }
-
-  .hyvui-codeblock-pre {
-    margin: 0;
-    padding: 1rem;
-    overflow-x: auto;
-  }
-
-  .hyvui-codeblock-code {
-    font-family: var(--font-mono);
-    font-size: 0.82rem;
-    color: var(--text-soft);
-    line-height: 1.6;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Button from '../inputs/Button.svelte';
+
+	interface Props {
+		/** Code string to display. */
+		code?: string;
+		/** Language label (informational only, no syntax highlighting built-in). */
+		language?: string;
+		/** Show copy-to-clipboard button. */
+		copyable?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { code = '', language = '', copyable = true, class: className = '' }: Props = $props();
+
+	let copied = $state(false);
+
+	async function copyCode() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch {
+			// clipboard access denied
+		}
+	}
+</script>
+
+<div class={cn('hyvui-codeblock', className)}>
+	{#if copyable}
+		<div class="hyvui-codeblock-actions">
+			<Button variant="ghost" size="sm" onclick={copyCode}>
+				{copied ? 'copied' : 'copy'}
+			</Button>
+		</div>
+	{/if}
+	<pre class="hyvui-codeblock-pre"><code class="hyvui-codeblock-code">{code}</code></pre>
+</div>
+
+<style>
+	.hyvui-codeblock {
+		position: relative;
+		background-color: var(--bg-elev);
+		border: 1px solid var(--line);
+		overflow: hidden;
+	}
+
+	.hyvui-codeblock-actions {
+		position: absolute;
+		top: 0.375rem;
+		right: 0.375rem;
+		z-index: 1;
+	}
+
+	.hyvui-codeblock-pre {
+		margin: 0;
+		padding: 1rem;
+		overflow-x: auto;
+	}
+
+	.hyvui-codeblock-code {
+		font-family: var(--font-mono);
+		font-size: 0.82rem;
+		color: var(--text-soft);
+		line-height: 1.6;
+	}
+</style>

package/dist/components/display/MetricCard.svelte

@@ -1,83 +1,77 @@
-<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';
+
+	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>