@cronos-labs/ui 0.2.1 → 0.5.0

package/dist/fetch.js

@@ -0,0 +1,44 @@
+export class HttpError extends Error {
+    status;
+    constructor(status, message) {
+        super(message);
+        this.name = 'HttpError';
+        this.status = status;
+    }
+}
+/**
+ * Performs a JSON request with timeout support.
+ * @param input Fetch URL or Request object.
+ * @param init Optional fetch init.
+ * @param timeoutMs Timeout in milliseconds.
+ * @returns Parsed JSON payload.
+ * @throws {DOMException} When request is aborted by timeout.
+ * @throws {HttpError} When response status is not 2xx.
+ */
+export const fetchJson = async (input, init, timeoutMs = 10_000) => {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), timeoutMs);
+    // Sending Content-Type on a bodyless request makes a cross-origin GET
+    // preflighted, so it is only declared when there is a body to describe.
+    const hasBody = init?.body !== undefined && init.body !== null;
+    const headers = hasBody
+        ? {
+            'Content-Type': 'application/json',
+            ...(init?.headers ?? {}),
+        }
+        : init?.headers;
+    try {
+        const response = await fetch(input, {
+            ...init,
+            signal: controller.signal,
+            ...(headers !== undefined ? { headers } : {}),
+        });
+        if (!response.ok) {
+            throw new HttpError(response.status, `Request failed with status ${response.status}`);
+        }
+        return (await response.json());
+    }
+    finally {
+        clearTimeout(timeout);
+    }
+};

package/dist/index.d.ts

@@ -19,3 +19,16 @@ export { SectionAnchorNav, type SectionAnchorNavItem } from './SectionAnchorNav/
 export { scrollToSectionHeading } from './scrollToSectionHeading.js';
 export { PillButton, FilterPillRow } from './FilterPillGroup/index.js';
 export { SearchField, type SearchFieldProps } from './SearchField/index.js';
+export { Toast, type ToastTone, type ToastIcons } from './Toast/index.js';
+export { fetchJson, HttpError } from './fetch.js';
+export { isOneTrustEventTarget, openCookiePreferences } from './onetrust.js';
+export { BrandProvider, useBrand, useOptionalBrand } from './brand/index.js';
+export type { BrandAssets, BrandSocialLink } from './brand/index.js';
+export { FooterWaitlist, type FooterWaitlistProps } from './FooterWaitlist/index.js';
+export { useWaitlistForm } from './waitlist/useWaitlistForm.js';
+export type { UseWaitlistFormOptions, WaitlistStatusTone } from './waitlist/useWaitlistForm.js';
+export type { WaitlistRequest, WaitlistResponse, WaitlistSource, WaitlistFormMessages, } from './waitlist/types.js';
+export { resetAutocompleteFillMarkersAfterInput } from './waitlist/autocompleteFillMarkers.js';
+export { clearWaitlistAttribution, getWaitlistBrowserContext } from './waitlist/attribution.js';
+export { cardSurface, cardHoverSurface, wellSurface } from './surfaces.js';
+export { Button, type ButtonProps, type ButtonVariant } from './Button/index.js';

package/dist/index.js

@@ -16,3 +16,13 @@ export { SectionAnchorNav } from './SectionAnchorNav/index.js';
 export { scrollToSectionHeading } from './scrollToSectionHeading.js';
 export { PillButton, FilterPillRow } from './FilterPillGroup/index.js';
 export { SearchField } from './SearchField/index.js';
+export { Toast } from './Toast/index.js';
+export { fetchJson, HttpError } from './fetch.js';
+export { isOneTrustEventTarget, openCookiePreferences } from './onetrust.js';
+export { BrandProvider, useBrand, useOptionalBrand } from './brand/index.js';
+export { FooterWaitlist } from './FooterWaitlist/index.js';
+export { useWaitlistForm } from './waitlist/useWaitlistForm.js';
+export { resetAutocompleteFillMarkersAfterInput } from './waitlist/autocompleteFillMarkers.js';
+export { clearWaitlistAttribution, getWaitlistBrowserContext } from './waitlist/attribution.js';
+export { cardSurface, cardHoverSurface, wellSurface } from './surfaces.js';
+export { Button } from './Button/index.js';

