@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/feedback/EmptyState.svelte

@@ -1,68 +1,75 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Primary message. */
-    title?: string;
-    /** Secondary description text. */
-    description?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Optional CTA slot (e.g. a Button). */
-    children?: Snippet;
-  }
-
-  let {
-    title = 'nothing here yet',
-    description = '',
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-empty', className)}>
-  <p class="hyvui-empty-title">{title}</p>
-  {#if description}
-    <p class="hyvui-empty-desc">{description}</p>
-  {/if}
-  {#if children}
-    <div class="hyvui-empty-action">
-      {@render children()}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .hyvui-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 2rem;
-    gap: 0.75rem;
-  }
-
-  .hyvui-empty-title {
-    font-family: var(--font-body);
-    font-size: 1.2rem;
-    font-weight: 400;
-    line-height: 0.93;
-    letter-spacing: -0.04em;
-    color: var(--text);
-    margin: 0;
-  }
-
-  .hyvui-empty-desc {
-    font-family: var(--font-body);
-    font-size: 0.9rem;
-    color: var(--muted);
-    line-height: 1.5;
-    max-width: 24rem;
-    margin: 0;
-  }
-
-  .hyvui-empty-action {
-    margin-top: 0.5rem;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @example
+	 * <EmptyState title="no records found" description="adjust your filters to see results" />
+	 * <EmptyState title="nothing here yet">
+	 *   <Button variant="primary" onclick={create}>create one</Button>
+	 * </EmptyState>
+	 */
+	interface Props {
+		/** Primary message. */
+		title?: string;
+		/** Secondary description text. */
+		description?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Optional CTA slot (e.g. a Button). */
+		children?: Snippet;
+	}
+
+	let {
+		title = 'nothing here yet',
+		description = '',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div class={cn('hyvui-empty', className)}>
+	<p class="hyvui-empty-title">{title}</p>
+	{#if description}
+		<p class="hyvui-empty-desc">{description}</p>
+	{/if}
+	{#if children}
+		<div class="hyvui-empty-action">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		padding: 2rem;
+		gap: 0.75rem;
+	}
+
+	.hyvui-empty-title {
+		font-family: var(--font-body);
+		font-size: 1.2rem;
+		font-weight: 400;
+		line-height: 0.93;
+		letter-spacing: -0.04em;
+		color: var(--text);
+		margin: 0;
+	}
+
+	.hyvui-empty-desc {
+		font-family: var(--font-body);
+		font-size: 0.9rem;
+		color: var(--muted);
+		line-height: 1.5;
+		max-width: 24rem;
+		margin: 0;
+	}
+
+	.hyvui-empty-action {
+		margin-top: 0.5rem;
+	}
+</style>

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

@@ -1,4 +1,11 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <EmptyState title="no records found" description="adjust your filters to see results" />
+ * <EmptyState title="nothing here yet">
+ *   <Button variant="primary" onclick={create}>create one</Button>
+ * </EmptyState>
+ */
 interface Props {
     /** Primary message. */
     title?: string;

package/dist/components/feedback/ErrorState.svelte

@@ -1,73 +1,78 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import StatusDot from './StatusDot.svelte';
-  import Button from '../inputs/Button.svelte';
-
-  interface Props {
-    /** Error condition title. Describes the condition, not the cause. */
-    title?: string;
-    /** Additional description text. */
-    description?: string;
-    /** Shows a retry button. */
-    retry?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires when the retry button is clicked. */
-    onretry?: () => void;
-  }
-
-  let {
-    title = 'the signal needs rest',
-    description = '',
-    retry = false,
-    class: className = '',
-    onretry,
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-error', className)}>
-  <StatusDot status="fail" size={8} />
-  <p class="hyvui-error-title">{title}</p>
-  {#if description}
-    <p class="hyvui-error-desc">{description}</p>
-  {/if}
-  {#if retry}
-    <div class="hyvui-error-action">
-      <Button variant="ghost" onclick={() => onretry?.()}>retry</Button>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .hyvui-error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 2rem;
-    gap: 0.75rem;
-  }
-
-  .hyvui-error-title {
-    font-family: var(--font-body);
-    font-size: 1.2rem;
-    font-weight: 400;
-    line-height: 0.93;
-    letter-spacing: -0.04em;
-    color: var(--text);
-    margin: 0;
-  }
-
-  .hyvui-error-desc {
-    font-family: var(--font-body);
-    font-size: 0.9rem;
-    color: var(--muted);
-    line-height: 1.5;
-    max-width: 24rem;
-    margin: 0;
-  }
-
-  .hyvui-error-action {
-    margin-top: 0.5rem;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import StatusDot from './StatusDot.svelte';
+	import Button from '../inputs/Button.svelte';
+
+	/**
+	 * @example
+	 * <ErrorState title="signal lost" description="the connection dropped unexpectedly" retry onretry={reload} />
+	 * <ErrorState title="the signal needs rest" />
+	 */
+	interface Props {
+		/** Error condition title. Describes the condition, not the cause. */
+		title?: string;
+		/** Additional description text. */
+		description?: string;
+		/** Shows a retry button. */
+		retry?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires when the retry button is clicked. */
+		onretry?: () => void;
+	}
+
+	let {
+		title = 'the signal needs rest',
+		description = '',
+		retry = false,
+		class: className = '',
+		onretry
+	}: Props = $props();
+</script>
+
+<div class={cn('hyvui-error', className)}>
+	<StatusDot status="fail" size={8} />
+	<p class="hyvui-error-title">{title}</p>
+	{#if description}
+		<p class="hyvui-error-desc">{description}</p>
+	{/if}
+	{#if retry}
+		<div class="hyvui-error-action">
+			<Button variant="ghost" onclick={() => onretry?.()}>retry</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-error {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		padding: 2rem;
+		gap: 0.75rem;
+	}
+
+	.hyvui-error-title {
+		font-family: var(--font-body);
+		font-size: 1.2rem;
+		font-weight: 400;
+		line-height: 0.93;
+		letter-spacing: -0.04em;
+		color: var(--text);
+		margin: 0;
+	}
+
+	.hyvui-error-desc {
+		font-family: var(--font-body);
+		font-size: 0.9rem;
+		color: var(--muted);
+		line-height: 1.5;
+		max-width: 24rem;
+		margin: 0;
+	}
+
+	.hyvui-error-action {
+		margin-top: 0.5rem;
+	}
+</style>

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

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <ErrorState title="signal lost" description="the connection dropped unexpectedly" retry onretry={reload} />
+ * <ErrorState title="the signal needs rest" />
+ */
 interface Props {
     /** Error condition title. Describes the condition, not the cause. */
     title?: string;

package/dist/components/feedback/Skeleton.svelte

@@ -1,52 +1,58 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Width of the skeleton element. */
-    width?: string;
-    /** Height of the skeleton element. */
-    height?: string;
-    /** Shape variant. */
-    variant?: 'text' | 'card' | 'circle' | 'custom';
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    width = '100%',
-    height = '1rem',
-    variant = 'text',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div
-  class={cn('hyvui-skeleton', variant === 'circle' && 'hyvui-skeleton-circle', className)}
-  style:width={width}
-  style:height={height}
-  aria-hidden="true"
-></div>
-
-<style>
-  .hyvui-skeleton {
-    background: linear-gradient(
-      90deg,
-      var(--bg-elev) 0%,
-      rgba(199, 156, 87, 0.06) 50%,
-      var(--bg-elev) 100%
-    );
-    background-size: 200% 100%;
-    animation: shimmer 2s linear infinite;
-  }
-
-  .hyvui-skeleton-circle {
-    border-radius: 50%;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-skeleton {
-      animation: none;
-      background: var(--bg-elev);
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <Skeleton height="1.2rem" width="60%" />
+	 * <Skeleton variant="circle" width="32px" height="32px" />
+	 * <Skeleton variant="card" height="120px" />
+	 */
+	interface Props {
+		/** Width of the skeleton element. */
+		width?: string;
+		/** Height of the skeleton element. */
+		height?: string;
+		/** Shape variant. */
+		variant?: 'text' | 'card' | 'circle' | 'custom';
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		width = '100%',
+		height = '1rem',
+		variant = 'text',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div
+	class={cn('hyvui-skeleton', variant === 'circle' && 'hyvui-skeleton-circle', className)}
+	style:width
+	style:height
+	aria-hidden="true"
+></div>
+
+<style>
+	.hyvui-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--bg-elev) 0%,
+			rgba(199, 156, 87, 0.06) 50%,
+			var(--bg-elev) 100%
+		);
+		background-size: 200% 100%;
+		animation: shimmer 2s linear infinite;
+	}
+
+	.hyvui-skeleton-circle {
+		border-radius: 50%;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-skeleton {
+			animation: none;
+			background: var(--bg-elev);
+		}
+	}
+</style>

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

@@ -1,3 +1,9 @@
+/**
+ * @example
+ * <Skeleton height="1.2rem" width="60%" />
+ * <Skeleton variant="circle" width="32px" height="32px" />
+ * <Skeleton variant="card" height="120px" />
+ */
 interface Props {
     /** Width of the skeleton element. */
     width?: string;

package/dist/components/feedback/StatusDot.svelte

@@ -1,54 +1,84 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Status state determining the dot color. */
-    status?: 'ok' | 'pend' | 'warn' | 'fail';
-    /** Enable pulse animation. */
-    pulse?: boolean;
-    /** Dot diameter in pixels. */
-    size?: number;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    status = 'ok',
-    pulse = true,
-    size = 6,
-    class: className = '',
-  }: Props = $props();
-
-  const colorMap: Record<string, string> = {
-    ok: 'var(--status-ok)',
-    pend: 'var(--status-pend)',
-    warn: 'var(--status-warn)',
-    fail: 'var(--status-fail)',
-  };
-</script>
-
-<span
-  class={cn('hyvui-status-dot', pulse && 'hyvui-status-dot-pulse', className)}
-  style:width="{size}px"
-  style:height="{size}px"
-  style:background-color={colorMap[status]}
-  aria-label="{status} status"
-></span>
-
-<style>
-  .hyvui-status-dot {
-    display: inline-block;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .hyvui-status-dot-pulse {
-    animation: pulse-dot 2s ease-in-out infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-status-dot-pulse {
-      animation: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <StatusDot status="ok" />
+	 * <StatusDot status="pend" pulse={false} />
+	 * <StatusDot status="fail" size={8} />
+	 */
+	interface Props {
+		/** Status state determining the dot color. */
+		status?: 'ok' | 'pend' | 'warn' | 'fail';
+		/** Enable pulse animation. */
+		pulse?: boolean;
+		/** Dot diameter in pixels. */
+		size?: number;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { status = 'ok', pulse = true, size = 6, class: className = '' }: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		ok: 'var(--status-ok)',
+		pend: 'var(--status-pend)',
+		warn: 'var(--status-warn)',
+		fail: 'var(--status-fail)'
+	};
+</script>
+
+<span
+	class={cn('hyvui-status-dot', pulse && 'hyvui-status-dot-pulse', className)}
+	style:width="{size}px"
+	style:height="{size}px"
+	style:background-color={colorMap[status]}
+	aria-label="{status} status"
+></span>
+
+<style>
+	.hyvui-status-dot {
+		display: inline-block;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.hyvui-status-dot-pulse {
+		animation: pulse-dot 2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-status-dot-pulse {
+			animation: none;
+		}
+	}
+
+	/* ── hextech: cyan ring pulse instead of scale ────────────────────── */
+	:global([data-register='hextech']) .hyvui-status-dot-pulse {
+		animation: sd-hextech-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+	}
+
+	@keyframes sd-hextech-pulse {
+		0%, 100% { box-shadow: 0 0 0 0 rgba(93, 217, 240, 0.0); }
+		50%       { box-shadow: 0 0 0 4px rgba(93, 217, 240, 0.0); opacity: 1; }
+		30%       { box-shadow: 0 0 0 3px rgba(93, 217, 240, 0.35); opacity: 1; }
+	}
+
+	/* ── arcane: shimmer ripple ───────────────────────────────────────── */
+	:global([data-register='arcane']) .hyvui-status-dot-pulse {
+		animation: sd-arcane-pulse 2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
+	}
+
+	@keyframes sd-arcane-pulse {
+		0%        { box-shadow: 0 0 0 0 rgba(184, 69, 201, 0.6); opacity: 1; }
+		70%       { box-shadow: 0 0 0 5px rgba(184, 69, 201, 0); opacity: 0.85; }
+		100%      { box-shadow: 0 0 0 0 rgba(184, 69, 201, 0); opacity: 1; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global([data-register='hextech']) .hyvui-status-dot-pulse,
+		:global([data-register='arcane']) .hyvui-status-dot-pulse {
+			animation: none;
+		}
+	}
+</style>

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

@@ -1,3 +1,9 @@
+/**
+ * @example
+ * <StatusDot status="ok" />
+ * <StatusDot status="pend" pulse={false} />
+ * <StatusDot status="fail" size={8} />
+ */
 interface Props {
     /** Status state determining the dot color. */
     status?: 'ok' | 'pend' | 'warn' | 'fail';