@r2digisolutions/components 0.1.1

package/dist/components/molecules/NewsletterSignup/NewsletterSignup.stories.d.ts

@@ -0,0 +1,80 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        example?: "error" | "success" | "card" | "stacked" | "inline" | "minimal" | "banner" | "consent";
+        title?: string;
+        description?: string;
+        variant?: import("./NewsletterSignup.svelte.ts").NewsletterVariant;
+        size?: import("./NewsletterSignup.svelte.ts").NewsletterSize;
+        showName?: boolean;
+        requireConsent?: boolean;
+        socialProof?: string;
+        privacyNote?: string;
+        buttonLabel?: string;
+        loading?: boolean;
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        example: {
+            control: "select";
+            options: string[];
+        };
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        title: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        buttonLabel: {
+            control: "text";
+        };
+        socialProof: {
+            control: "text";
+        };
+        privacyNote: {
+            control: "text";
+        };
+        showName: {
+            control: "boolean";
+        };
+        requireConsent: {
+            control: "boolean";
+        };
+        loading: {
+            control: "boolean";
+        };
+    };
+    args: {
+        example: "card";
+        variant: "card";
+        size: "md";
+        title: string;
+        description: string;
+        buttonLabel: string;
+        socialProof: string;
+        privacyNote: string;
+        showName: false;
+        requireConsent: false;
+        loading: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Inline: Story;
+export declare const Stacked: Story;
+export declare const Banner: Story;
+export declare const Minimal: Story;
+export declare const WithConsent: Story;
+export declare const ErrorState: Story;
+export declare const Success: Story;
+export declare const SocialProof: Story;

package/dist/components/molecules/NewsletterSignup/NewsletterSignup.stories.js

@@ -0,0 +1,73 @@
+import NewsletterSignupStory from './NewsletterSignupStory.svelte';
+const meta = {
+    title: 'Molecules/NewsletterSignup',
+    component: NewsletterSignupStory,
+    tags: ['autodocs'],
+    argTypes: {
+        example: {
+            control: 'select',
+            options: ['card', 'inline', 'stacked', 'banner', 'minimal', 'consent', 'error', 'success']
+        },
+        variant: {
+            control: 'select',
+            options: ['card', 'inline', 'stacked', 'minimal', 'banner']
+        },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        title: { control: 'text' },
+        description: { control: 'text' },
+        buttonLabel: { control: 'text' },
+        socialProof: { control: 'text' },
+        privacyNote: { control: 'text' },
+        showName: { control: 'boolean' },
+        requireConsent: { control: 'boolean' },
+        loading: { control: 'boolean' }
+    },
+    args: {
+        example: 'card',
+        variant: 'card',
+        size: 'md',
+        title: 'Stay in the loop',
+        description: 'Product updates, no spam.',
+        buttonLabel: 'Subscribe',
+        socialProof: '',
+        privacyNote: 'Unsubscribe anytime. No spam.',
+        showName: false,
+        requireConsent: false,
+        loading: false
+    }
+};
+export default meta;
+export const Default = {};
+export const Inline = {
+    args: { example: 'inline', variant: 'inline' }
+};
+export const Stacked = {
+    name: 'Stacked with name',
+    args: { example: 'stacked', showName: true }
+};
+export const Banner = {
+    args: { example: 'banner', variant: 'banner', size: 'lg' }
+};
+export const Minimal = {
+    args: { example: 'minimal', variant: 'minimal', size: 'sm' }
+};
+export const WithConsent = {
+    name: 'With consent',
+    args: { example: 'consent', requireConsent: true }
+};
+export const ErrorState = {
+    name: 'Error',
+    args: { example: 'error' }
+};
+export const Success = {
+    args: { example: 'success' }
+};
+export const SocialProof = {
+    name: 'Social proof',
+    args: {
+        example: 'card',
+        socialProof: 'Join 12,400 readers',
+        title: 'Engineering digest',
+        description: 'Deep dives every other week.'
+    }
+};

package/dist/components/molecules/NewsletterSignup/NewsletterSignup.svelte

@@ -0,0 +1,224 @@
+<script module lang="ts">
+	export type NewsletterVariant = 'card' | 'inline' | 'stacked' | 'minimal' | 'banner';
+	export type NewsletterSize = 'sm' | 'md' | 'lg';
+</script>
+
+<script lang="ts">
+	import Input from '../../atoms/Input/Input.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import Text from '../../atoms/Text/Text.svelte';
+
+	interface NewsletterSignupProps {
+		title?: string;
+		description?: string;
+		placeholder?: string;
+		buttonLabel?: string;
+		showName?: boolean;
+		namePlaceholder?: string;
+		name?: string;
+		email?: string;
+		variant?: NewsletterVariant;
+		size?: NewsletterSize;
+		loading?: boolean;
+		success?: boolean;
+		error?: string;
+		successTitle?: string;
+		successMessage?: string;
+		privacyNote?: string;
+		requireConsent?: boolean;
+		consentLabel?: string;
+		consent?: boolean;
+		socialProof?: string;
+		disabled?: boolean;
+		class?: string;
+		onsubmit?: (payload: { email: string; name?: string; consent: boolean }) => void;
+	}
+
+	let {
+		title = 'Stay in the loop',
+		description = 'Product updates, no spam.',
+		placeholder = 'you@company.com',
+		buttonLabel = 'Subscribe',
+		showName = false,
+		namePlaceholder = 'Your name',
+		name = $bindable(''),
+		email = $bindable(''),
+		variant = 'card',
+		size = 'md',
+		loading = false,
+		success = false,
+		error = '',
+		successTitle = "You're subscribed",
+		successMessage = 'Check your inbox to confirm.',
+		privacyNote = 'Unsubscribe anytime. No spam.',
+		requireConsent = false,
+		consentLabel = 'I agree to receive email updates',
+		consent = $bindable(false),
+		socialProof,
+		disabled = false,
+		class: className = '',
+		onsubmit
+	}: NewsletterSignupProps = $props();
+
+	const emailOk = $derived(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()));
+	const canSubmit = $derived(
+		emailOk &&
+			!loading &&
+			!disabled &&
+			(!requireConsent || consent) &&
+			(!showName || name.trim().length > 0)
+	);
+
+	const pad = $derived(
+		variant === 'minimal'
+			? 'p-0'
+			: variant === 'banner'
+				? size === 'sm'
+					? 'px-4 py-3'
+					: 'px-5 py-4'
+				: size === 'sm'
+					? 'p-4'
+					: size === 'lg'
+						? 'p-6'
+						: 'p-5'
+	);
+
+	const shell = $derived(
+		variant === 'minimal'
+			? ''
+			: variant === 'banner'
+				? 'rounded-2xl border border-border bg-gradient-to-br from-brand-500/10 via-surface-elevated to-surface-elevated'
+				: 'rounded-xl border border-border bg-surface-elevated'
+	);
+
+	const titleClass = $derived(size === 'lg' ? 'text-lg' : 'text-sm');
+	const btnSize = $derived(size === 'lg' ? 'md' : 'sm');
+
+	function submit(e: Event) {
+		e.preventDefault();
+		if (!canSubmit) return;
+		onsubmit?.({
+			email: email.trim(),
+			name: showName ? name.trim() : undefined,
+			consent: requireConsent ? consent : true
+		});
+	}
+</script>
+
+{#snippet consentField()}
+	{#if requireConsent}
+		<label class="flex items-start gap-2 text-xs text-secondary">
+			<input
+				type="checkbox"
+				class="mt-0.5 rounded border-border accent-brand-500"
+				bind:checked={consent}
+				disabled={disabled || loading}
+			/>
+			<span>{consentLabel}</span>
+		</label>
+	{/if}
+{/snippet}
+
+<div class={[shell, pad, className]}>
+	{#if success}
+		<div class="space-y-1">
+			<p class={['font-semibold text-primary', titleClass]}>{successTitle}</p>
+			<Text size="xs" tone="muted">{successMessage}</Text>
+		</div>
+	{:else if variant === 'inline'}
+		<form class="flex flex-col gap-3 sm:flex-row sm:items-end" onsubmit={submit}>
+			<div class="min-w-0 sm:w-44 sm:shrink-0">
+				<p class={['font-semibold text-primary', titleClass]}>{title}</p>
+				{#if description}
+					<Text size="xs" tone="muted" class="mt-1">{description}</Text>
+				{/if}
+				{#if socialProof}
+					<p class="mt-1 text-[11px] font-medium text-brand-600 dark:text-brand-400">
+						{socialProof}
+					</p>
+				{/if}
+			</div>
+			<div class="min-w-0 flex-1 space-y-2">
+				{#if showName}
+					<Input
+						size={btnSize}
+						bind:value={name}
+						placeholder={namePlaceholder}
+						disabled={disabled || loading}
+					/>
+				{/if}
+				<Input
+					type="email"
+					size={btnSize}
+					bind:value={email}
+					{placeholder}
+					required
+					disabled={disabled || loading}
+					status={error ? 'error' : 'default'}
+					helperText={error || undefined}
+				/>
+				{@render consentField()}
+			</div>
+			<Button type="submit" size={btnSize} {loading} disabled={!canSubmit} class="sm:shrink-0">
+				{buttonLabel}
+			</Button>
+		</form>
+		{#if privacyNote}
+			<p class="mt-2 text-[11px] text-muted">{privacyNote}</p>
+		{/if}
+	{:else}
+		{#if variant !== 'minimal'}
+			<div class="mb-1">
+				<p class={['font-semibold text-primary', titleClass]}>{title}</p>
+				{#if description}
+					<Text size="xs" tone="muted" class="mt-1">{description}</Text>
+				{/if}
+				{#if socialProof}
+					<p class="mt-1.5 text-[11px] font-medium text-brand-600 dark:text-brand-400">
+						{socialProof}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		<form class="mt-3 space-y-2" onsubmit={submit}>
+			{#if showName}
+				<Input
+					size={btnSize}
+					bind:value={name}
+					placeholder={namePlaceholder}
+					disabled={disabled || loading}
+					label={variant === 'minimal' ? undefined : 'Name'}
+				/>
+			{/if}
+
+			<div
+				class={[
+					'flex flex-col gap-2',
+					variant !== 'stacked' && 'sm:flex-row'
+				]}
+			>
+				<Input
+					type="email"
+					size={btnSize}
+					bind:value={email}
+					{placeholder}
+					required
+					disabled={disabled || loading}
+					class="flex-1"
+					status={error ? 'error' : 'default'}
+					helperText={error || undefined}
+				/>
+				<Button type="submit" size={btnSize} {loading} disabled={!canSubmit}>
+					{buttonLabel}
+				</Button>
+			</div>
+
+			{@render consentField()}
+
+			{#if privacyNote && variant !== 'minimal'}
+				<p class="text-[11px] text-muted">{privacyNote}</p>
+			{/if}
+		</form>
+	{/if}
+</div>

package/dist/components/molecules/NewsletterSignup/NewsletterSignup.svelte.d.ts

@@ -0,0 +1,34 @@
+export type NewsletterVariant = 'card' | 'inline' | 'stacked' | 'minimal' | 'banner';
+export type NewsletterSize = 'sm' | 'md' | 'lg';
+interface NewsletterSignupProps {
+    title?: string;
+    description?: string;
+    placeholder?: string;
+    buttonLabel?: string;
+    showName?: boolean;
+    namePlaceholder?: string;
+    name?: string;
+    email?: string;
+    variant?: NewsletterVariant;
+    size?: NewsletterSize;
+    loading?: boolean;
+    success?: boolean;
+    error?: string;
+    successTitle?: string;
+    successMessage?: string;
+    privacyNote?: string;
+    requireConsent?: boolean;
+    consentLabel?: string;
+    consent?: boolean;
+    socialProof?: string;
+    disabled?: boolean;
+    class?: string;
+    onsubmit?: (payload: {
+        email: string;
+        name?: string;
+        consent: boolean;
+    }) => void;
+}
+declare const NewsletterSignup: import("svelte").Component<NewsletterSignupProps, {}, "email" | "name" | "consent">;
+type NewsletterSignup = ReturnType<typeof NewsletterSignup>;
+export default NewsletterSignup;

package/dist/components/molecules/NewsletterSignup/NewsletterSignupStory.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import NewsletterSignup, {
+		type NewsletterSize,
+		type NewsletterVariant
+	} from './NewsletterSignup.svelte';
+
+	type Example = 'card' | 'inline' | 'stacked' | 'banner' | 'minimal' | 'consent' | 'error' | 'success';
+
+	let props = $props<{
+		example?: Example;
+		title?: string;
+		description?: string;
+		variant?: NewsletterVariant;
+		size?: NewsletterSize;
+		showName?: boolean;
+		requireConsent?: boolean;
+		socialProof?: string;
+		privacyNote?: string;
+		buttonLabel?: string;
+		loading?: boolean;
+	}>();
+
+	let email = $state('');
+	let name = $state('');
+	let consent = $state(false);
+	let success = $state(false);
+	let loading = $state(false);
+	let error = $state('');
+	let last = $state('—');
+
+	const example = $derived(props.example ?? 'card');
+
+	async function fakeSubmit(payload: { email: string; name?: string; consent: boolean }) {
+		last = payload.email;
+		error = '';
+		loading = true;
+		await new Promise((r) => setTimeout(r, 700));
+		loading = false;
+		if (example === 'error') {
+			error = 'This email looks invalid or is already subscribed.';
+			return;
+		}
+		success = true;
+	}
+
+	$effect(() => {
+		if (example === 'success') success = true;
+		else if (example !== 'error') {
+			// reset when switching away from success demo via controls
+		}
+	});
+</script>
+
+<div class="w-full max-w-xl space-y-2">
+	<p class="text-xs text-secondary">
+		Last submit: <span class="font-medium text-primary">{last}</span>
+	</p>
+
+	{#if example === 'success'}
+		<NewsletterSignup
+			success
+			successTitle="Welcome aboard"
+			successMessage="We sent a confirmation link to your inbox."
+			variant={props.variant ?? 'card'}
+			size={props.size ?? 'md'}
+		/>
+	{:else if example === 'error'}
+		<NewsletterSignup
+			bind:email
+			bind:name
+			title={props.title ?? 'Join the newsletter'}
+			description={props.description ?? 'Try submitting to see the error state.'}
+			variant={props.variant ?? 'card'}
+			size={props.size ?? 'md'}
+			showName={props.showName ?? false}
+			{error}
+			loading={loading || (props.loading ?? false)}
+			socialProof={props.socialProof}
+			privacyNote={props.privacyNote ?? 'Unsubscribe anytime.'}
+			buttonLabel={props.buttonLabel ?? 'Subscribe'}
+			onsubmit={fakeSubmit}
+		/>
+	{:else if example === 'inline'}
+		<NewsletterSignup
+			bind:email
+			title={props.title ?? 'Weekly digest'}
+			description={props.description ?? 'One email, every Monday.'}
+			variant="inline"
+			size={props.size ?? 'md'}
+			showName={props.showName ?? false}
+			socialProof={props.socialProof ?? '12.4k subscribers'}
+			privacyNote={props.privacyNote ?? 'No spam. Unsubscribe anytime.'}
+			buttonLabel={props.buttonLabel ?? 'Join'}
+			loading={loading || (props.loading ?? false)}
+			{success}
+			onsubmit={fakeSubmit}
+		/>
+	{:else if example === 'stacked'}
+		<NewsletterSignup
+			bind:email
+			bind:name
+			title={props.title ?? 'Developer updates'}
+			description={props.description ?? 'Release notes and deep dives.'}
+			variant="stacked"
+			size={props.size ?? 'md'}
+			showName={true}
+			buttonLabel={props.buttonLabel ?? 'Subscribe'}
+			privacyNote={props.privacyNote}
+			loading={loading || (props.loading ?? false)}
+			{success}
+			onsubmit={fakeSubmit}
+		/>
+	{:else if example === 'banner'}
+		<NewsletterSignup
+			bind:email
+			title={props.title ?? 'Ship faster with us'}
+			description={props.description ?? 'Tips, templates, and early access.'}
+			variant="banner"
+			size={props.size ?? 'lg'}
+			socialProof={props.socialProof ?? 'Loved by 8k teams'}
+			buttonLabel={props.buttonLabel ?? 'Get updates'}
+			privacyNote={props.privacyNote ?? 'We respect your inbox.'}
+			loading={loading || (props.loading ?? false)}
+			{success}
+			onsubmit={fakeSubmit}
+		/>
+	{:else if example === 'minimal'}
+		<NewsletterSignup
+			bind:email
+			variant="minimal"
+			size={props.size ?? 'sm'}
+			placeholder="Email address"
+			buttonLabel={props.buttonLabel ?? 'Notify me'}
+			loading={loading || (props.loading ?? false)}
+			{success}
+			onsubmit={fakeSubmit}
+		/>
+	{:else if example === 'consent'}
+		<NewsletterSignup
+			bind:email
+			bind:consent
+			title={props.title ?? 'Product newsletter'}
+			description={props.description ?? 'Requires explicit consent.'}
+			variant={props.variant ?? 'card'}
+			size={props.size ?? 'md'}
+			requireConsent={true}
+			consentLabel="I agree to receive marketing emails"
+			privacyNote={props.privacyNote ?? 'You can withdraw consent anytime.'}
+			buttonLabel={props.buttonLabel ?? 'Subscribe'}
+			loading={loading || (props.loading ?? false)}
+			{success}
+			onsubmit={fakeSubmit}
+		/>
+	{:else}
+		<NewsletterSignup
+			bind:email
+			bind:name
+			title={props.title ?? 'Stay in the loop'}
+			description={props.description ?? 'Product updates, no spam.'}
+			variant={props.variant ?? 'card'}
+			size={props.size ?? 'md'}
+			showName={props.showName ?? false}
+			requireConsent={props.requireConsent ?? false}
+			bind:consent
+			socialProof={props.socialProof}
+			privacyNote={props.privacyNote ?? 'Unsubscribe anytime. No spam.'}
+			buttonLabel={props.buttonLabel ?? 'Subscribe'}
+			loading={loading || (props.loading ?? false)}
+			{success}
+			onsubmit={fakeSubmit}
+		/>
+	{/if}
+</div>

package/dist/components/molecules/NewsletterSignup/NewsletterSignupStory.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type NewsletterSize, type NewsletterVariant } from './NewsletterSignup.svelte';
+type Example = 'card' | 'inline' | 'stacked' | 'banner' | 'minimal' | 'consent' | 'error' | 'success';
+type $$ComponentProps = {
+    example?: Example;
+    title?: string;
+    description?: string;
+    variant?: NewsletterVariant;
+    size?: NewsletterSize;
+    showName?: boolean;
+    requireConsent?: boolean;
+    socialProof?: string;
+    privacyNote?: string;
+    buttonLabel?: string;
+    loading?: boolean;
+};
+declare const NewsletterSignupStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type NewsletterSignupStory = ReturnType<typeof NewsletterSignupStory>;
+export default NewsletterSignupStory;

package/dist/components/molecules/NoteCard/NoteCard.stories.js

@@ -0,0 +1,8 @@
+import NoteCardStory from './NoteCardStory.svelte';
+const meta = {
+    title: 'Molecules/NoteCard',
+    component: NoteCardStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/NoteCard/NoteCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Card from '../Card/Card.svelte';
+	import AvatarLabel from '../AvatarLabel/AvatarLabel.svelte';
+	import TimeAgo from '../TimeAgo/TimeAgo.svelte';
+	import Text from '../../atoms/Text/Text.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+
+	export type NoteTone = 'default' | 'yellow' | 'green' | 'sky' | 'rose';
+
+	interface NoteCardProps {
+		title?: string;
+		body: string;
+		author?: string;
+		avatar?: string;
+		date?: Date | string | number;
+		tone?: NoteTone;
+		class?: string;
+		actions?: Snippet;
+		onpin?: () => void;
+	}
+
+	const {
+		title,
+		body,
+		author,
+		avatar,
+		date,
+		tone = 'yellow',
+		class: className = '',
+		actions,
+		onpin
+	}: NoteCardProps = $props();
+
+	const tones: Record<NoteTone, string> = {
+		default: '',
+		yellow: 'bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/50',
+		green: 'bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-900/50',
+		sky: 'bg-sky-50 border-sky-200 dark:bg-sky-950/30 dark:border-sky-900/50',
+		rose: 'bg-rose-50 border-rose-200 dark:bg-rose-950/30 dark:border-rose-900/50'
+	};
+</script>
+
+<Card
+	padding="md"
+	chrome={false}
+	class={['border', tones[tone], className].filter(Boolean).join(' ')}
+>
+	<div class="mb-2 flex items-start justify-between gap-2">
+		{#if title}
+			<p class="text-sm font-semibold text-primary">{title}</p>
+		{:else}
+			<span></span>
+		{/if}
+		<div class="flex items-center gap-1">
+			{#if actions}{@render actions()}{/if}
+			{#if onpin}
+				<IconButton label="Pin note" size="xs" onclick={() => onpin()}>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 17v5m0-5l-4-4V7h8v6l-4 4z" />
+					</svg>
+				</IconButton>
+			{/if}
+		</div>
+	</div>
+	<Text size="sm" tone="primary">{body}</Text>
+	{#if author || date}
+		<div class="mt-3 flex items-center justify-between gap-2">
+			{#if author}
+				<AvatarLabel name={author} {avatar} size="xs" />
+			{:else}
+				<span></span>
+			{/if}
+			{#if date}
+				<span class="text-[11px] text-muted"><TimeAgo {date} /></span>
+			{/if}
+		</div>
+	{/if}
+</Card>