@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/ambient/ScanBand.svelte

@@ -1,91 +1,95 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Enable the scan animation. */
-    active?: boolean;
-    /** Animation axis. */
-    axis?: 'x' | 'y';
-    /** Thickness/width of the band. */
-    size?: string;
-    /** Animation duration. */
-    duration?: string;
-    /** Gradient used for the band. */
-    gradient?: string;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    active = true,
-    axis = 'y',
-    size = '1px',
-    duration = '8s',
-    gradient = 'linear-gradient(90deg, transparent, rgba(199, 156, 87, 0.18), transparent)',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-{#if active}
-  <div
-    class={cn('hyvui-scan-band', axis === 'x' ? 'hyvui-scan-band-x' : 'hyvui-scan-band-y', className)}
-    style:--scan-size={size}
-    style:--scan-duration={duration}
-    style:--scan-gradient={gradient}
-    aria-hidden="true"
-  ></div>
-{/if}
-
-<style>
-  .hyvui-scan-band {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    overflow: hidden;
-  }
-
-  .hyvui-scan-band::after {
-    content: '';
-    position: absolute;
-    background: var(--scan-gradient);
-  }
-
-  .hyvui-scan-band-y::after {
-    left: 0;
-    right: 0;
-    height: var(--scan-size);
-    animation: scan-band-y var(--scan-duration) linear infinite;
-  }
-
-  .hyvui-scan-band-x::after {
-    top: 0;
-    bottom: 0;
-    width: var(--scan-size);
-    animation: scan-band-x var(--scan-duration) linear infinite;
-  }
-
-  @keyframes scan-band-y {
-    0% {
-      transform: translateY(-100%);
-    }
-    100% {
-      transform: translateY(100vh);
-    }
-  }
-
-  @keyframes scan-band-x {
-    0% {
-      transform: translateX(-120%);
-    }
-    100% {
-      transform: translateX(520%);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-scan-band::after {
-      animation: none;
-      display: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Enable the scan animation. */
+		active?: boolean;
+		/** Animation axis. */
+		axis?: 'x' | 'y';
+		/** Thickness/width of the band. */
+		size?: string;
+		/** Animation duration. */
+		duration?: string;
+		/** Gradient used for the band. */
+		gradient?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		active = true,
+		axis = 'y',
+		size = '1px',
+		duration = '8s',
+		gradient = 'linear-gradient(90deg, transparent, rgba(199, 156, 87, 0.18), transparent)',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+{#if active}
+	<div
+		class={cn(
+			'hyvui-scan-band',
+			axis === 'x' ? 'hyvui-scan-band-x' : 'hyvui-scan-band-y',
+			className
+		)}
+		style:--scan-size={size}
+		style:--scan-duration={duration}
+		style:--scan-gradient={gradient}
+		aria-hidden="true"
+	></div>
+{/if}
+
+<style>
+	.hyvui-scan-band {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		overflow: hidden;
+	}
+
+	.hyvui-scan-band::after {
+		content: '';
+		position: absolute;
+		background: var(--scan-gradient);
+	}
+
+	.hyvui-scan-band-y::after {
+		left: 0;
+		right: 0;
+		height: var(--scan-size);
+		animation: scan-band-y var(--scan-duration) linear infinite;
+	}
+
+	.hyvui-scan-band-x::after {
+		top: 0;
+		bottom: 0;
+		width: var(--scan-size);
+		animation: scan-band-x var(--scan-duration) linear infinite;
+	}
+
+	@keyframes scan-band-y {
+		0% {
+			transform: translateY(-100%);
+		}
+		100% {
+			transform: translateY(100%);
+		}
+	}
+
+	@keyframes scan-band-x {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(520%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-scan-band::after {
+			animation: none;
+			display: none;
+		}
+	}
+</style>

package/dist/components/ambient/SignalRing.svelte

@@ -1,100 +1,100 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Enable the pulsing animation. */
-    active?: boolean;
-    /** Ring diameter in pixels. */
-    size?: number;
-    /** Ring color (CSS color value). */
-    color?: string;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    active = true,
-    size = 200,
-    color = 'var(--accent)',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div
-  class={cn('hyvui-signal-ring', className)}
-  style:width="{size}px"
-  style:height="{size}px"
-  aria-hidden="true"
->
-  {#if active}
-    <span class="hyvui-signal-ring-pulse hyvui-signal-ring-1" style:border-color={color}></span>
-    <span class="hyvui-signal-ring-pulse hyvui-signal-ring-2" style:border-color={color}></span>
-    <span class="hyvui-signal-ring-pulse hyvui-signal-ring-3" style:border-color={color}></span>
-  {/if}
-  <span class="hyvui-signal-ring-core" style:background-color={color}></span>
-</div>
-
-<style>
-  .hyvui-signal-ring {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-  }
-
-  .hyvui-signal-ring-core {
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    opacity: 0.6;
-  }
-
-  .hyvui-signal-ring-pulse {
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    border: 1px solid;
-    opacity: 0;
-    animation: signal-ring-expand 3.6s ease-out infinite;
-  }
-
-  .hyvui-signal-ring-1 {
-    animation-delay: 0s;
-  }
-
-  .hyvui-signal-ring-2 {
-    animation-delay: 1.2s;
-  }
-
-  .hyvui-signal-ring-3 {
-    animation-delay: 2.4s;
-  }
-
-  @keyframes signal-ring-expand {
-    0% {
-      transform: scale(0.1);
-      opacity: 0.4;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-signal-ring-pulse {
-      animation: none;
-      opacity: 0.08;
-      transform: scale(0.6);
-    }
-
-    .hyvui-signal-ring-2 {
-      transform: scale(0.8);
-    }
-
-    .hyvui-signal-ring-3 {
-      transform: scale(1);
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Enable the pulsing animation. */
+		active?: boolean;
+		/** Ring diameter in pixels. */
+		size?: number;
+		/** Ring color (CSS color value). */
+		color?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		active = true,
+		size = 200,
+		color = 'var(--accent)',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div
+	class={cn('hyvui-signal-ring', className)}
+	style:width="{size}px"
+	style:height="{size}px"
+	aria-hidden="true"
+>
+	{#if active}
+		<span class="hyvui-signal-ring-pulse hyvui-signal-ring-1" style:border-color={color}></span>
+		<span class="hyvui-signal-ring-pulse hyvui-signal-ring-2" style:border-color={color}></span>
+		<span class="hyvui-signal-ring-pulse hyvui-signal-ring-3" style:border-color={color}></span>
+	{/if}
+	<span class="hyvui-signal-ring-core" style:background-color={color}></span>
+</div>
+
+<style>
+	.hyvui-signal-ring {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+
+	.hyvui-signal-ring-core {
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+		opacity: 0.6;
+	}
+
+	.hyvui-signal-ring-pulse {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		border: 1px solid;
+		opacity: 0;
+		animation: signal-ring-expand 3.6s ease-out infinite;
+	}
+
+	.hyvui-signal-ring-1 {
+		animation-delay: 0s;
+	}
+
+	.hyvui-signal-ring-2 {
+		animation-delay: 1.2s;
+	}
+
+	.hyvui-signal-ring-3 {
+		animation-delay: 2.4s;
+	}
+
+	@keyframes signal-ring-expand {
+		0% {
+			transform: scale(0.1);
+			opacity: 0.4;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-signal-ring-pulse {
+			animation: none;
+			opacity: 0.08;
+			transform: scale(0.6);
+		}
+
+		.hyvui-signal-ring-2 {
+			transform: scale(0.8);
+		}
+
+		.hyvui-signal-ring-3 {
+			transform: scale(1);
+		}
+	}
+</style>

package/dist/components/ambient/ThreadLine.svelte

@@ -1,78 +1,71 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Start x position (CSS value). */
-    x1?: string;
-    /** Start y position (CSS value). */
-    y1?: string;
-    /** End x position (CSS value). */
-    x2?: string;
-    /** End y position (CSS value). */
-    y2?: string;
-    /** Enable the traveling dot animation. */
-    animated?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    x1 = '0%',
-    y1 = '0%',
-    x2 = '100%',
-    y2 = '100%',
-    animated = true,
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<svg
-  class={cn('hyvui-thread-line', className)}
-  aria-hidden="true"
->
-  <line
-    {x1} {y1} {x2} {y2}
-    stroke="var(--line)"
-    stroke-width="1"
-  />
-  {#if animated}
-    <circle r="2" fill="var(--accent)">
-      <animateMotion
-        dur="3s"
-        repeatCount="indefinite"
-        path="M 0,0 L 1,0"
-        keyPoints="0;1"
-        keyTimes="0;1"
-        calcMode="linear"
-      >
-        <mpath>
-          <line {x1} {y1} {x2} {y2} />
-        </mpath>
-      </animateMotion>
-      <animate
-        attributeName="opacity"
-        values="0;0.8;0.8;0"
-        keyTimes="0;0.1;0.85;1"
-        dur="3s"
-        repeatCount="indefinite"
-      />
-    </circle>
-  {/if}
-</svg>
-
-<style>
-  .hyvui-thread-line {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: visible;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-thread-line circle {
-      display: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Start x position (CSS value). */
+		x1?: string;
+		/** Start y position (CSS value). */
+		y1?: string;
+		/** End x position (CSS value). */
+		x2?: string;
+		/** End y position (CSS value). */
+		y2?: string;
+		/** Enable the traveling dot animation. */
+		animated?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		x1 = '0%',
+		y1 = '0%',
+		x2 = '100%',
+		y2 = '100%',
+		animated = true,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<svg class={cn('hyvui-thread-line', className)} aria-hidden="true">
+	<line {x1} {y1} {x2} {y2} stroke="var(--line)" stroke-width="1" />
+	{#if animated}
+		<circle r="2" fill="var(--accent)">
+			<animateMotion
+				dur="3s"
+				repeatCount="indefinite"
+				path="M 0,0 L 1,0"
+				keyPoints="0;1"
+				keyTimes="0;1"
+				calcMode="linear"
+			>
+				<mpath>
+					<line {x1} {y1} {x2} {y2} />
+				</mpath>
+			</animateMotion>
+			<animate
+				attributeName="opacity"
+				values="0;0.8;0.8;0"
+				keyTimes="0;0.1;0.85;1"
+				dur="3s"
+				repeatCount="indefinite"
+			/>
+		</circle>
+	{/if}
+</svg>
+
+<style>
+	.hyvui-thread-line {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		overflow: visible;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-thread-line circle {
+			display: none;
+		}
+	}
+</style>

package/dist/components/ambient/Vignette.svelte

@@ -1,26 +1,24 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-vignette', className)} aria-hidden="true"></div>
-
-<style>
-  .hyvui-vignette {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: var(--z-overlay);
-    background:
-      radial-gradient(ellipse at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4)),
-      radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(0, 0, 0, 0.5));
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class={cn('hyvui-vignette', className)} aria-hidden="true"></div>
+
+<style>
+	.hyvui-vignette {
+		position: fixed;
+		inset: 0;
+		pointer-events: none;
+		z-index: var(--z-overlay);
+		background:
+			radial-gradient(ellipse at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4)),
+			radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(0, 0, 0, 0.5));
+	}
+</style>

package/dist/components/depth/DepthLayer.svelte

@@ -1,27 +1,22 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { DepthLevel } from '../../system/depth/depth.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Z-level within a parent DepthStage. */
-    level?: DepthLevel;
-    /** HTML tag to render. */
-    as?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Layer content. */
-    children?: Snippet;
-  }
-
-  let {
-    level = 'ground',
-    as = 'div',
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<svelte:element this={as} class={cn(`depth-${level}`, className)}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { DepthLevel } from '../../system/depth/depth.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Z-level within a parent DepthStage. */
+		level?: DepthLevel;
+		/** HTML tag to render. */
+		as?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Layer content. */
+		children?: Snippet;
+	}
+
+	let { level = 'ground', as = 'div', class: className = '', children }: Props = $props();
+</script>
+
+<svelte:element this={as} class={cn(`depth-${level}`, className)}>
+	{#if children}{@render children()}{/if}
+</svelte:element>