@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/display/Avatar.svelte

@@ -1,69 +1,69 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Image source URL. */
-    src?: string;
-    /** Name for initials fallback. */
-    name?: string;
-    /** Avatar diameter in pixels. */
-    size?: number;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    src = '',
-    name = '',
-    size = 32,
-    class: className = '',
-  }: Props = $props();
-
-  const initials = $derived(
-    name
-      .split(' ')
-      .map((w) => w[0])
-      .join('')
-      .slice(0, 2)
-      .toUpperCase()
-  );
-</script>
-
-<span
-  class={cn('hyvui-avatar', className)}
-  style:width="{size}px"
-  style:height="{size}px"
-  style:font-size="{size * 0.38}px"
->
-  {#if src}
-    <img {src} alt={name} class="hyvui-avatar-img" />
-  {:else}
-    <span class="hyvui-avatar-initials">{initials}</span>
-  {/if}
-</span>
-
-<style>
-  .hyvui-avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background-color: var(--bg-elev);
-    border: 1px solid var(--line);
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .hyvui-avatar-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .hyvui-avatar-initials {
-    font-family: var(--font-mono);
-    font-weight: 400;
-    color: var(--muted);
-    letter-spacing: 0.04em;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <Avatar name="Jane Doe" size={40} />
+	 * <Avatar src="/avatars/user.jpg" name="Jane Doe" size={32} />
+	 */
+	interface Props {
+		/** Image source URL. */
+		src?: string;
+		/** Name for initials fallback. */
+		name?: string;
+		/** Avatar diameter in pixels. */
+		size?: number;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { src = '', name = '', size = 32, class: className = '' }: Props = $props();
+
+	const initials = $derived(
+		name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.slice(0, 2)
+			.toUpperCase()
+	);
+</script>
+
+<span
+	class={cn('hyvui-avatar', className)}
+	style:width="{size}px"
+	style:height="{size}px"
+	style:font-size="{size * 0.38}px"
+>
+	{#if src}
+		<img {src} alt={name} class="hyvui-avatar-img" />
+	{:else}
+		<span class="hyvui-avatar-initials">{initials}</span>
+	{/if}
+</span>
+
+<style>
+	.hyvui-avatar {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background-color: var(--bg-elev);
+		border: 1px solid var(--line);
+		overflow: hidden;
+		flex-shrink: 0;
+	}
+
+	.hyvui-avatar-img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.hyvui-avatar-initials {
+		font-family: var(--font-mono);
+		font-weight: 400;
+		color: var(--muted);
+		letter-spacing: 0.04em;
+	}
+</style>

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

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <Avatar name="Jane Doe" size={40} />
+ * <Avatar src="/avatars/user.jpg" name="Jane Doe" size={32} />
+ */
 interface Props {
     /** Image source URL. */
     src?: string;

package/dist/components/display/Badge.svelte

@@ -1,63 +1,75 @@
-<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';
+
+	/**
+	 * @example
+	 * <Badge variant="ok">online</Badge>
+	 * <Badge variant="warn">degraded</Badge>
+	 * <Badge variant="accent">new</Badge>
+	 */
+	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;
+	}
+
+	/* ── hextech: clipped top-left corner (hex gem cut) ───────────────── */
+	:global([data-register='hextech']) .hyvui-badge {
+		clip-path: polygon(6px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 6px);
+	}
+
+	/* ── arcane: diagonal parallelogram cut ───────────────────────────── */
+	:global([data-register='arcane']) .hyvui-badge {
+		clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
+	}
+</style>

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

@@ -1,4 +1,10 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <Badge variant="ok">online</Badge>
+ * <Badge variant="warn">degraded</Badge>
+ * <Badge variant="accent">new</Badge>
+ */
 interface Props {
     /** Badge color variant. */
     variant?: 'default' | 'accent' | 'signal' | 'ok' | 'warn' | 'fail';

package/dist/components/display/Blockquote.svelte

@@ -1,34 +1,35 @@
-<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';
+
+	/**
+	 * @example
+	 * <Blockquote>the signal arrives before the message.</Blockquote>
+	 */
+	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/Blockquote.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <Blockquote>the signal arrives before the message.</Blockquote>
+ */
 interface Props {
     /** Additional CSS classes. */
     class?: string;

package/dist/components/display/CodeBlock.svelte

@@ -1,76 +1,76 @@
-<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';
+
+	/**
+	 * @example
+	 * <CodeBlock code="npm install @hyvnt/hyvui" language="bash" />
+	 * <CodeBlock code={snippetString} language="typescript" copyable={false} />
+	 */
+	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/CodeBlock.svelte.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <CodeBlock code="npm install @hyvnt/hyvui" language="bash" />
+ * <CodeBlock code={snippetString} language="typescript" copyable={false} />
+ */
 interface Props {
     /** Code string to display. */
     code?: string;