@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/patterns/PageHeader.svelte

@@ -1,114 +1,109 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Page title. */
-    title?: string;
-    /** Page subtitle. */
-    subtitle?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Breadcrumb slot. */
-    breadcrumb?: Snippet;
-    /** Actions slot (right-aligned). */
-    actions?: Snippet;
-  }
-
-  let {
-    title = '',
-    subtitle = '',
-    class: className = '',
-    breadcrumb,
-    actions,
-  }: Props = $props();
-</script>
-
-<div class={cn('hyvui-page-header', className)}>
-  {#if breadcrumb}
-    <div class="hyvui-page-header-breadcrumb">
-      {@render breadcrumb()}
-    </div>
-  {/if}
-  <div class="hyvui-page-header-row">
-    <div class="hyvui-page-header-text">
-      <h1 class="hyvui-page-header-title">{title}</h1>
-      {#if subtitle}
-        <p class="hyvui-page-header-subtitle">{subtitle}</p>
-      {/if}
-    </div>
-    {#if actions}
-      <div class="hyvui-page-header-actions">
-        {@render actions()}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .hyvui-page-header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-    padding-bottom: var(--space-lg);
-    border-bottom: 1px solid var(--line);
-  }
-
-  .hyvui-page-header-breadcrumb {
-    min-width: 0;
-  }
-
-  .hyvui-page-header-row {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--space-xl);
-  }
-
-  .hyvui-page-header-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
-    min-width: 0;
-  }
-
-  .hyvui-page-header-title {
-    font-family: var(--font-body);
-    font-size: clamp(2rem, 4vw, 3.25rem);
-    font-weight: 400;
-    line-height: 0.95;
-    letter-spacing: -0.05em;
-    color: var(--text);
-    margin: 0;
-    text-wrap: balance;
-  }
-
-  .hyvui-page-header-subtitle {
-    font-family: var(--font-body);
-    font-size: 1.04rem;
-    color: var(--muted);
-    line-height: 1.62;
-    margin: 0;
-    max-width: 32rem;
-    text-wrap: pretty;
-  }
-
-  .hyvui-page-header-actions {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--space-sm);
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 720px) {
-    .hyvui-page-header-row {
-      flex-direction: column;
-    }
-
-    .hyvui-page-header-actions {
-      justify-content: flex-start;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Page title. */
+		title?: string;
+		/** Page subtitle. */
+		subtitle?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Breadcrumb slot. */
+		breadcrumb?: Snippet;
+		/** Actions slot (right-aligned). */
+		actions?: Snippet;
+	}
+
+	let { title = '', subtitle = '', class: className = '', breadcrumb, actions }: Props = $props();
+</script>
+
+<div class={cn('hyvui-page-header', className)}>
+	{#if breadcrumb}
+		<div class="hyvui-page-header-breadcrumb">
+			{@render breadcrumb()}
+		</div>
+	{/if}
+	<div class="hyvui-page-header-row">
+		<div class="hyvui-page-header-text">
+			<h1 class="hyvui-page-header-title">{title}</h1>
+			{#if subtitle}
+				<p class="hyvui-page-header-subtitle">{subtitle}</p>
+			{/if}
+		</div>
+		{#if actions}
+			<div class="hyvui-page-header-actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.hyvui-page-header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md);
+		padding-bottom: var(--space-lg);
+		border-bottom: 1px solid var(--line);
+		container-type: inline-size;
+	}
+
+	.hyvui-page-header-breadcrumb {
+		min-width: 0;
+	}
+
+	.hyvui-page-header-row {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--space-xl);
+	}
+
+	.hyvui-page-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm);
+		min-width: 0;
+	}
+
+	.hyvui-page-header-title {
+		font-family: var(--font-body);
+		font-size: clamp(2rem, 4vw, 3.25rem);
+		font-weight: 400;
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+		color: var(--text);
+		margin: 0;
+		text-wrap: balance;
+	}
+
+	.hyvui-page-header-subtitle {
+		font-family: var(--font-body);
+		font-size: 1.04rem;
+		color: var(--muted);
+		line-height: 1.62;
+		margin: 0;
+		max-width: 32rem;
+		text-wrap: pretty;
+	}
+
+	.hyvui-page-header-actions {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: var(--space-sm);
+		flex-shrink: 0;
+	}
+
+	@container (max-width: var(--cq-sm)) {
+		.hyvui-page-header-row {
+			flex-direction: column;
+		}
+
+		.hyvui-page-header-actions {
+			justify-content: flex-start;
+		}
+	}
+</style>

