@hyvor/design 2.0.0-beta.1 → 2.0.0

package/dist/components/TextInput/TextInput.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
-	interface Props {
+	import { legacyHandlers } from '../../legacy.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props extends HTMLInputAttributes {
 		state?: 'default' | 'error' | 'success' | 'warning';
-		size?: 'small' | 'medium' | 'large' | 'x-small';
+		size?: 'small' | 'medium' | 'large' | 'x-small' | any;
 		block?: boolean;
 		value?: any;
 		input?: HTMLInputElement;
 		start?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
-		select?: boolean;
 		selectInput?: HTMLSelectElement;
+		children?: Snippet;
 		[key: string]: any;
 
 		onkeyup?: (event: KeyboardEvent) => void;
@@ -32,8 +39,8 @@
 		input = $bindable(),
 		start,
 		end,
-		select = false,
 		selectInput = $bindable({} as HTMLSelectElement),
+		children,
 
 		onkeyup,
 		onkeydown,
@@ -45,9 +52,7 @@
 		onmouseenter,
 		onmouseleave,
 		onchange,
-		oninput,
-
-		...rest
+		oninput
 	}: Props = $props();
 </script>
 
@@ -58,43 +63,21 @@
 		</span>
 	{/if}
 
-	{#if select}
-		<select
-			{...rest}
-			bind:value
-			bind:this={selectInput}
-			{onkeyup}
-			{onkeydown}
-			{onkeypress}
-			{onfocus}
-			{onblur}
-			{onclick}
-			{onmouseover}
-			{onmouseenter}
-			{onmouseleave}
-			{onchange}
-			{oninput}
-		>
-			{@render rest?.children()}
-		</select>
-	{:else}
-		<input
-			{...rest}
-			bind:value
-			bind:this={input}
-			{onkeyup}
-			{onkeydown}
-			{onkeypress}
-			{onfocus}
-			{onblur}
-			{onclick}
-			{onmouseover}
-			{onmouseenter}
-			{onmouseleave}
-			{onchange}
-			{oninput}
-		/>
-	{/if}
+	<input
+		bind:value
+		bind:this={input}
+		onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
+		onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
+		onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
+		onfocus={legacyHandlers(onfocus, bubble('focus'))}
+		onblur={legacyHandlers(onblur, bubble('blur'))}
+		onclick={legacyHandlers(onclick, bubble('click'))}
+		onmouseover={legacyHandlers(onmouseover, bubble('mouseover'))}
+		onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
+		onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
+		onchange={legacyHandlers(onchange, bubble('change'))}
+		oninput={legacyHandlers(oninput, bubble('input'))}
+	/>
 
 	{#if end}
 		<span class="slot end">
@@ -136,8 +119,7 @@
   width: 100%;
 }
 
-input,
-select {
+input {
   flex: 1;
   width: 100%;
   border: none;
@@ -149,15 +131,10 @@ select {
   color: inherit;
   height: 100%;
 }
-input:focus,
-select:focus {
+input:focus {
   outline: none;
 }
 
-select {
-  min-width: 180px;
-}
-
 .input-wrap.size-x-small {
   padding: 0 15px;
   height: 20px;

package/dist/components/TextInput/TextInput.svelte.d.ts

@@ -1,13 +1,15 @@
-interface Props {
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
     state?: 'default' | 'error' | 'success' | 'warning';
-    size?: 'small' | 'medium' | 'large' | 'x-small';
+    size?: 'small' | 'medium' | 'large' | 'x-small' | any;
     block?: boolean;
     value?: any;
     input?: HTMLInputElement;
     start?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
-    select?: boolean;
     selectInput?: HTMLSelectElement;
+    children?: Snippet;
     [key: string]: any;
     onkeyup?: (event: KeyboardEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;

package/dist/components/Textarea/Textarea.svelte

@@ -28,18 +28,7 @@
 	}: Props = $props();
 </script>
 
-<span
-	class="input-wrap state-{state}"
-	class:block
-	onclick={() => textarea.focus()}
-	onkeydown={(e) => {
-		if (e.key === 'Enter') {
-			textarea.focus();
-		}
-	}}
-	role="textbox"
-	tabindex="0"
->
+<div class="textarea-container" class:block>
 	{#if start}
 		<span class="slot start">
 			{@render start?.()}
@@ -60,6 +49,7 @@
 		onmouseleave={bubble('mouseleave')}
 		onchange={bubble('change')}
 		oninput={bubble('input')}
+		class="state-{state}"
 		{rows}
 		{cols}
 		{...rest}
@@ -70,89 +60,85 @@
 			{@render end?.()}
 		</span>
 	{/if}
-</span>
-
-<style>.input-wrap {
-  padding: 10px 15px;
-  background-color: var(--input);
-  transition: 0.2s box-shadow;
-  font-family: inherit;
-  font-size: 14px;
-  border-radius: 20px;
-  border: none;
-  transition: 0.2s box-shadow;
-  max-width: 100%;
-  color: inherit;
-  display: inline-flex;
-  resize: vertical;
-  overflow: auto;
-  align-items: flex-start;
-  justify-content: center;
-}
-.input-wrap:focus-within {
-  outline: 0;
-  box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
-}
-.input-wrap {
-  --local-shadow-size: 2px;
-}
-
-.input-wrap.block {
-  display: block;
-  width: 100%;
-  resize: vertical;
-}
-
-.input-wrap:focus-visible {
-  outline: 0;
-}
-
-.input-wrap.state-error {
-  box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
-}
-.input-wrap.state-error:focus-within {
-  box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
-}
-
-.input-wrap.state-success {
-  box-shadow: 0 0 0 2px var(--green-light);
-}
-.input-wrap.state-success:focus-within {
-  box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
-}
-
-.input-wrap.state-warning {
-  box-shadow: 0 0 0 2px var(--orange-light);
-}
-.input-wrap.state-warning:focus-within {
-  box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
-}
-
-.input-wrap .slot {
-  padding: 0 10px;
-}
-
-.input-wrap .slot.start {
-  margin-right: 10px;
-}
-
-.input-wrap .slot.end {
-  margin-left: 10px;
-}
-
-.input-wrap textarea {
-  flex: 1;
-  width: 100%;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-}
-.input-wrap textarea:focus {
-  outline: none;
-}
-.input-wrap textarea {
-  resize: none;
-}</style>
+</div>
+
+<style>
+	.textarea-container {
+		position: relative;
+		display: inline-block;
+		max-width: 100%;
+
+		&.block {
+			display: block;
+			width: 100%;
+		}
+	}
+
+	textarea {
+		padding: 10px 15px;
+		background-color: var(--input);
+		font-family: inherit;
+		font-size: 14px;
+		border-radius: 20px;
+		border-bottom-right-radius: 0;
+		border: none;
+		transition: 0.2s box-shadow;
+		width: 100%;
+		color: inherit;
+		resize: vertical;
+		box-sizing: border-box;
+
+		&:focus {
+			outline: 0;
+			box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
+		}
+
+		--local-shadow-size: 2px;
+
+		&.state-error {
+			box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
+			&:focus {
+				box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
+			}
+		}
+
+		&.state-success {
+			box-shadow: 0 0 0 2px var(--green-light);
+			&:focus {
+				box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
+			}
+		}
+
+		&.state-warning {
+			box-shadow: 0 0 0 2px var(--orange-light);
+			&:focus {
+				box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
+			}
+		}
+	}
+
+	.start ~ textarea {
+		padding-left: 45px;
+	}
+
+	.end ~ textarea {
+		padding-right: 45px;
+	}
+
+	.slot {
+		position: absolute;
+		top: 10px;
+		pointer-events: none;
+		display: flex;
+		align-items: center;
+		z-index: 1;
+
+		&.start {
+			left: 15px;
+		}
+
+		&.end {
+			right: 15px;
+		}
+	}
+</style>

package/dist/index.css

@@ -51,10 +51,10 @@ a {
 }
 
 .hds-container-max {
-    width: 1400px;
-    max-width: 100%;
-    padding: 0 15px;
-    margin: auto;
+	width: 1400px;
+	max-width: 100%;
+	padding: 0 15px;
+	margin: auto;
 }
 
 .hds-link {

package/dist/legacy.js

@@ -1,8 +1,8 @@
-import { handlers } from "svelte/legacy";
+import { handlers } from 'svelte/legacy';
 /**
  * Extends svelte4 handlers to support undefined
  */
 export function legacyHandlers(...eventHandlers) {
-    const all = eventHandlers.filter(h => h !== undefined);
+    const all = eventHandlers.filter((h) => h !== undefined);
     return handlers(...all);
 }

package/dist/marketing/Affiliate/Affiliate.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
 	import Link from '../../components/Link/Link.svelte';
 	import Modal from '../../components/Modal/Modal.svelte';
-    import { replaceState } from '$app/navigation';
-    import { onMount } from 'svelte';
+	import { replaceState } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-    let partner: string | null = $state(null);
-    let showModal = $state(false);
+	let partner: string | null = $state(null);
+	let showModal = $state(false);
 
-    onMount(() => {
-        const params = new URLSearchParams(window.location.search);
-        partner = params.get('partner');
+	onMount(() => {
+		const params = new URLSearchParams(window.location.search);
+		partner = params.get('partner');
 
-        if (partner) {
-            showModal = true;
-        }
-    });
+		if (partner) {
+			showModal = true;
+		}
+	});
 
-    function handleConsent() {
-        const coreUrl = `${location.protocol}//${location.hostname.split('.').slice(-2).join('.')}`;
+	function handleConsent() {
+		const coreUrl = `${location.protocol}//${location.hostname.split('.').slice(-2).join('.')}`;
 
 		fetch(coreUrl + '/api/public/affiliate/placement', {
 			method: 'POST',
@@ -29,47 +29,49 @@
 				url: window.location.href
 			}),
 			credentials: 'include'
-		}).then((response) => {
-			if (response.ok) {
-				console.info('Affiliate placement recorded for partner:', partner);
-			}
-		}).finally(() => {
-            const url = new URL(window.location.href);
-            url.searchParams.delete('partner');
-            replaceState(url, {});
-            showModal = false;
-        });
-    }
+		})
+			.then((response) => {
+				if (response.ok) {
+					console.info('Affiliate placement recorded for partner:', partner);
+				}
+			})
+			.finally(() => {
+				const url = new URL(window.location.href);
+				url.searchParams.delete('partner');
+				replaceState(url, {});
+				showModal = false;
+			});
+	}
 </script>
 
 <Modal
-    title="Referred by {partner}"
-    bind:show={showModal}
-    closeOnOutsideClick={false}
-    footer={
-        {
-            cancel: {
-                text: "Do not track"
-            },
-            confirm: {
-                text: "Ok, Visit Site",
-            }
-        }
-    }
-    on:confirm={handleConsent}
-    >
-    <div class="notice">
-        You visited our site through our affiliate partner <strong>{partner}</strong>. To track this referral, we will place a small
-        cookie in your browser. This cookie helps us identify which affiliate partner referred you 
-        if you sign up. It does not collect any personal data.
-    </div>
-    <p>
-        You can read more in our <Link href="https://hyvor.com/privacy" target="_blank">Privacy Policy</Link>.
-    </p>
+	title="Referred by {partner}"
+	bind:show={showModal}
+	closeOnOutsideClick={false}
+	footer={{
+		cancel: {
+			text: 'Do not track'
+		},
+		confirm: {
+			text: 'Ok, Visit Site'
+		}
+	}}
+	on:confirm={handleConsent}
+>
+	<div class="notice">
+		You visited our site through our affiliate partner <strong>{partner}</strong>. To track this
+		referral, we will place a small cookie in your browser. This cookie helps us identify which
+		affiliate partner referred you if you sign up. It does not collect any personal data.
+	</div>
+	<p>
+		You can read more in our <Link href="https://hyvor.com/privacy" target="_blank"
+			>Privacy Policy</Link
+		>.
+	</p>
 </Modal>
 
 <style>
-    .notice {
-        line-height: 24px;
-    }
-</style>
+	.notice {
+		line-height: 24px;
+	}
+</style>

package/dist/marketing/Container/Container.svelte

@@ -2,16 +2,15 @@
 	interface Props {
 		as?: string;
 		children?: import('svelte').Snippet;
-        max?: boolean;
+		max?: boolean;
 	}
 
-	let { as = 'div', children, max = false
-    }: Props = $props();
+	let { as = 'div', children, max = false }: Props = $props();
 
-    let width= max ? '1400px' : '1000px';
+	let width = max ? '1400px' : '1000px';
 </script>
 
-<svelte:element this={as} class="container" style:width={width}>
+<svelte:element this={as} class="container" style:width>
 	{@render children?.()}
 </svelte:element>
 

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -27,8 +27,7 @@
 		}
 
 		const category =
-			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText ||
-			null;
+			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText || null;
 
 		active = {
 			name: activeEl.innerText,

package/dist/marketing/Footer/Footer.svelte

@@ -24,7 +24,7 @@
 		center?: import('svelte').Snippet;
 		affiliate?: boolean;
 		recordVisit?: boolean;
-        max?: boolean;
+		max?: boolean;
 	}
 
 	let {
@@ -33,7 +33,7 @@
 		center,
 		affiliate = true,
 		recordVisit = true,
-        max = false,
+		max = false
 	}: Props = $props();
 
 	social = {