@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/navigation/Topbar.svelte

@@ -1,85 +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>
+<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-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/patterns/ActionBar.svelte

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

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