package/dist/onetrust.d.ts

@@ -0,0 +1,11 @@
+interface OneTrustApi {
+    ToggleInfoDisplay?: () => void;
+}
+declare global {
+    interface Window {
+        OneTrust?: OneTrustApi;
+    }
+}
+export declare const openCookiePreferences: () => void;
+export declare const isOneTrustEventTarget: (target: EventTarget | null) => boolean;
+export {};

package/dist/onetrust.js

@@ -0,0 +1,17 @@
+const oneTrustConsentSelector = [
+    '#onetrust-consent-sdk',
+    '#onetrust-banner-sdk',
+    '#ot-sdk-cookie-policy',
+    '#ot-pc-content',
+    '#ot-pc-lst',
+    '.ot-sdk-container',
+    '.ot-sdk-modal',
+    '.ot-sdk-row',
+].join(',');
+export const openCookiePreferences = () => {
+    window.OneTrust?.ToggleInfoDisplay?.();
+};
+export const isOneTrustEventTarget = (target) => {
+    const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+    return Boolean(element?.closest(oneTrustConsentSelector));
+};

package/dist/surfaces.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The shared card surface for every Cronos property.
+ *
+ * A card separates from the page by a background-lightness step alone — no
+ * border, no drop shadow. Four of the five card definitions that existed
+ * across the apps before this was centralised already looked exactly like
+ * this; the one that added a hairline border was the outlier, and it made
+ * Launch's token cards visibly different from Network's project cards while
+ * a comment in each claimed they matched.
+ *
+ * Compose it rather than restyling it:
+ *
+ * ```ts
+ * const TokenCard = styled(Link)`
+ *   ${cardSurface}
+ *   padding: ${({ theme }) => theme.sizes.lg};
+ * `;
+ * ```
+ */
+export declare const cardSurface: import("styled-components").RuleSet<object>;
+/**
+ * Hover treatment for a card that is itself a link or button.
+ *
+ * Lift plus a background step, matching the surface's no-border rule — callers
+ * add their own `transition` and reduced-motion guard alongside, since the
+ * properties worth animating differ per card.
+ */
+export declare const cardHoverSurface: import("styled-components").RuleSet<object>;
+/**
+ * A recessed well inside a card — inputs, tracks, read-only values.
+ *
+ * Darkens whatever card it sits on rather than introducing another hex, so the
+ * ramp stays page < well < card at every nesting depth.
+ */
+export declare const wellSurface: import("styled-components").RuleSet<object>;

package/dist/surfaces.js

@@ -0,0 +1,45 @@
+import { css } from 'styled-components';
+/**
+ * The shared card surface for every Cronos property.
+ *
+ * A card separates from the page by a background-lightness step alone — no
+ * border, no drop shadow. Four of the five card definitions that existed
+ * across the apps before this was centralised already looked exactly like
+ * this; the one that added a hairline border was the outlier, and it made
+ * Launch's token cards visibly different from Network's project cards while
+ * a comment in each claimed they matched.
+ *
+ * Compose it rather than restyling it:
+ *
+ * ```ts
+ * const TokenCard = styled(Link)`
+ *   ${cardSurface}
+ *   padding: ${({ theme }) => theme.sizes.lg};
+ * `;
+ * ```
+ */
+export const cardSurface = css `
+  border-radius: ${({ theme }) => theme.borderRadius.cardLg};
+  background: ${({ theme }) => theme.colors.surfaceDarkElevated};
+`;
+/**
+ * Hover treatment for a card that is itself a link or button.
+ *
+ * Lift plus a background step, matching the surface's no-border rule — callers
+ * add their own `transition` and reduced-motion guard alongside, since the
+ * properties worth animating differ per card.
+ */
+export const cardHoverSurface = css `
+  transform: translateY(-2px);
+  background: ${({ theme }) => theme.colors.surfaceDarkHover};
+`;
+/**
+ * A recessed well inside a card — inputs, tracks, read-only values.
+ *
+ * Darkens whatever card it sits on rather than introducing another hex, so the
+ * ramp stays page < well < card at every nesting depth.
+ */
+export const wellSurface = css `
+  border-radius: ${({ theme }) => theme.borderRadius.card};
+  background: ${({ theme }) => theme.colors.surfaceDark};
+`;

