@hyvnt/hyvui 0.1.0

package/dist/components/layout/Card.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** TranslateY offset for staggered card grids. */
+    staggerOffset?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Card header slot. */
+    header?: Snippet;
+    /** Card body content. */
+    children?: Snippet;
+    /** Card footer slot. */
+    footer?: Snippet;
+  }
+
+  let {
+    staggerOffset = '',
+    class: className = '',
+    header,
+    children,
+    footer,
+  }: Props = $props();
+
+  const style = $derived(staggerOffset ? `transform: translateY(${staggerOffset})` : '');
+</script>
+
+<div class={cn('hyvui-card-wrap', className)} {style}>
+  <Surface variant="card" class="hyvui-card-inner">
+    {#if header}
+      <div class="hyvui-card-header">
+        {@render header()}
+      </div>
+    {/if}
+    {#if children}
+      <div class="hyvui-card-body">
+        {@render children()}
+      </div>
+    {/if}
+    {#if footer}
+      <div class="hyvui-card-footer">
+        {@render footer()}
+      </div>
+    {/if}
+  </Surface>
+</div>
+
+<style>
+  .hyvui-card-wrap {
+    display: block;
+  }
+
+  :global(.hyvui-card-inner) {
+    padding: var(--space-card);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .hyvui-card-header {
+    padding-bottom: var(--space-sm);
+    border-bottom: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+  }
+
+  .hyvui-card-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .hyvui-card-footer {
+    padding-top: var(--space-sm);
+    border-top: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+  }
+</style>

package/dist/components/layout/Card.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** TranslateY offset for staggered card grids. */
+    staggerOffset?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Card header slot. */
+    header?: Snippet;
+    /** Card body content. */
+    children?: Snippet;
+    /** Card footer slot. */
+    footer?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/layout/Drawer.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Controls drawer visibility. */
+    open?: boolean;
+    /** Side the drawer slides in from. */
+    side?: 'left' | 'right';
+    /** Drawer width. */
+    width?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Drawer content. */
+    children?: Snippet;
+    /** Fires when the drawer is dismissed. */
+    onclose?: () => void;
+  }
+
+  let {
+    open = false,
+    side = 'right',
+    width = '320px',
+    class: className = '',
+    children,
+    onclose,
+  }: Props = $props();
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      onclose?.();
+    }
+  }
+
+  function handleBackdropClick() {
+    onclose?.();
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="hyvui-drawer-backdrop" onclick={handleBackdropClick} onkeydown={handleKeydown}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class={cn(
+        'hyvui-drawer',
+        side === 'left' ? 'hyvui-drawer-left' : 'hyvui-drawer-right',
+        className
+      )}
+      style:width={width}
+      onclick={(e) => e.stopPropagation()}
+      onkeydown={(e) => e.stopPropagation()}
+    >
+      <Surface variant="panel" class="hyvui-drawer-surface">
+        {#if children}{@render children()}{/if}
+      </Surface>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .hyvui-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    background: rgba(0, 0, 0, 0.72);
+  }
+
+  .hyvui-drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: var(--z-modal);
+  }
+
+  .hyvui-drawer-left {
+    left: 0;
+    animation: drawer-left-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .hyvui-drawer-right {
+    right: 0;
+    animation: drawer-right-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  :global(.hyvui-drawer-surface) {
+    height: 100%;
+    padding: var(--space-card);
+    overflow-y: auto;
+  }
+
+  @keyframes drawer-left-in {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes drawer-right-in {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-drawer-left,
+    .hyvui-drawer-right {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/layout/Drawer.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Controls drawer visibility. */
+    open?: boolean;
+    /** Side the drawer slides in from. */
+    side?: 'left' | 'right';
+    /** Drawer width. */
+    width?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Drawer content. */
+    children?: Snippet;
+    /** Fires when the drawer is dismissed. */
+    onclose?: () => void;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/layout/Grid.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Number of columns or a CSS grid-template-columns value. */
+    cols?: number | string;
+    /** Gap between grid items. */
+    gap?: string;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Grid children. */
+    children?: Snippet;
+  }
+
+  let {
+    cols = 1,
+    gap = 'var(--space-md)',
+    as = 'div',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const gridCols = $derived(typeof cols === 'number' ? `repeat(${cols}, 1fr)` : cols);
+</script>
+
+<svelte:element
+  this={as}
+  class={cn('hyvui-grid', className)}
+  style:grid-template-columns={gridCols}
+  style:gap={gap}
+>
+  {#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+  .hyvui-grid {
+    display: grid;
+    min-width: 0;
+  }
+</style>

package/dist/components/layout/Grid.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Number of columns or a CSS grid-template-columns value. */
+    cols?: number | string;
+    /** Gap between grid items. */
+    gap?: string;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Grid children. */
+    children?: Snippet;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/layout/Modal.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Controls modal visibility. */
+    open?: boolean;
+    /** Optional modal title. */
+    title?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Modal header slot. */
+    header?: Snippet;
+    /** Modal body content. */
+    children?: Snippet;
+    /** Modal footer slot. */
+    footer?: Snippet;
+    /** Fires when the modal is dismissed. */
+    onclose?: () => void;
+  }
+
+  let {
+    open = false,
+    title = '',
+    class: className = '',
+    header,
+    children,
+    footer,
+    onclose,
+  }: Props = $props();
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open) {
+      dialogEl.showModal();
+    } else {
+      dialogEl.close();
+    }
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      onclose?.();
+    }
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      onclose?.();
+    }
+  }
+</script>
+
+{#if open}
+  <dialog
+    bind:this={dialogEl}
+    class={cn('hyvui-modal-backdrop', className)}
+    onkeydown={handleKeydown}
+    onclick={handleBackdropClick}
+  >
+    <Surface variant="panel" class="hyvui-modal-surface">
+      {#if header}
+        <div class="hyvui-modal-header">
+          {@render header()}
+        </div>
+      {:else if title}
+        <div class="hyvui-modal-header">
+          <h2 class="hyvui-modal-title">{title}</h2>
+        </div>
+      {/if}
+      {#if children}
+        <div class="hyvui-modal-body">
+          {@render children()}
+        </div>
+      {/if}
+      {#if footer}
+        <div class="hyvui-modal-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </Surface>
+  </dialog>
+{/if}
+
+<style>
+  .hyvui-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    background: rgba(0, 0, 0, 0.72);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 1.5rem;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .hyvui-modal-backdrop::backdrop {
+    background: transparent;
+  }
+
+  :global(.hyvui-modal-surface) {
+    padding: var(--space-card);
+    max-width: 32rem;
+    width: 100%;
+    animation: modal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .hyvui-modal-header {
+    margin-bottom: 1rem;
+  }
+
+  .hyvui-modal-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-modal-body {
+    font-family: var(--font-body);
+    color: var(--text-soft);
+    line-height: 1.6;
+  }
+
+  .hyvui-modal-footer {
+    margin-top: 1.25rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+  }
+
+  @keyframes modal-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.hyvui-modal-surface) {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/layout/Modal.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Controls modal visibility. */
+    open?: boolean;
+    /** Optional modal title. */
+    title?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Modal header slot. */
+    header?: Snippet;
+    /** Modal body content. */
+    children?: Snippet;
+    /** Modal footer slot. */
+    footer?: Snippet;
+    /** Fires when the modal is dismissed. */
+    onclose?: () => void;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/layout/Panel.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Adds a pseudoelement teal inset border. */
+    withInset?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Panel header slot. */
+    header?: Snippet;
+    /** Panel body content. */
+    children?: Snippet;
+  }
+
+  let {
+    withInset = false,
+    class: className = '',
+    header,
+    children,
+  }: Props = $props();
+</script>
+
+<Surface variant="panel" {withInset} class={cn('hyvui-panel', className)}>
+  {#if header}
+    <div class="hyvui-panel-header">
+      {@render header()}
+    </div>
+  {/if}
+  {#if children}
+    <div class="hyvui-panel-body">
+      {@render children()}
+    </div>
+  {/if}
+</Surface>
+
+<style>
+  :global(.hyvui-panel) {
+    padding: var(--space-card);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .hyvui-panel-header {
+    padding-bottom: var(--space-md);
+    border-bottom: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+  }
+
+  .hyvui-panel-body {
+    min-width: 0;
+  }
+</style>

package/dist/components/layout/Panel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Adds a pseudoelement teal inset border. */
+    withInset?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Panel header slot. */
+    header?: Snippet;
+    /** Panel body content. */
+    children?: Snippet;
+}
+declare const Panel: import("svelte").Component<Props, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/components/layout/Popover.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import Surface from '../primitives/Surface.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Controls popover visibility. */
+    open?: boolean;
+    /** Placement relative to anchor. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Popover content. */
+    children?: Snippet;
+  }
+
+  let {
+    open = false,
+    placement = 'bottom',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const placementStyles: Record<string, string> = {
+    top: 'bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;',
+    bottom: 'top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;',
+    left: 'right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem;',
+    right: 'left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem;',
+  };
+</script>
+
+{#if open}
+  <div class={cn('hyvui-popover', className)} style={placementStyles[placement]}>
+    <Surface variant="card" class="hyvui-popover-surface">
+      {#if children}{@render children()}{/if}
+    </Surface>
+  </div>
+{/if}
+
+<style>
+  .hyvui-popover {
+    position: absolute;
+    z-index: var(--z-overlay);
+    animation: popover-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  :global(.hyvui-popover-surface) {
+    padding: 0.5rem 0.75rem;
+  }
+
+  @keyframes popover-in {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hyvui-popover {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/layout/Popover.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Controls popover visibility. */
+    open?: boolean;
+    /** Placement relative to anchor. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional CSS classes. */
+    class?: string;
+    /** Popover content. */
+    children?: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/layout/Stack.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Stack direction. */
+    direction?: 'vertical' | 'horizontal';
+    /** Gap between items (CSS size string). */
+    gap?: string;
+    /** CSS align-items value. */
+    align?: string;
+    /** CSS justify-content value. */
+    justify?: string;
+    /** Enable flex-wrap. */
+    wrap?: boolean;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Stack children. */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'vertical',
+    gap = 'var(--space-md)',
+    align = 'stretch',
+    justify = 'flex-start',
+    wrap = false,
+    as = 'div',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={cn('hyvui-stack', className)}
+  style:flex-direction={direction === 'horizontal' ? 'row' : 'column'}
+  style:gap={gap}
+  style:align-items={align}
+  style:justify-content={justify}
+  style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
+>
+  {#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+  .hyvui-stack {
+    display: flex;
+    min-width: 0;
+  }
+</style>

package/dist/components/layout/Stack.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Stack direction. */
+    direction?: 'vertical' | 'horizontal';
+    /** Gap between items (CSS size string). */
+    gap?: string;
+    /** CSS align-items value. */
+    align?: string;
+    /** CSS justify-content value. */
+    justify?: string;
+    /** Enable flex-wrap. */
+    wrap?: boolean;
+    /** HTML tag to render. */
+    as?: string;
+    /** Additional CSS classes. */
+    class?: string;
+    /** Stack children. */
+    children?: Snippet;
+}
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;