@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/navigation/DropdownMenu.svelte

@@ -1,124 +1,179 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Popover from '../layout/Popover.svelte';
+	import type { Placement } from '@floating-ui/dom';
+	import type { Snippet } from 'svelte';
+
+	interface MenuItem {
+		label: string;
+		value: string;
+		disabled?: boolean;
+		destructive?: boolean;
+	}
+
+	/**
+	 * @example
+	 * <DropdownMenu
+	 *   items={[
+	 *     { label: 'edit', value: 'edit' },
+	 *     { label: 'delete', value: 'delete', destructive: true }
+	 *   ]}
+	 *   onselect={(val) => handleAction(val)}
+	 * >
+	 *   {#snippet trigger()}<Button variant="ghost" size="sm">actions</Button>{/snippet}
+	 * </DropdownMenu>
+	 */
+	interface Props {
+		/** Menu items. */
+		items?: MenuItem[];
+		/** Controlled open state. If undefined, the menu manages its own state. */
+		open?: boolean;
+		/** Placement for the floating menu. */
+		placement?: Placement;
+		/** Offset in pixels from trigger. */
+		offset?: number;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Trigger snippet (required for a usable menu). */
+		trigger?: Snippet;
+		/** Fires when an item is selected with its value. */
+		onselect?: (value: string) => void;
+		/** Fires when open state changes. */
+		onopenchange?: (open: boolean) => void;
+	}
+
+	let {
+		items = [],
+		open,
+		placement = 'bottom-end',
+		offset = 8,
+		class: className = '',
+		trigger,
+		onselect,
+		onopenchange
+	}: Props = $props();
+
+	let triggerEl: HTMLElement | null = $state(null);
+	let internalOpen = $state(false);
+
+	const controlled = $derived(open !== undefined);
+	const isOpen = $derived(controlled ? !!open : internalOpen);
+
+	function setOpen(next: boolean) {
+		if (!controlled) internalOpen = next;
+		onopenchange?.(next);
+	}
+
+	function toggle() {
+		setOpen(!isOpen);
+	}
+
+	function close() {
+		setOpen(false);
+	}
+</script>
+
+<div class={cn('hyvui-dropdown-root', className)}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span class="hyvui-dropdown-trigger" bind:this={triggerEl} onclick={toggle}>
+		{#if trigger}{@render trigger()}{/if}
+	</span>
+
+	<Popover
+		open={isOpen}
+		anchor={triggerEl}
+		{placement}
+		{offset}
+		onclose={close}
+		class="hyvui-dropdown-popover"
+	>
+		<div class="hyvui-dropdown-menu" role="menu">
+			{#each items as item}
+				<button
+					type="button"
+					role="menuitem"
+					class={cn(
+						'hyvui-dropdown-item',
+						item.disabled && 'hyvui-dropdown-item-disabled',
+						item.destructive && 'hyvui-dropdown-item-destructive'
+					)}
+					disabled={item.disabled}
+					onclick={() => {
+						if (item.disabled) return;
+						onselect?.(item.value);
+						close();
+					}}
+				>
+					{item.label}
+				</button>
+			{/each}
+		</div>
+	</Popover>
+</div>
+
+<style>
+	.hyvui-dropdown-root {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.hyvui-dropdown-trigger {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	:global(.hyvui-dropdown-popover) {
+		max-inline-size: min(90dvw, 18rem);
+	}
+
+	.hyvui-dropdown-menu {
+		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);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-dropdown-item {
+			transition: none;
+		}
+
+		.hyvui-dropdown-item:hover:not(:disabled) {
+			transform: none;
+		}
+	}
+</style>

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

@@ -1,18 +1,40 @@
+import type { Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
 interface MenuItem {
     label: string;
     value: string;
     disabled?: boolean;
     destructive?: boolean;
 }
+/**
+ * @example
+ * <DropdownMenu
+ *   items={[
+ *     { label: 'edit', value: 'edit' },
+ *     { label: 'delete', value: 'delete', destructive: true }
+ *   ]}
+ *   onselect={(val) => handleAction(val)}
+ * >
+ *   {#snippet trigger()}<Button variant="ghost" size="sm">actions</Button>{/snippet}
+ * </DropdownMenu>
+ */
 interface Props {
-    /** Controls menu visibility. */
-    open?: boolean;
     /** Menu items. */
     items?: MenuItem[];
+    /** Controlled open state. If undefined, the menu manages its own state. */
+    open?: boolean;
+    /** Placement for the floating menu. */
+    placement?: Placement;
+    /** Offset in pixels from trigger. */
+    offset?: number;
     /** Additional CSS classes. */
     class?: string;
+    /** Trigger snippet (required for a usable menu). */
+    trigger?: Snippet;
     /** Fires when an item is selected with its value. */
     onselect?: (value: string) => void;
+    /** Fires when open state changes. */
+    onopenchange?: (open: boolean) => void;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/components/navigation/SidebarNav.svelte

@@ -1,90 +1,96 @@
-<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>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface NavItem {
+		label: string;
+		href: string;
+		active?: boolean;
+	}
+
+	/**
+	 * @see reveal — add `use:reveal={{ target: '.badge' }}` on items for hover metadata.
+	 * @example
+	 * <SidebarNav items={[
+	 *   { label: 'overview', href: '/', active: true },
+	 *   { label: 'settings', href: '/settings' },
+	 *   { label: 'archive', href: '/archive' }
+	 * ]} />
+	 */
+	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%);
+		transform: translateX(2px);
+	}
+
+	.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

@@ -3,6 +3,15 @@ interface NavItem {
     href: string;
     active?: boolean;
 }
+/**
+ * @see reveal — add `use:reveal={{ target: '.badge' }}` on items for hover metadata.
+ * @example
+ * <SidebarNav items={[
+ *   { label: 'overview', href: '/', active: true },
+ *   { label: 'settings', href: '/settings' },
+ *   { label: 'archive', href: '/archive' }
+ * ]} />
+ */
 interface Props {
     /** Navigation items. */
     items?: NavItem[];