@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/display/Table.svelte

@@ -1,104 +1,99 @@
-<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>
+<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/feedback/Alert.svelte

@@ -1,76 +1,71 @@
-<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>
+<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/EmptyState.svelte

@@ -1,68 +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>
+<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/ErrorState.svelte

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