@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/navigation/Tabs.svelte

@@ -1,86 +1,106 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface TabItem {
+		id: string;
+		label: string;
+	}
+
+	/**
+	 * @example
+	 * <Tabs
+	 *   tabs={[{ id: 'data', label: 'data' }, { id: 'logs', label: 'logs' }]}
+	 *   active={activeTab}
+	 *   onchange={(id) => activeTab = id}
+	 * />
+	 */
+	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();
+
+	let tabEls: HTMLButtonElement[] = [];
+
+	function handleKeyDown(e: KeyboardEvent, idx: number) {
+		let next = -1;
+		if (e.key === 'ArrowRight') next = (idx + 1) % tabs.length;
+		else if (e.key === 'ArrowLeft') next = (idx - 1 + tabs.length) % tabs.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = tabs.length - 1;
+		if (next === -1) return;
+		e.preventDefault();
+		onchange?.(tabs[next].id);
+		tabEls[next]?.focus();
+	}
+</script>
+
+<div class={cn('hyvui-tabs', className)} role="tablist">
+	{#each tabs as tab, i}
+		<button
+			bind:this={tabEls[i]}
+			type="button"
+			role="tab"
+			aria-selected={tab.id === active}
+			tabindex={tab.id === active ? 0 : -1}
+			class={cn('hyvui-tab', tab.id === active && 'hyvui-tab-active')}
+			onclick={() => onchange?.(tab.id)}
+			onkeydown={(e) => handleKeyDown(e, i)}
+		>
+			{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

@@ -2,6 +2,14 @@ interface TabItem {
     id: string;
     label: string;
 }
+/**
+ * @example
+ * <Tabs
+ *   tabs={[{ id: 'data', label: 'data' }, { id: 'logs', label: 'logs' }]}
+ *   active={activeTab}
+ *   onchange={(id) => activeTab = id}
+ * />
+ */
 interface Props {
     /** Available tabs. */
     tabs?: TabItem[];

package/dist/components/navigation/Topbar.svelte

@@ -1,85 +1,94 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @example
+	 * <Topbar>
+	 *   {#snippet left()}<Text variant="caption" color="accent">hyvui</Text>{/snippet}
+	 *   {#snippet right()}
+	 *     <Button variant="ghost" size="sm">sign in</Button>
+	 *   {/snippet}
+	 * </Topbar>
+	 */
+	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-inner">
+		<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>
+	</div>
+</header>
+
+<style>
+	.hyvui-topbar {
+		min-height: 4.5rem;
+		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);
+		container-type: inline-size;
+	}
+
+	.hyvui-topbar-inner {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+		align-items: center;
+		gap: var(--space-md);
+		padding: var(--space-sm) var(--shell-pad);
+	}
+
+	.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;
+	}
+
+	@container (max-width: var(--cq-sm)) {
+		.hyvui-topbar-inner {
+			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

@@ -1,4 +1,13 @@
 import type { Snippet } from 'svelte';
+/**
+ * @example
+ * <Topbar>
+ *   {#snippet left()}<Text variant="caption" color="accent">hyvui</Text>{/snippet}
+ *   {#snippet right()}
+ *     <Button variant="ghost" size="sm">sign in</Button>
+ *   {/snippet}
+ * </Topbar>
+ */
 interface Props {
     /** Additional CSS classes. */
     class?: string;

package/dist/components/patterns/ActionBar.svelte

@@ -1,76 +1,82 @@
-<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>
+<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';
+
+	/**
+	 * @remarks Use on any multi-select list or table. Fixed, bottom-center. Renders nothing when count is 0.
+	 * @example
+	 * <ActionBar count={selected.length} onclear={() => selected = []}>
+	 *   {#snippet actions()}
+	 *     <Button variant="ghost" size="sm" onclick={exportSelected}>export</Button>
+	 *     <Button variant="destructive" size="sm" onclick={deleteSelected}>delete</Button>
+	 *   {/snippet}
+	 * </ActionBar>
+	 */
+	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;
+		backface-visibility: hidden;
+		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

@@ -1,4 +1,14 @@
 import type { Snippet } from 'svelte';
+/**
+ * @remarks Use on any multi-select list or table. Fixed, bottom-center. Renders nothing when count is 0.
+ * @example
+ * <ActionBar count={selected.length} onclear={() => selected = []}>
+ *   {#snippet actions()}
+ *     <Button variant="ghost" size="sm" onclick={exportSelected}>export</Button>
+ *     <Button variant="destructive" size="sm" onclick={deleteSelected}>delete</Button>
+ *   {/snippet}
+ * </ActionBar>
+ */
 interface Props {
     /** Number of selected items. Bar is visible when count > 0. */
     count?: number;