package/dist/components/patterns/SearchBar.svelte

@@ -1,59 +1,54 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import Input from '../inputs/Input.svelte';
-  import StatusDot from '../feedback/StatusDot.svelte';
-
-  interface Props {
-    /** Current search value (bindable). */
-    value?: string;
-    /** Placeholder text. */
-    placeholder?: string;
-    /** Shows a loading indicator. */
-    loading?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires on input with the current value. */
-    onsearch?: (value: string) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    placeholder = 'search',
-    loading = false,
-    class: className = '',
-    onsearch,
-  }: Props = $props();
-
-  function handleInput() {
-    onsearch?.(value);
-  }
-</script>
-
-<div class={cn('hyvui-search-bar', className)}>
-  <Input
-    type="search"
-    bind:value
-    {placeholder}
-    oninput={handleInput}
-  />
-  {#if loading}
-    <div class="hyvui-search-loading">
-      <StatusDot status="pend" size={6} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .hyvui-search-bar {
-    position: relative;
-    width: 100%;
-  }
-
-  .hyvui-search-loading {
-    position: absolute;
-    right: 0.9rem;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Input from '../inputs/Input.svelte';
+	import StatusDot from '../feedback/StatusDot.svelte';
+
+	interface Props {
+		/** Current search value (bindable). */
+		value?: string;
+		/** Placeholder text. */
+		placeholder?: string;
+		/** Shows a loading indicator. */
+		loading?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires on input with the current value. */
+		onsearch?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'search',
+		loading = false,
+		class: className = '',
+		onsearch
+	}: Props = $props();
+
+	function handleInput() {
+		onsearch?.(value);
+	}
+</script>
+
+<div class={cn('hyvui-search-bar', className)}>
+	<Input type="search" bind:value {placeholder} oninput={handleInput} />
+	{#if loading}
+		<div class="hyvui-search-loading">
+			<StatusDot status="pend" size={6} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-search-bar {
+		position: relative;
+		width: 100%;
+	}
+
+	.hyvui-search-loading {
+		position: absolute;
+		right: 0.9rem;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+</style>

package/dist/components/patterns/TerminalBoot.svelte

@@ -1,104 +1,104 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import StatusLine from '../feedback/StatusLine.svelte';
-  import { onMount } from 'svelte';
-
-  interface BootLine {
-    status: 'ok' | 'pend' | 'warn' | 'fail';
-    message: string;
-  }
-
-  interface Props {
-    /** Lines to display in sequence. */
-    lines?: BootLine[];
-    /** Initial delay before the first line appears (ms). */
-    delay?: number;
-    /** Interval between each line appearing (ms). */
-    interval?: number;
-    /** When true, shows all lines immediately. */
-    instant?: boolean;
-    /** Passes cursor visibility to visible lines. */
-    showCursor?: boolean;
-    /** Status line tone mode. */
-    tone?: 'split' | 'line';
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires when all lines have appeared. */
-    oncomplete?: () => void;
-  }
-
-  let {
-    lines = [],
-    delay = 600,
-    interval = 700,
-    instant = false,
-    showCursor = false,
-    tone = 'split',
-    class: className = '',
-    oncomplete,
-  }: Props = $props();
-
-  let visibleCount = $state(0);
-
-  onMount(() => {
-    if (lines.length === 0) {
-      oncomplete?.();
-      return;
-    }
-
-    if (instant) {
-      visibleCount = lines.length;
-      oncomplete?.();
-      return;
-    }
-
-    const timers: number[] = [];
-    timers.push(
-      window.setTimeout(() => {
-        visibleCount = 1;
-
-        if (lines.length === 1) {
-          oncomplete?.();
-          return;
-        }
-
-        const stepTimer = window.setInterval(() => {
-          visibleCount += 1;
-          if (visibleCount >= lines.length) {
-            window.clearInterval(stepTimer);
-            oncomplete?.();
-          }
-        }, interval);
-
-        timers.push(stepTimer);
-      }, delay)
-    );
-
-    return () => {
-      for (const timer of timers) {
-        window.clearTimeout(timer);
-        window.clearInterval(timer);
-      }
-    };
-  });
-</script>
-
-<div class={cn('hyvui-terminal-boot', className)}>
-  {#each lines as line, i}
-    <StatusLine
-      status={line.status}
-      message={line.message}
-      visible={i < visibleCount}
-      tone={tone}
-      cursor={showCursor && i < visibleCount}
-    />
-  {/each}
-</div>
-
-<style>
-  .hyvui-terminal-boot {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import StatusLine from '../feedback/StatusLine.svelte';
+	import { onMount } from 'svelte';
+
+	interface BootLine {
+		status: 'ok' | 'pend' | 'warn' | 'fail';
+		message: string;
+	}
+
+	interface Props {
+		/** Lines to display in sequence. */
+		lines?: BootLine[];
+		/** Initial delay before the first line appears (ms). */
+		delay?: number;
+		/** Interval between each line appearing (ms). */
+		interval?: number;
+		/** When true, shows all lines immediately. */
+		instant?: boolean;
+		/** Passes cursor visibility to visible lines. */
+		showCursor?: boolean;
+		/** Status line tone mode. */
+		tone?: 'split' | 'line';
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires when all lines have appeared. */
+		oncomplete?: () => void;
+	}
+
+	let {
+		lines = [],
+		delay = 600,
+		interval = 700,
+		instant = false,
+		showCursor = false,
+		tone = 'split',
+		class: className = '',
+		oncomplete
+	}: Props = $props();
+
+	let visibleCount = $state(0);
+
+	onMount(() => {
+		if (lines.length === 0) {
+			oncomplete?.();
+			return;
+		}
+
+		if (instant) {
+			visibleCount = lines.length;
+			oncomplete?.();
+			return;
+		}
+
+		const timers: number[] = [];
+		timers.push(
+			window.setTimeout(() => {
+				visibleCount = 1;
+
+				if (lines.length === 1) {
+					oncomplete?.();
+					return;
+				}
+
+				const stepTimer = window.setInterval(() => {
+					visibleCount += 1;
+					if (visibleCount >= lines.length) {
+						window.clearInterval(stepTimer);
+						oncomplete?.();
+					}
+				}, interval);
+
+				timers.push(stepTimer);
+			}, delay)
+		);
+
+		return () => {
+			for (const timer of timers) {
+				window.clearTimeout(timer);
+				window.clearInterval(timer);
+			}
+		};
+	});
+</script>
+
+<div class={cn('hyvui-terminal-boot', className)}>
+	{#each lines as line, i}
+		<StatusLine
+			status={line.status}
+			message={line.message}
+			visible={i < visibleCount}
+			{tone}
+			cursor={showCursor && i < visibleCount}
+		/>
+	{/each}
+</div>
+
+<style>
+	.hyvui-terminal-boot {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+</style>

package/dist/components/primitives/Divider.svelte

@@ -1,29 +1,26 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Line visibility strength. */
-    strength?: 'default' | 'strong';
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    strength = 'default',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<hr
-  class={cn('hyvui-divider', className)}
-  style:border-color={strength === 'strong' ? 'var(--line-strong)' : 'var(--line)'}
-/>
-
-<style>
-  .hyvui-divider {
-    border: none;
-    border-top: 1px solid;
-    margin: 0;
-    width: 100%;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Line visibility strength. */
+		strength?: 'default' | 'strong';
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { strength = 'default', class: className = '' }: Props = $props();
+</script>
+
+<hr
+	class={cn('hyvui-divider', className)}
+	style:border-color={strength === 'strong' ? 'var(--line-strong)' : 'var(--line)'}
+/>
+
+<style>
+	.hyvui-divider {
+		border: none;
+		border-top: 1px solid;
+		margin: 0;
+		width: 100%;
+	}
+</style>