@hyvor/design 1.1.10 → 1.1.12-beta.1

package/dist/components/DetailCard/DetailCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+    interface Props {
+        label: string | Snippet;
+        content?: string;
+        children?: Snippet;
+    }
+
+    let { label, content,  children }: Props = $props();
+
+    const labelId = `detail-card-${Math.random().toString(36).substring(2, 15)}`;
+
+</script>
+
+<div class="detail-card" role="region" aria-labelledby={labelId}>
+
+    <div class="label" id={labelId}>
+        {#if typeof label === "string"}
+            {label}
+        {:else}
+            {@render label()}
+        {/if}
+    </div>
+
+    <div class="content">
+        {#if children}
+            {@render children()}
+        {:else if content}
+            {content}
+        {/if}
+    </div>
+
+</div>
+
+<style>
+    .detail-card {
+        background: var(--hover);
+        padding: 15px 20px;
+        border-radius: var(--box-radius);
+        border: 1px solid var(--border);
+    }
+    .label {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-light);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 6px;
+    }
+    .content {
+        font-size: 14px;
+        word-break: break-word;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string | Snippet;
+    content?: string;
+    children?: Snippet;
+}
+declare const DetailCard: import("svelte").Component<Props, {}, "">;
+type DetailCard = ReturnType<typeof DetailCard>;
+export default DetailCard;

package/dist/components/DetailCard/DetailCards.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+    interface Props {
+        children?: Snippet
+        min?: number;
+    }
+
+    let { 
+        children,
+        min = 300
+    }: Props = $props();
+</script>
+
+<div class="cards" style="--min: {min}px">
+    {@render children?.()}
+</div>
+
+<style>
+    .cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
+        gap: 10px;
+    }
+</style>

package/dist/components/DetailCard/DetailCards.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children?: Snippet;
+    min?: number;
+}
+declare const DetailCards: import("svelte").Component<Props, {}, "">;
+type DetailCards = ReturnType<typeof DetailCards>;
+export default DetailCards;

package/dist/components/index.d.ts

@@ -15,6 +15,8 @@ export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
+export { default as DetailCard } from './DetailCard/DetailCard.svelte';
+export { default as DetailCards } from './DetailCard/DetailCards.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';
 export { default as Caption } from './FormControl/Caption.svelte';

package/dist/components/index.js

@@ -15,6 +15,8 @@ export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
+export { default as DetailCard } from './DetailCard/DetailCard.svelte';
+export { default as DetailCards } from './DetailCard/DetailCards.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';
 export { default as Caption } from './FormControl/Caption.svelte';

package/dist/marketing/Affiliate/Affiliate.svelte

@@ -0,0 +1,75 @@
+<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';
+
+    let partner: string | null = $state(null);
+    let showModal = $state(false);
+
+    onMount(() => {
+        const params = new URLSearchParams(window.location.search);
+        partner = params.get('partner');
+
+        if (partner) {
+            showModal = true;
+        }
+    });
+
+    function handleConsent() {
+        const coreUrl = `${location.protocol}//${location.hostname.split('.').slice(-2).join('.')}`;
+
+		fetch(coreUrl + '/api/public/affiliate/placement', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				partner: partner,
+				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;
+        });
+    }
+</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>
+</Modal>
+
+<style>
+    .notice {
+        line-height: 24px;
+    }
+</style>

package/dist/marketing/Affiliate/Affiliate.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Affiliate: import("svelte").Component<Record<string, never>, {}, "">;
+type Affiliate = ReturnType<typeof Affiliate>;
+export default Affiliate;

package/dist/marketing/Footer/Footer.svelte

@@ -13,6 +13,7 @@
 	import LanguageToggle from '../../components/Internationalization/LanguageToggle.svelte';
 	import IconBluesky from '@hyvor/icons/IconBluesky';
 	import { SOCIAL_LINKS, type Socials } from '../social.js';
+	import Affiliate from '../Affiliate/Affiliate.svelte';
 
 	const year = new Date().getFullYear();
 
@@ -20,12 +21,14 @@
 		email?: string | null;
 		social?: Partial<Socials>;
 		center?: import('svelte').Snippet;
+		affiliate?: boolean;
 	}
 
 	let {
 		email = null,
 		social = $bindable({} as Record<string, string | null>),
-		center
+		center,
+		affiliate = true
 	}: Props = $props();
 
 	social = {
@@ -109,6 +112,11 @@
 			<div class="footer-bottom-right">From France 🇫🇷</div>
 		</div>
 	</Container>
+
+	{#if affiliate}
+		<Affiliate />
+	{/if}
+
 </footer>
 
 <style>

package/dist/marketing/Footer/Footer.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     email?: string | null;
     social?: Partial<Socials>;
     center?: import('svelte').Snippet;
+    affiliate?: boolean;
 }
 declare const Footer: import("svelte").Component<Props, {}, "social">;
 type Footer = ReturnType<typeof Footer>;

package/package.json

@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.10"
+	"version": "1.1.12-beta.1"
 }