package/dist/waitlist/attribution.d.ts

@@ -0,0 +1,9 @@
+export interface WaitlistBrowserContext {
+    documentReferrer?: string;
+    landingPageUrl?: string;
+    referrerCode?: string;
+}
+export declare const buildWaitlistReferrerStorageKey: (projectUid: string) => string;
+export declare const syncWaitlistReferrerCode: (projectUid: string) => string | undefined;
+export declare const clearWaitlistAttribution: (projectUid: string) => void;
+export declare const getWaitlistBrowserContext: (projectUid: string) => WaitlistBrowserContext;

package/dist/waitlist/attribution.js

@@ -0,0 +1,79 @@
+const WAITLIST_REFERRER_STORAGE_KEY_PREFIX = 'prefinery';
+const waitlistTrackingQueryKeys = [
+    'r',
+    'utm_source',
+    'utm_medium',
+    'utm_campaign',
+    'utm_term',
+    'utm_content',
+];
+const parseOptionalString = (value) => {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmedValue = value.trim();
+    return trimmedValue || undefined;
+};
+const getDocumentReferrer = () => {
+    return parseOptionalString(document.referrer);
+};
+const getLandingPageUrlFromLocation = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const hasTrackingParams = waitlistTrackingQueryKeys.some((key) => searchParams.has(key));
+    return hasTrackingParams ? window.location.href : undefined;
+};
+const getReferralCodeFromLocation = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    return parseOptionalString(searchParams.get('r'));
+};
+export const buildWaitlistReferrerStorageKey = (projectUid) => {
+    return `${WAITLIST_REFERRER_STORAGE_KEY_PREFIX}.${projectUid}.referrer_code`;
+};
+const buildWaitlistLandingPageStorageKey = (projectUid) => {
+    return `${WAITLIST_REFERRER_STORAGE_KEY_PREFIX}.${projectUid}.landing_page_url`;
+};
+const getStoredWaitlistReferrerCode = (projectUid) => {
+    return parseOptionalString(window.localStorage.getItem(buildWaitlistReferrerStorageKey(projectUid)));
+};
+const getStoredWaitlistLandingPageUrl = (projectUid) => {
+    return parseOptionalString(window.localStorage.getItem(buildWaitlistLandingPageStorageKey(projectUid)));
+};
+export const syncWaitlistReferrerCode = (projectUid) => {
+    const locationReferrerCode = getReferralCodeFromLocation();
+    if (locationReferrerCode) {
+        window.localStorage.setItem(buildWaitlistReferrerStorageKey(projectUid), locationReferrerCode);
+        return locationReferrerCode;
+    }
+    return getStoredWaitlistReferrerCode(projectUid);
+};
+// Preserve the first tracked landing URL so UTM/referral attribution survives navigation before
+// the visitor submits the waitlist form.
+const syncWaitlistLandingPageUrl = (projectUid) => {
+    const locationLandingPageUrl = getLandingPageUrlFromLocation();
+    if (locationLandingPageUrl) {
+        window.localStorage.setItem(buildWaitlistLandingPageStorageKey(projectUid), locationLandingPageUrl);
+        return locationLandingPageUrl;
+    }
+    return getStoredWaitlistLandingPageUrl(projectUid);
+};
+// Clear attribution after a successful signup so a future browser signup does not
+// inherit stale campaign or referral data.
+export const clearWaitlistAttribution = (projectUid) => {
+    const storageKeys = [
+        buildWaitlistLandingPageStorageKey(projectUid),
+        buildWaitlistReferrerStorageKey(projectUid),
+    ];
+    storageKeys.forEach((storageKey) => {
+        window.localStorage.removeItem(storageKey);
+    });
+};
+export const getWaitlistBrowserContext = (projectUid) => {
+    const documentReferrer = getDocumentReferrer();
+    const landingPageUrl = syncWaitlistLandingPageUrl(projectUid);
+    const referrerCode = syncWaitlistReferrerCode(projectUid);
+    return {
+        ...(documentReferrer ? { documentReferrer } : {}),
+        ...(landingPageUrl ? { landingPageUrl } : {}),
+        ...(referrerCode ? { referrerCode } : {}),
+    };
+};

