@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/feedback/Skeleton.svelte

@@ -1,52 +1,52 @@
-<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';
+
+	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/StatusDot.svelte

@@ -1,54 +1,49 @@
-<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';
+
+	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>

package/dist/components/feedback/StatusLine.svelte

@@ -1,122 +1,122 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Status determining the glyph and color. */
-    status?: 'ok' | 'pend' | 'warn' | 'fail';
-    /** Message text displayed after the status glyph. */
-    message?: string;
-    /** Controls visibility with stagger animation. */
-    visible?: boolean;
-    /** When true, the full line inherits the status tone. */
-    tone?: 'split' | 'line';
-    /** Shows a blinking cursor after the message. */
-    cursor?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    status = 'ok',
-    message = '',
-    visible = false,
-    tone = 'split',
-    cursor = false,
-    class: className = '',
-  }: Props = $props();
-
-  const glyphMap: Record<string, string> = {
-    ok: '[ OK ]',
-    pend: '[ .. ]',
-    warn: '[WARN]',
-    fail: '[FAIL]',
-  };
-
-  const colorMap: Record<string, string> = {
-    ok: 'var(--status-ok)',
-    pend: 'var(--status-pend)',
-    warn: 'var(--status-warn)',
-    fail: 'var(--status-fail)',
-  };
-</script>
-
-<div
-  class={cn(
-    'hyvui-status-line',
-    visible && 'hyvui-status-line-visible',
-    tone === 'line' && 'hyvui-status-line-tone-line',
-    className
-  )}
-  style:color={tone === 'line' ? colorMap[status] : undefined}
-  aria-live="polite"
->
-  <span class="hyvui-status-glyph" style:color={tone === 'split' ? colorMap[status] : undefined}>
-    {glyphMap[status]}
-  </span>
-  <span class="hyvui-status-message">{message}</span>
-  {#if cursor}
-    <span class="hyvui-status-cursor" aria-hidden="true">_</span>
-  {/if}
-</div>
-
-<style>
-  .hyvui-status-line {
-    display: flex;
-    align-items: baseline;
-    gap: 0.75rem;
-    font-family: var(--font-mono);
-    font-size: 0.82rem;
-    opacity: 0;
-    transform: translateY(6px);
-    transition:
-      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
-      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .hyvui-status-line-visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .hyvui-status-glyph {
-    font-weight: 400;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
-  .hyvui-status-message {
-    color: var(--text-soft);
-  }
-
-  .hyvui-status-line-tone-line .hyvui-status-message,
-  .hyvui-status-line-tone-line .hyvui-status-glyph {
-    color: inherit;
-  }
-
-  .hyvui-status-cursor {
-    color: var(--muted-strong);
-    animation: blink 1s step-end infinite;
-    margin-left: 2px;
-  }
-
-  @keyframes blink {
-    50% {
-      opacity: 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-status-line {
-      transition: none;
-      transform: none;
-    }
-
-    .hyvui-status-line-visible {
-      opacity: 1;
-    }
-
-    .hyvui-status-cursor {
-      animation: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Status determining the glyph and color. */
+		status?: 'ok' | 'pend' | 'warn' | 'fail';
+		/** Message text displayed after the status glyph. */
+		message?: string;
+		/** Controls visibility with stagger animation. */
+		visible?: boolean;
+		/** When true, the full line inherits the status tone. */
+		tone?: 'split' | 'line';
+		/** Shows a blinking cursor after the message. */
+		cursor?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		status = 'ok',
+		message = '',
+		visible = false,
+		tone = 'split',
+		cursor = false,
+		class: className = ''
+	}: Props = $props();
+
+	const glyphMap: Record<string, string> = {
+		ok: '[ OK ]',
+		pend: '[ .. ]',
+		warn: '[WARN]',
+		fail: '[FAIL]'
+	};
+
+	const colorMap: Record<string, string> = {
+		ok: 'var(--status-ok)',
+		pend: 'var(--status-pend)',
+		warn: 'var(--status-warn)',
+		fail: 'var(--status-fail)'
+	};
+</script>
+
+<div
+	class={cn(
+		'hyvui-status-line',
+		visible && 'hyvui-status-line-visible',
+		tone === 'line' && 'hyvui-status-line-tone-line',
+		className
+	)}
+	style:color={tone === 'line' ? colorMap[status] : undefined}
+	aria-live="polite"
+>
+	<span class="hyvui-status-glyph" style:color={tone === 'split' ? colorMap[status] : undefined}>
+		{glyphMap[status]}
+	</span>
+	<span class="hyvui-status-message">{message}</span>
+	{#if cursor}
+		<span class="hyvui-status-cursor" aria-hidden="true">_</span>
+	{/if}
+</div>
+
+<style>
+	.hyvui-status-line {
+		display: flex;
+		align-items: baseline;
+		gap: 0.75rem;
+		font-family: var(--font-mono);
+		font-size: 0.82rem;
+		opacity: 0;
+		transform: translateY(6px);
+		transition:
+			opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+			transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.hyvui-status-line-visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.hyvui-status-glyph {
+		font-weight: 400;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.hyvui-status-message {
+		color: var(--text-soft);
+	}
+
+	.hyvui-status-line-tone-line .hyvui-status-message,
+	.hyvui-status-line-tone-line .hyvui-status-glyph {
+		color: inherit;
+	}
+
+	.hyvui-status-cursor {
+		color: var(--muted-strong);
+		animation: blink 1s step-end infinite;
+		margin-left: 2px;
+	}
+
+	@keyframes blink {
+		50% {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-status-line {
+			transition: none;
+			transform: none;
+		}
+
+		.hyvui-status-line-visible {
+			opacity: 1;
+		}
+
+		.hyvui-status-cursor {
+			animation: none;
+		}
+	}
+</style>