@hyvnt/hyvui 0.1.0

package/dist/components/display/Table.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import EmptyState from '../feedback/EmptyState.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface TableColumn {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+  }
+
+  interface Props {
+    /** Column definitions. */
+    columns?: TableColumn[];
+    /** Row data objects. */
+    rows?: Record<string, any>[];
+    /** Additional CSS classes. */
+    class?: string;
+    /** Custom empty state slot. */
+    empty?: Snippet;
+  }
+
+  let {
+    columns = [],
+    rows = [],
+    class: className = '',
+    empty,
+  }: Props = $props();
+</script>
+
+{#if rows.length === 0}
+  {#if empty}
+    {@render empty()}
+  {:else}
+    <EmptyState title="no data" />
+  {/if}
+{:else}
+  <div class={cn('hyvui-table-wrap', className)}>
+    <table class="hyvui-table">
+      <thead>
+        <tr>
+          {#each columns as col}
+            <th class="hyvui-table-th" style:text-align={col.align ?? 'left'}>{col.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row}
+          <tr class="hyvui-table-row">
+            {#each columns as col}
+              <td class="hyvui-table-td" style:text-align={col.align ?? 'left'}>
+                {row[col.key] ?? ''}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
+
+<style>
+  .hyvui-table-wrap {
+    overflow-x: auto;
+  }
+
+  .hyvui-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .hyvui-table-th {
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    font-weight: 400;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .hyvui-table-td {
+    font-family: var(--font-body);
+    font-size: 1rem;
+    color: var(--text-soft);
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .hyvui-table-row {
+    transition: background-color var(--transition-fast);
+  }
+
+  .hyvui-table-row:hover {
+    background-color: rgba(199, 156, 87, 0.04);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-table-row {
+      transition: none;
+    }
+  }
+</style>

package/dist/components/display/Table.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface TableColumn {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface Props {
+    /** Column definitions. */
+    columns?: TableColumn[];
+    /** Row data objects. */
+    rows?: Record<string, any>[];
+    /** Additional CSS classes. */
+    class?: string;
+    /** Custom empty state slot. */
+    empty?: Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/feedback/Alert.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Alert variant determining accent color. */
+    variant?: 'info' | 'warn' | 'error' | 'ok';
+    /** Optional title text. */
+    title?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Alert body content. */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'info',
+    title = '',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const colorMap: Record<string, string> = {
+    info: 'var(--signal)',
+    warn: 'var(--status-warn)',
+    error: 'var(--status-fail)',
+    ok: 'var(--status-ok)',
+  };
+
+  const bgMap: Record<string, string> = {
+    info: 'rgba(121, 166, 163, 0.06)',
+    warn: 'rgba(199, 156, 87, 0.06)',
+    error: 'rgba(182, 106, 72, 0.06)',
+    ok: 'rgba(121, 166, 163, 0.06)',
+  };
+</script>
+
+<div
+  class={cn('hyvui-alert', className)}
+  style:border-left-color={colorMap[variant]}
+  style:background-color={bgMap[variant]}
+  role="alert"
+>
+  {#if title}
+    <div class="hyvui-alert-title">{title}</div>
+  {/if}
+  {#if children}
+    <div class="hyvui-alert-body">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .hyvui-alert {
+    border-left: 2px solid;
+    padding: 0.75rem 1rem;
+  }
+
+  .hyvui-alert-title {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-soft);
+    margin-bottom: 0.375rem;
+  }
+
+  .hyvui-alert-body {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    color: var(--text-soft);
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Alert variant determining accent color. */
+    variant?: 'info' | 'warn' | 'error' | 'ok';
+    /** Optional title text. */
+    title?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Alert body content. */
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/feedback/EmptyState.svelte

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

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

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

package/dist/components/feedback/ErrorState.svelte

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

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

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

package/dist/components/feedback/Skeleton.svelte

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

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

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

package/dist/components/feedback/StatusDot.svelte

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

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

package/dist/components/feedback/StatusLine.svelte

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

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

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