package/dist/waitlist/autocompleteFillMarkers.d.ts

@@ -0,0 +1,3 @@
+export declare const isAutocompleteFillMarkerAttribute: (attributeName: string) => boolean;
+export declare const resetAutocompleteFillMarkers: (input: HTMLInputElement) => void;
+export declare const resetAutocompleteFillMarkersAfterInput: (input: HTMLInputElement) => void;

package/dist/waitlist/autocompleteFillMarkers.js

@@ -0,0 +1,17 @@
+export const isAutocompleteFillMarkerAttribute = (attributeName) => attributeName.startsWith('data-') && attributeName.includes('filled');
+export const resetAutocompleteFillMarkers = (input) => {
+    // Some autocomplete extensions mark filled fields with data attributes and style them with
+    // extension CSS. Remove those markers so the waitlist pill keeps its own background treatment.
+    Array.from(input.attributes).forEach((attribute) => {
+        if (isAutocompleteFillMarkerAttribute(attribute.name)) {
+            input.removeAttribute(attribute.name);
+        }
+    });
+};
+export const resetAutocompleteFillMarkersAfterInput = (input) => {
+    resetAutocompleteFillMarkers(input);
+    // Dropdown tools can add filled-state markers just after dispatching the input event.
+    window.requestAnimationFrame(() => {
+        resetAutocompleteFillMarkers(input);
+    });
+};

package/dist/waitlist/types.d.ts

@@ -0,0 +1,29 @@
+import type { AppLocale } from '../locale/types.js';
+/**
+ * Where a submission came from, e.g. `'home-hero'` or `'launch-footer'`.
+ *
+ * Deliberately a plain string: each site renders a different set of forms, so
+ * the closed union lives in the app that knows its own pages, not here.
+ */
+export type WaitlistSource = string;
+export interface WaitlistRequest {
+    email: string;
+    consentMarketing: boolean;
+    source: WaitlistSource;
+    locale: AppLocale;
+    documentReferrer?: string;
+    landingPageUrl?: string;
+    referrerCode?: string;
+}
+export interface WaitlistResponse {
+    success: boolean;
+    message: string;
+}
+/** Copy the form shows for each outcome. Every string is caller-supplied so it can be localized. */
+export interface WaitlistFormMessages {
+    successMessage: string;
+    emptyEmailMessage: string;
+    invalidEmailMessage: string;
+    errorMessage: string;
+    submittingLabel: string;
+}

package/dist/waitlist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/waitlist/useWaitlistForm.d.ts

@@ -0,0 +1,43 @@
+import type { WaitlistFormMessages, WaitlistRequest, WaitlistSource } from './types.js';
+export type WaitlistStatusTone = 'default' | 'success' | 'error';
+interface UseWaitlistFormResult {
+    email: string;
+    setEmail: (value: string) => void;
+    consentMarketing: boolean;
+    setConsentMarketing: (value: boolean) => void;
+    emailError: string;
+    isSubmitting: boolean;
+    statusMessage: string;
+    statusTone: WaitlistStatusTone;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+}
+export interface UseWaitlistFormOptions {
+    /** Identifies which form on the site was submitted. */
+    source: WaitlistSource;
+    /**
+     * Performs the submission. Resolve for success, throw or reject for failure.
+     *
+     * Injected rather than built in, so each site keeps its own transport — a
+     * Redux thunk, a bare `fetch`, a third-party SDK — without this package
+     * taking a dependency on any of them.
+     */
+    submit: (request: WaitlistRequest) => Promise<unknown>;
+    /**
+     * Namespaces the stored attribution keys. Use one stable value per site so
+     * two Cronos properties on the same origin never read each other's state.
+     */
+    attributionKey: string;
+    messages?: WaitlistFormMessages;
+    initialConsentMarketing?: boolean;
+    /** Called instead of showing inline status text — e.g. to raise a toast. */
+    onSuccess?: (message: string) => void;
+    onError?: (message: string) => void;
+}
+/**
+ * Email capture with validation, attribution and submission status.
+ *
+ * Owns only form state. It never knows how a submission travels, which is what
+ * lets the same form back a Redux-driven app and a plain one.
+ */
+export declare function useWaitlistForm({ source, submit, attributionKey, messages, initialConsentMarketing, onSuccess, onError, }: UseWaitlistFormOptions): UseWaitlistFormResult;
+export {};

