@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/inputs/Button.svelte

@@ -1,237 +1,310 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-  import { echo as echoAction } from '../../system/actions/echo.js';
-
-  interface Props {
-    /** Button visual style. */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
-    /** Button size. */
-    size?: 'sm' | 'md';
-    /** Disables the button. */
-    disabled?: boolean;
-    /** Shows a pending status indicator instead of the label. */
-    loading?: boolean;
-    /** Enables the click echo ripple. */
-    echo?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Button type attribute. */
-    type?: 'button' | 'submit' | 'reset';
-    /** Optional href to render an anchor instead of a button. */
-    href?: string;
-    /** Anchor target. */
-    target?: string;
-    /** Anchor rel. */
-    rel?: string;
-    /** Click handler. */
-    onclick?: (e: MouseEvent) => void;
-    /** Button label content. */
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'secondary',
-    size = 'md',
-    disabled = false,
-    loading = false,
-    echo = false,
-    class: className = '',
-    type = 'button',
-    href,
-    target,
-    rel,
-    onclick,
-    children,
-  }: Props = $props();
-
-  function activeEcho(node: HTMLElement) {
-    if (!echo) return {};
-    return echoAction(node);
-  }
-
-  function handleAnchorClick(e: MouseEvent) {
-    if (disabled || loading) {
-      e.preventDefault();
-      return;
-    }
-
-    onclick?.(e);
-  }
-</script>
-
-{#if href}
-  <a
-    {href}
-    {target}
-    {rel}
-    use:activeEcho
-    class={cn(
-      'hyvui-btn',
-      `hyvui-btn-${variant}`,
-      `hyvui-btn-${size}`,
-      loading && 'hyvui-btn-loading',
-      disabled && 'hyvui-btn-disabled',
-      className
-    )}
-    aria-disabled={disabled || loading}
-    tabindex={disabled || loading ? -1 : undefined}
-    onclick={handleAnchorClick}
-  >
-    {#if loading}
-      <span class="hyvui-btn-dot" aria-label="loading"></span>
-    {:else if children}
-      {@render children()}
-    {/if}
-  </a>
-{:else}
-  <button
-    {type}
-    use:activeEcho
-    class={cn(
-      'hyvui-btn',
-      `hyvui-btn-${variant}`,
-      `hyvui-btn-${size}`,
-      loading && 'hyvui-btn-loading',
-      className
-    )}
-    disabled={disabled || loading}
-    {onclick}
-  >
-    {#if loading}
-      <span class="hyvui-btn-dot" aria-label="loading"></span>
-    {:else if children}
-      {@render children()}
-    {/if}
-  </button>
-{/if}
-
-<style>
-  .hyvui-btn {
-    position: relative;
-    overflow: clip;
-    font-family: var(--font-mono);
-    font-size: 0.72rem;
-    font-weight: 400;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    border: 1px solid var(--line);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--control-gap);
-    transition:
-      color var(--transition-smooth),
-      border-color var(--transition-smooth),
-      background var(--transition-smooth),
-      transform var(--transition-smooth),
-      box-shadow var(--transition-smooth);
-    white-space: nowrap;
-    text-decoration: none;
-    line-height: 1;
-    max-width: 100%;
-    box-shadow: var(--surface-stroke);
-  }
-
-  .hyvui-btn:disabled,
-  .hyvui-btn-disabled {
-    opacity: 0.46;
-    cursor: not-allowed;
-    transform: none !important;
-    box-shadow: none;
-  }
-
-  .hyvui-btn-md {
-    min-height: var(--control-height-md);
-    padding: 0.75rem 1.15rem;
-  }
-
-  .hyvui-btn-sm {
-    min-height: var(--control-height-sm);
-    padding: 0.5rem 0.8rem;
-    font-size: 0.68rem;
-  }
-
-  /* primary */
-  .hyvui-btn-primary {
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 22%, transparent), transparent 70%),
-      linear-gradient(135deg, var(--accent), var(--accent-strong));
-    color: var(--bg);
-    border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--accent));
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.16),
-      0 14px 26px rgba(199, 156, 87, 0.16);
-  }
-
-  .hyvui-btn-primary:hover:not(:disabled):not(.hyvui-btn-disabled) {
-    transform: translateY(-2px);
-    filter: brightness(1.03);
-  }
-
-  /* secondary */
-  .hyvui-btn-secondary {
-    background:
-      linear-gradient(180deg, rgba(121, 166, 163, 0.06), transparent 62%),
-      rgba(10, 12, 14, 0.74);
-    color: var(--text-soft);
-    border-color: var(--line-strong);
-  }
-
-  .hyvui-btn-secondary:hover:not(:disabled):not(.hyvui-btn-disabled) {
-    transform: translateY(-2px);
-    border-color: color-mix(in srgb, var(--accent) 46%, var(--line-strong));
-    color: var(--text);
-  }
-
-  /* ghost */
-  .hyvui-btn-ghost {
-    background: transparent;
-    color: var(--muted);
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  .hyvui-btn-ghost:hover:not(:disabled):not(.hyvui-btn-disabled) {
-    background: linear-gradient(90deg, rgba(199, 156, 87, 0.12), transparent 78%);
-    color: var(--text);
-    transform: translateX(2px);
-  }
-
-  /* destructive */
-  .hyvui-btn-destructive {
-    background: rgba(10, 12, 14, 0.74);
-    color: var(--text-soft);
-    border-color: rgba(182, 106, 72, 0.34);
-  }
-
-  .hyvui-btn-destructive:hover:not(:disabled):not(.hyvui-btn-disabled) {
-    background-color: rgba(182, 106, 72, 0.1);
-    transform: translateY(-2px);
-  }
-
-  /* loading dot */
-  .hyvui-btn-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--status-pend);
-    animation: pulse-dot 2s ease-in-out infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-btn {
-      transition: none;
-    }
-
-    .hyvui-btn:hover:not(:disabled):not(.hyvui-btn-disabled) {
-      transform: none;
-    }
-
-    .hyvui-btn-dot {
-      animation: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+	import { echo as echoAction } from '../../system/actions/echo.js';
+
+	/**
+	 * @see echo — add `echo` prop (or `use:echo` directly) for a gold click-pulse ripple.
+	 * @example
+	 * <Button variant="primary" onclick={handleSubmit}>submit</Button>
+	 * <Button variant="ghost" href="/back">go back</Button>
+	 * <Button variant="destructive" loading>deleting...</Button>
+	 * <Button variant="primary" echo onclick={confirm}>confirm</Button>
+	 */
+	interface Props {
+		/** Button visual style. */
+		variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+		/** Button size. */
+		size?: 'sm' | 'md';
+		/** Disables the button. */
+		disabled?: boolean;
+		/** Shows a pending status indicator instead of the label. */
+		loading?: boolean;
+		/** Enables the click echo ripple. */
+		echo?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Button type attribute. */
+		type?: 'button' | 'submit' | 'reset';
+		/** Optional href to render an anchor instead of a button. */
+		href?: string;
+		/** Anchor target. */
+		target?: string;
+		/** Anchor rel. */
+		rel?: string;
+		/** Click handler. */
+		onclick?: (e: MouseEvent) => void;
+		/** Button label content. */
+		children?: Snippet;
+	}
+
+	let {
+		variant = 'secondary',
+		size = 'md',
+		disabled = false,
+		loading = false,
+		echo = false,
+		class: className = '',
+		type = 'button',
+		href,
+		target,
+		rel,
+		onclick,
+		children
+	}: Props = $props();
+
+	function activeEcho(node: HTMLElement) {
+		if (!echo) return {};
+		return echoAction(node);
+	}
+
+	function handleAnchorClick(e: MouseEvent) {
+		if (disabled || loading) {
+			e.preventDefault();
+			return;
+		}
+
+		onclick?.(e);
+	}
+</script>
+
+{#if href}
+	<a
+		{href}
+		{target}
+		{rel}
+		use:activeEcho
+		class={cn(
+			'hyvui-btn',
+			`hyvui-btn-${variant}`,
+			`hyvui-btn-${size}`,
+			loading && 'hyvui-btn-loading',
+			disabled && 'hyvui-btn-disabled',
+			className
+		)}
+		aria-disabled={disabled || loading}
+		tabindex={disabled || loading ? -1 : undefined}
+		onclick={handleAnchorClick}
+	>
+		{#if loading}
+			<span class="hyvui-btn-dot" aria-label="loading"></span>
+		{:else if children}
+			{@render children()}
+		{/if}
+	</a>
+{:else}
+	<button
+		{type}
+		use:activeEcho
+		class={cn(
+			'hyvui-btn',
+			`hyvui-btn-${variant}`,
+			`hyvui-btn-${size}`,
+			loading && 'hyvui-btn-loading',
+			className
+		)}
+		disabled={disabled || loading}
+		{onclick}
+	>
+		{#if loading}
+			<span class="hyvui-btn-dot" aria-label="loading"></span>
+		{:else if children}
+			{@render children()}
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.hyvui-btn {
+		position: relative;
+		overflow: clip;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		font-weight: 400;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		border: 1px solid var(--line);
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--control-gap);
+		transition:
+			color var(--transition-fast),
+			border-color var(--transition-fast),
+			background var(--transition-fast),
+			filter var(--transition-fast),
+			transform var(--transition-smooth),
+			box-shadow var(--transition-smooth);
+		white-space: nowrap;
+		text-decoration: none;
+		line-height: 1;
+		max-width: 100%;
+		box-shadow: var(--surface-stroke);
+	}
+
+	.hyvui-btn:disabled,
+	.hyvui-btn-disabled {
+		opacity: 0.46;
+		cursor: not-allowed;
+		transform: none !important;
+		box-shadow: none;
+	}
+
+	.hyvui-btn-md {
+		min-height: var(--control-height-md);
+		padding: 0.75rem 1.15rem;
+	}
+
+	.hyvui-btn-sm {
+		min-height: var(--control-height-sm);
+		padding: 0.5rem 0.8rem;
+		font-size: 0.68rem;
+	}
+
+	/* primary */
+	.hyvui-btn-primary {
+		background:
+			linear-gradient(
+				180deg,
+				color-mix(in srgb, var(--accent-strong) 22%, transparent),
+				transparent 70%
+			),
+			linear-gradient(135deg, var(--accent), var(--accent-strong));
+		color: var(--bg);
+		border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--accent));
+		box-shadow:
+			inset 0 1px 0 rgba(255, 255, 255, 0.16),
+			0 14px 26px rgba(199, 156, 87, 0.16);
+	}
+
+	.hyvui-btn-primary:hover:not(:disabled):not(.hyvui-btn-disabled) {
+		transform: translateY(-2px);
+		filter: brightness(1.03);
+	}
+
+	/* secondary */
+	.hyvui-btn-secondary {
+		background:
+			linear-gradient(180deg, rgba(121, 166, 163, 0.06), transparent 62%), rgba(10, 12, 14, 0.74);
+		color: var(--text-soft);
+		border-color: var(--line-strong);
+	}
+
+	.hyvui-btn-secondary:hover:not(:disabled):not(.hyvui-btn-disabled) {
+		transform: translateY(-2px);
+		border-color: color-mix(in srgb, var(--accent) 46%, var(--line-strong));
+		color: var(--text);
+	}
+
+	/* ghost */
+	.hyvui-btn-ghost {
+		background: transparent;
+		color: var(--muted);
+		border-color: transparent;
+		box-shadow: none;
+	}
+
+	.hyvui-btn-ghost:hover:not(:disabled):not(.hyvui-btn-disabled) {
+		background: linear-gradient(90deg, rgba(199, 156, 87, 0.12), transparent 78%);
+		color: var(--text);
+		transform: translateX(2px);
+	}
+
+	/* destructive */
+	.hyvui-btn-destructive {
+		background: rgba(10, 12, 14, 0.74);
+		color: var(--text-soft);
+		border-color: rgba(182, 106, 72, 0.34);
+	}
+
+	.hyvui-btn-destructive:hover:not(:disabled):not(.hyvui-btn-disabled) {
+		background-color: rgba(182, 106, 72, 0.1);
+		transform: translateY(-2px);
+	}
+
+	/* loading dot */
+	.hyvui-btn-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background-color: var(--status-pend);
+		animation: pulse-dot 2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-btn {
+			transition: none;
+		}
+
+		.hyvui-btn:hover:not(:disabled):not(.hyvui-btn-disabled) {
+			transform: none;
+		}
+
+		.hyvui-btn-dot {
+			animation: none;
+		}
+	}
+
+	/* ── hextech ornament ─────────────────────────────────────────────── */
+	:global([data-register='hextech']) .hyvui-btn {
+		border-radius: var(--radius-sm);
+	}
+
+	/* brass corner pip — top-left notch */
+	:global([data-register='hextech']) .hyvui-btn::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 7px;
+		height: 7px;
+		border-top: 1.5px solid rgba(212, 165, 116, 0.55);
+		border-left: 1.5px solid rgba(212, 165, 116, 0.55);
+		pointer-events: none;
+	}
+
+	:global([data-register='hextech']) .hyvui-btn-primary:hover:not(:disabled):not(.hyvui-btn-disabled),
+	:global([data-register='hextech']) .hyvui-btn-primary:focus-visible {
+		box-shadow:
+			inset 0 1px 0 rgba(255, 255, 255, 0.2),
+			0 0 18px rgba(93, 217, 240, 0.3),
+			0 14px 26px rgba(184, 115, 51, 0.18);
+	}
+
+	:global([data-register='hextech']) .hyvui-btn-secondary:hover:not(:disabled):not(.hyvui-btn-disabled),
+	:global([data-register='hextech']) .hyvui-btn-secondary:focus-visible {
+		box-shadow: 0 0 12px rgba(93, 217, 240, 0.2);
+		border-color: rgba(93, 217, 240, 0.4);
+	}
+
+	/* ── arcane ornament ──────────────────────────────────────────────── */
+
+	/* crystal accent — top-right shard corner */
+	:global([data-register='arcane']) .hyvui-btn::after {
+		content: '';
+		position: absolute;
+		top: -1px;
+		right: -1px;
+		width: 8px;
+		height: 8px;
+		background: rgba(233, 76, 188, 0.55);
+		clip-path: polygon(100% 0, 100% 100%, 0 0);
+		pointer-events: none;
+	}
+
+	:global([data-register='arcane']) .hyvui-btn-primary:hover:not(:disabled):not(.hyvui-btn-disabled),
+	:global([data-register='arcane']) .hyvui-btn-primary:focus-visible {
+		box-shadow:
+			inset 0 1px 0 rgba(255, 255, 255, 0.14),
+			0 0 22px rgba(184, 69, 201, 0.38),
+			0 14px 26px rgba(184, 69, 201, 0.14);
+	}
+
+	:global([data-register='arcane']) .hyvui-btn-secondary:hover:not(:disabled):not(.hyvui-btn-disabled),
+	:global([data-register='arcane']) .hyvui-btn-secondary:focus-visible {
+		box-shadow: 0 0 14px rgba(184, 69, 201, 0.28);
+		border-color: rgba(184, 69, 201, 0.5);
+	}
+</style>

package/dist/components/inputs/Button.svelte.d.ts

@@ -1,4 +1,12 @@
 import type { Snippet } from 'svelte';
+/**
+ * @see echo — add `echo` prop (or `use:echo` directly) for a gold click-pulse ripple.
+ * @example
+ * <Button variant="primary" onclick={handleSubmit}>submit</Button>
+ * <Button variant="ghost" href="/back">go back</Button>
+ * <Button variant="destructive" loading>deleting...</Button>
+ * <Button variant="primary" echo onclick={confirm}>confirm</Button>
+ */
 interface Props {
     /** Button visual style. */
     variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';