@hyvnt/hyvui 0.1.0

package/dist/components/navigation/Breadcrumb.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface BreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  interface Props {
+    /** Breadcrumb trail items. */
+    items?: BreadcrumbItem[];
+    /** Additional CSS classes. */
+    class?: string;
+  }
+
+  let {
+    items = [],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<nav class={cn('hyvui-breadcrumb', className)} aria-label="breadcrumb">
+  {#each items as item, i}
+    {#if i > 0}
+      <span class="hyvui-breadcrumb-sep">/</span>
+    {/if}
+    {#if item.href && i < items.length - 1}
+      <a href={item.href} class="hyvui-breadcrumb-link">{item.label}</a>
+    {:else}
+      <span class="hyvui-breadcrumb-current">{item.label}</span>
+    {/if}
+  {/each}
+</nav>
+
+<style>
+  .hyvui-breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    min-width: 0;
+  }
+
+  .hyvui-breadcrumb-sep {
+    color: var(--muted-strong);
+    opacity: 0.7;
+  }
+
+  .hyvui-breadcrumb-link {
+    color: var(--muted);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+  }
+
+  .hyvui-breadcrumb-link:hover {
+    color: var(--accent);
+  }
+
+  .hyvui-breadcrumb-current {
+    color: var(--text-soft);
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-breadcrumb-link {
+      transition: none;
+    }
+  }
+</style>

package/dist/components/navigation/Breadcrumb.svelte.d.ts

@@ -0,0 +1,13 @@
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface Props {
+    /** Breadcrumb trail items. */
+    items?: BreadcrumbItem[];
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/navigation/DropdownMenu.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+
+  interface MenuItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    destructive?: boolean;
+  }
+
+  interface Props {
+    /** Controls menu visibility. */
+    open?: boolean;
+    /** Menu items. */
+    items?: MenuItem[];
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when an item is selected with its value. */
+    onselect?: (value: string) => void;
+  }
+
+  let {
+    open = false,
+    items = [],
+    class: className = '',
+    onselect,
+  }: Props = $props();
+</script>
+
+{#if open}
+  <div class={cn('hyvui-dropdown', className)}>
+    <Surface variant="card" class="hyvui-dropdown-surface">
+      {#each items as item}
+        <button
+          type="button"
+          class={cn(
+            'hyvui-dropdown-item',
+            item.disabled && 'hyvui-dropdown-item-disabled',
+            item.destructive && 'hyvui-dropdown-item-destructive'
+          )}
+          disabled={item.disabled}
+          onclick={() => onselect?.(item.value)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </Surface>
+  </div>
+{/if}
+
+<style>
+  .hyvui-dropdown {
+    position: absolute;
+    z-index: var(--z-overlay);
+    min-width: 13rem;
+    animation: dropdown-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  :global(.hyvui-dropdown-surface) {
+    padding: var(--space-xs);
+  }
+
+  .hyvui-dropdown-item {
+    display: block;
+    width: 100%;
+    text-align: left;
+    font-family: var(--font-mono);
+    font-size: 0.74rem;
+    font-weight: 400;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-soft);
+    background: none;
+    border: none;
+    border-radius: var(--radius-sm);
+    padding: 0.75rem 0.85rem;
+    cursor: pointer;
+    transition:
+      transform var(--transition-fast),
+      color var(--transition-fast),
+      background var(--transition-fast);
+  }
+
+  .hyvui-dropdown-item:hover:not(:disabled) {
+    transform: translateX(4px);
+    background: linear-gradient(90deg, rgba(199, 156, 87, 0.12), transparent 72%);
+    color: var(--text);
+  }
+
+  .hyvui-dropdown-item-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .hyvui-dropdown-item-destructive {
+    color: var(--status-fail);
+  }
+
+  @keyframes dropdown-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-dropdown {
+      animation: none;
+    }
+
+    .hyvui-dropdown-item {
+      transition: none;
+    }
+
+    .hyvui-dropdown-item:hover:not(:disabled) {
+      transform: none;
+    }
+  }
+</style>

package/dist/components/navigation/DropdownMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+interface MenuItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+interface Props {
+    /** Controls menu visibility. */
+    open?: boolean;
+    /** Menu items. */
+    items?: MenuItem[];
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when an item is selected with its value. */
+    onselect?: (value: string) => void;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/navigation/SidebarNav.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+  }
+
+  interface Props {
+    /** Navigation items. */
+    items?: NavItem[];
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when a nav item is clicked. */
+    onnavigate?: (item: NavItem) => void;
+  }
+
+  let {
+    items = [],
+    class: className = '',
+    onnavigate,
+  }: Props = $props();
+</script>
+
+<nav class={cn('hyvui-sidebar-nav', className)}>
+  {#each items as item}
+    <a
+      href={item.href}
+      class={cn('hyvui-sidebar-link', item.active && 'hyvui-sidebar-link-active')}
+      onclick={(e) => {
+        if (onnavigate) {
+          e.preventDefault();
+          onnavigate(item);
+        }
+      }}
+    >
+      {item.label}
+    </a>
+  {/each}
+</nav>
+
+<style>
+  .hyvui-sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+  }
+
+  .hyvui-sidebar-link {
+    position: relative;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted);
+    text-decoration: none;
+    padding: 0.55rem 0.9rem;
+    border-left: 1px solid transparent;
+    min-width: 0;
+    transition:
+      color var(--transition-fast),
+      transform var(--transition-fast),
+      background var(--transition-fast),
+      border-color var(--transition-fast);
+  }
+
+  .hyvui-sidebar-link:hover {
+    color: var(--text-soft);
+    background: linear-gradient(90deg, rgba(199, 156, 87, 0.08), transparent 76%);
+  }
+
+  .hyvui-sidebar-link-active {
+    color: var(--accent);
+    border-left-color: var(--line-strong);
+    background: linear-gradient(90deg, rgba(199, 156, 87, 0.14), transparent 72%);
+    transform: translateX(4px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-sidebar-link {
+      transition: none;
+    }
+
+    .hyvui-sidebar-link-active {
+      transform: none;
+    }
+  }
+</style>

package/dist/components/navigation/SidebarNav.svelte.d.ts

@@ -0,0 +1,16 @@
+interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+interface Props {
+    /** Navigation items. */
+    items?: NavItem[];
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when a nav item is clicked. */
+    onnavigate?: (item: NavItem) => void;
+}
+declare const SidebarNav: import("svelte").Component<Props, {}, "">;
+type SidebarNav = ReturnType<typeof SidebarNav>;
+export default SidebarNav;

package/dist/components/navigation/Tabs.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+
+  interface TabItem {
+    id: string;
+    label: string;
+  }
+
+  interface Props {
+    /** Available tabs. */
+    tabs?: TabItem[];
+    /** Currently active tab id. */
+    active?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when a tab is selected with the new tab id. */
+    onchange?: (id: string) => void;
+  }
+
+  let {
+    tabs = [],
+    active = '',
+    class: className = '',
+    onchange,
+  }: Props = $props();
+</script>
+
+<div class={cn('hyvui-tabs', className)} role="tablist">
+  {#each tabs as tab}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={tab.id === active}
+      class={cn('hyvui-tab', tab.id === active && 'hyvui-tab-active')}
+      onclick={() => onchange?.(tab.id)}
+    >
+      {tab.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .hyvui-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    border-bottom: 1px solid var(--line);
+    padding-bottom: var(--space-xs);
+  }
+
+  .hyvui-tab {
+    position: relative;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    padding: 0.65rem 0.85rem;
+    cursor: pointer;
+    transition:
+      color var(--transition-fast),
+      border-color var(--transition-fast),
+      background var(--transition-fast);
+  }
+
+  .hyvui-tab:hover {
+    color: var(--text-soft);
+    background: linear-gradient(180deg, rgba(199, 156, 87, 0.08), transparent 76%);
+  }
+
+  .hyvui-tab-active {
+    color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
+    background: linear-gradient(180deg, rgba(199, 156, 87, 0.12), transparent 76%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-tab {
+      transition: none;
+    }
+  }
+</style>

package/dist/components/navigation/Tabs.svelte.d.ts

@@ -0,0 +1,17 @@
+interface TabItem {
+    id: string;
+    label: string;
+}
+interface Props {
+    /** Available tabs. */
+    tabs?: TabItem[];
+    /** Currently active tab id. */
+    active?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Fires when a tab is selected with the new tab id. */
+    onchange?: (id: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/navigation/Topbar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Left slot content. */
+    left?: Snippet;
+    /** Center slot content. */
+    center?: Snippet;
+    /** Right slot content. */
+    right?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    left,
+    center,
+    right,
+  }: Props = $props();
+</script>
+
+<header class={cn('hyvui-topbar', className)}>
+  <div class="hyvui-topbar-left">
+    {#if left}{@render left()}{/if}
+  </div>
+  <div class="hyvui-topbar-center">
+    {#if center}{@render center()}{/if}
+  </div>
+  <div class="hyvui-topbar-right">
+    {#if right}{@render right()}{/if}
+  </div>
+</header>
+
+<style>
+  .hyvui-topbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    gap: var(--space-md);
+    min-height: 4.5rem;
+    padding: var(--space-sm) var(--shell-pad);
+    background:
+      linear-gradient(180deg, rgba(121, 166, 163, 0.06), transparent 68%),
+      rgba(8, 9, 11, 0.86);
+    border-bottom: 1px solid var(--line);
+    backdrop-filter: blur(10px);
+  }
+
+  .hyvui-topbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-width: 0;
+  }
+
+  .hyvui-topbar-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    min-width: 0;
+  }
+
+  .hyvui-topbar-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-sm);
+    min-width: 0;
+  }
+
+  @media (max-width: 720px) {
+    .hyvui-topbar {
+      grid-template-columns: 1fr;
+      justify-items: stretch;
+    }
+
+    .hyvui-topbar-center,
+    .hyvui-topbar-right {
+      justify-content: flex-start;
+    }
+  }
+</style>

package/dist/components/navigation/Topbar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Additional CSS classes. */
+    class?: string;
+    /** Left slot content. */
+    left?: Snippet;
+    /** Center slot content. */
+    center?: Snippet;
+    /** Right slot content. */
+    right?: Snippet;
+}
+declare const Topbar: import("svelte").Component<Props, {}, "">;
+type Topbar = ReturnType<typeof Topbar>;
+export default Topbar;

package/dist/components/patterns/ActionBar.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Button from '../inputs/Button.svelte';
+  import Label from '../primitives/Label.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Number of selected items. Bar is visible when count > 0. */
+    count?: number;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Bulk action buttons slot. */
+    actions?: Snippet;
+    /** Fires when clear selection is clicked. */
+    onclear?: () => void;
+  }
+
+  let {
+    count = 0,
+    class: className = '',
+    actions,
+    onclear,
+  }: Props = $props();
+</script>
+
+{#if count > 0}
+  <div class={cn('hyvui-action-bar', className)}>
+    <Label color="accent">{count} selected</Label>
+    {#if actions}
+      <div class="hyvui-action-bar-actions">
+        {@render actions()}
+      </div>
+    {/if}
+    <Button variant="ghost" size="sm" onclick={() => onclear?.()}>clear selection</Button>
+  </div>
+{/if}
+
+<style>
+  .hyvui-action-bar {
+    position: fixed;
+    bottom: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: var(--z-overlay);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--surface-card);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: var(--shadow-veil);
+    padding: 0.625rem 1.25rem;
+    animation: actionbar-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .hyvui-action-bar-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  @keyframes actionbar-in {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-action-bar {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Number of selected items. Bar is visible when count > 0. */
+    count?: number;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Bulk action buttons slot. */
+    actions?: Snippet;
+    /** Fires when clear selection is clicked. */
+    onclear?: () => void;
+}
+declare const ActionBar: import("svelte").Component<Props, {}, "">;
+type ActionBar = ReturnType<typeof ActionBar>;
+export default ActionBar;

package/dist/components/patterns/ConfirmDialog.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Modal from '../layout/Modal.svelte';
+  import Button from '../inputs/Button.svelte';
+  import Stack from '../layout/Stack.svelte';
+  import type { Snippet } from 'svelte';
+
+  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;
+  }
+
+  let {
+    open = false,
+    title = '',
+    description = '',
+    confirmLabel = 'confirm',
+    cancelLabel = 'cancel',
+    destructive = false,
+    class: className = '',
+    onconfirm,
+    oncancel,
+  }: Props = $props();
+</script>
+
+<Modal {open} {title} class={className} onclose={oncancel}>
+  {#if description}
+    <p class="hyvui-confirm-desc">{description}</p>
+  {/if}
+  {#snippet footer()}
+    <Stack direction="horizontal" gap="0.75rem" justify="flex-end">
+      <Button variant="ghost" onclick={() => oncancel?.()}>{cancelLabel}</Button>
+      <Button
+        variant={destructive ? 'destructive' : 'primary'}
+        onclick={() => onconfirm?.()}
+      >{confirmLabel}</Button>
+    </Stack>
+  {/snippet}
+</Modal>
+
+<style>
+  .hyvui-confirm-desc {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    color: var(--text-soft);
+    line-height: 1.6;
+    margin: 0;
+  }
+</style>