package/dist/waitlist/useWaitlistForm.js

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useCurrentLocale } from '../locale/hooks.js';
+import { clearWaitlistAttribution, getWaitlistBrowserContext } from './attribution.js';
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/u;
+const defaultMessages = {
+    submittingLabel: 'Submitting...',
+    successMessage: 'You are on the waitlist.',
+    emptyEmailMessage: 'Please enter your email address.',
+    invalidEmailMessage: 'Please enter a valid email address.',
+    errorMessage: 'Unable to submit right now. Please try again.',
+};
+/**
+ * Email capture with validation, attribution and submission status.
+ *
+ * Owns only form state. It never knows how a submission travels, which is what
+ * lets the same form back a Redux-driven app and a plain one.
+ */
+export function useWaitlistForm({ source, submit, attributionKey, messages = defaultMessages, initialConsentMarketing = false, onSuccess, onError, }) {
+    const locale = useCurrentLocale();
+    const [email, setEmail] = useState('');
+    const [consentMarketing, setConsentMarketing] = useState(initialConsentMarketing);
+    const [validationMessage, setValidationMessage] = useState('');
+    const [validationField, setValidationField] = useState(null);
+    const [submissionMessage, setSubmissionMessage] = useState('');
+    const [submissionTone, setSubmissionTone] = useState('default');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    // Capture referral parameters on first paint: they live in the landing URL,
+    // which a later navigation would have already replaced.
+    useEffect(() => {
+        getWaitlistBrowserContext(attributionKey);
+    }, [attributionKey]);
+    const clearFeedback = useCallback(() => {
+        setValidationMessage('');
+        setValidationField(null);
+        setSubmissionMessage('');
+        setSubmissionTone('default');
+    }, []);
+    const updateEmail = useCallback((value) => {
+        setEmail(value);
+        clearFeedback();
+    }, [clearFeedback]);
+    const updateConsentMarketing = useCallback((value) => {
+        setConsentMarketing(value);
+        clearFeedback();
+    }, [clearFeedback]);
+    const onSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        const normalizedEmail = email.trim();
+        if (!normalizedEmail) {
+            setValidationField('email');
+            setValidationMessage(messages.emptyEmailMessage);
+            return;
+        }
+        if (!EMAIL_PATTERN.test(normalizedEmail)) {
+            setValidationField('email');
+            setValidationMessage(messages.invalidEmailMessage);
+            return;
+        }
+        clearFeedback();
+        setIsSubmitting(true);
+        const payload = {
+            email: normalizedEmail,
+            consentMarketing,
+            source,
+            locale,
+            ...getWaitlistBrowserContext(attributionKey),
+        };
+        try {
+            await submit(payload);
+            clearWaitlistAttribution(attributionKey);
+            if (onSuccess) {
+                onSuccess(messages.successMessage);
+            }
+            else {
+                setSubmissionMessage(messages.successMessage);
+                setSubmissionTone('success');
+            }
+        }
+        catch {
+            if (onError) {
+                onError(messages.errorMessage);
+            }
+            else {
+                setSubmissionMessage(messages.errorMessage);
+                setSubmissionTone('error');
+            }
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [
+        attributionKey,
+        clearFeedback,
+        consentMarketing,
+        email,
+        locale,
+        messages,
+        onError,
+        onSuccess,
+        source,
+        submit,
+    ]);
+    const statusTone = validationMessage ? 'error' : submissionTone;
+    return {
+        email,
+        setEmail: updateEmail,
+        consentMarketing,
+        setConsentMarketing: updateConsentMarketing,
+        emailError: validationField === 'email' ? validationMessage : '',
+        isSubmitting,
+        statusMessage: validationMessage || submissionMessage,
+        statusTone,
+        onSubmit,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronos-labs/ui",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "description": "Shared Header, Footer, Seo, locale and theme primitives for Cronos web properties.",
   "license": "UNLICENSED",
   "type": "module",