@hyvnt/hyvui 0.1.0

package/dist/components/patterns/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    /** Controls dialog visibility. */
+    open?: boolean;
+    /** Action title. Names the action, never asks "are you sure?". */
+    title?: string;
+    /** Additional description. */
+    description?: string;
+    /** Confirm button label. */
+    confirmLabel?: string;
+    /** Cancel button label. */
+    cancelLabel?: string;
+    /** Makes the confirm button use the destructive variant. */
+    destructive?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when the confirm button is clicked. */
+    onconfirm?: () => void;
+    /** Fires when the cancel button is clicked or dialog is dismissed. */
+    oncancel?: () => void;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/patterns/PageHeader.svelte

@@ -0,0 +1,114 @@
+<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>

package/dist/components/patterns/PageHeader.svelte.d.ts

@@ -0,0 +1,16 @@
+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;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/patterns/SearchBar.svelte

@@ -0,0 +1,59 @@
+<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/SearchBar.svelte.d.ts

@@ -0,0 +1,15 @@
+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;
+}
+declare const SearchBar: import("svelte").Component<Props, {}, "value">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/dist/components/patterns/TerminalBoot.svelte

@@ -0,0 +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>

package/dist/components/patterns/TerminalBoot.svelte.d.ts

@@ -0,0 +1,25 @@
+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;
+}
+declare const TerminalBoot: import("svelte").Component<Props, {}, "">;
+type TerminalBoot = ReturnType<typeof TerminalBoot>;
+export default TerminalBoot;

package/dist/components/primitives/Divider.svelte

@@ -0,0 +1,29 @@
+<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>

package/dist/components/primitives/Divider.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Line visibility strength. */
+    strength?: 'default' | 'strong';
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/primitives/Icon.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Icon size in pixels. */
+    size?: number;
+    /** CSS color value for the icon. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** SVG content to render inside the icon wrapper. */
+    children?: Snippet;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<span
+  class={cn('hyvui-icon', className)}
+  style:width="{size}px"
+  style:height="{size}px"
+  style:color={color}
+  aria-hidden="true"
+>
+  {#if children}{@render children()}{/if}
+</span>
+
+<style>
+  .hyvui-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  .hyvui-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+</style>

package/dist/components/primitives/Icon.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Icon size in pixels. */
+    size?: number;
+    /** CSS color value for the icon. */
+    color?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** SVG content to render inside the icon wrapper. */
+    children?: Snippet;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/primitives/Label.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** HTML tag to render. */
+    as?: string;
+    /** Label color token. */
+    color?: 'muted' | 'accent' | 'signal';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Label text content. */
+    children?: Snippet;
+  }
+
+  let {
+    as = 'span',
+    color = 'muted',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const colorMap: Record<string, string> = {
+    muted: 'var(--muted-strong)',
+    accent: 'var(--accent)',
+    signal: 'var(--signal)',
+  };
+</script>
+
+<svelte:element this={as} class={cn('hyvui-label', className)} style:color={colorMap[color]}>
+  {#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+  .hyvui-label {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+</style>

package/dist/components/primitives/Label.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** HTML tag to render. */
+    as?: string;
+    /** Label color token. */
+    color?: 'muted' | 'accent' | 'signal';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Label text content. */
+    children?: Snippet;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/primitives/Surface.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Surface visual style. */
+    variant?: 'base' | 'card' | 'panel';
+    /** HTML tag to render. */
+    as?: string;
+    /** Adds a pseudoelement teal inset border on panel variant. */
+    withInset?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Surface content. */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'base',
+    as = 'div',
+    withInset = false,
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={cn(
+    'hyvui-surface',
+    variant === 'card' && 'hyvui-surface-card',
+    variant === 'panel' && 'hyvui-surface-panel',
+    variant === 'base' && 'hyvui-surface-base',
+    withInset && 'hyvui-surface-inset',
+    className
+  )}
+>
+  {#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+  .hyvui-surface {
+    position: relative;
+    overflow: clip;
+    border-radius: var(--radius-md);
+    isolation: isolate;
+  }
+
+  .hyvui-surface::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(180deg, rgba(240, 232, 218, 0.04), transparent 20%),
+      linear-gradient(90deg, rgba(121, 166, 163, 0.03), transparent 30%);
+    opacity: 0.8;
+  }
+
+  .hyvui-surface-base {
+    background: var(--surface-soft);
+    border: 1px solid var(--line);
+    box-shadow: var(--surface-stroke);
+  }
+
+  .hyvui-surface-card {
+    background: var(--surface-card);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: var(--surface-stroke), var(--shadow-card);
+    backdrop-filter: blur(8px);
+  }
+
+  .hyvui-surface-panel {
+    background: var(--surface-panel);
+    border: 1px solid var(--line);
+    box-shadow: var(--surface-stroke), var(--shadow-veil);
+    backdrop-filter: blur(10px);
+  }
+
+  .hyvui-surface-inset::after {
+    content: '';
+    position: absolute;
+    inset: 0.9rem;
+    border: 1px solid rgba(121, 166, 163, 0.14);
+    pointer-events: none;
+  }
+</style>

package/dist/components/primitives/Surface.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Surface visual style. */
+    variant?: 'base' | 'card' | 'panel';
+    /** HTML tag to render. */
+    as?: string;
+    /** Adds a pseudoelement teal inset border on panel variant. */
+    withInset?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Surface content. */
+    children?: Snippet;
+}
+declare const Surface: import("svelte").Component<Props, {}, "">;
+type Surface = ReturnType<typeof Surface>;
+export default Surface;