@cronos-labs/ui 0.2.0 → 0.5.0

package/README.md

@@ -0,0 +1,241 @@
+# @cronos-labs/ui
+
+Shared Header, Footer, SEO, locale and theme primitives for Cronos web
+properties. Consumed by `cronos-landingpage-webui`, `cronos-bridge-webui`
+and `cronos-launch-webui` so the three surfaces stay visually and
+behaviourally identical without copying code between them.
+
+The package is published publicly on npm; this repository is private.
+
+## Install
+
+```bash
+npm install @cronos-labs/ui
+```
+
+### Peer dependencies
+
+Required — the package will not work without them:
+
+| Package             | Range     |
+| ------------------- | --------- |
+| `react`             | `^19.1.0` |
+| `react-dom`         | `^19.1.0` |
+| `styled-components` | `^6.1.15` |
+| `react-router-dom`  | `^7.1.5`  |
+
+Optional — only needed if you consume the shared ESLint config
+(`@cronos-labs/ui/eslint-config`):
+
+`@eslint/js`, `eslint`, `eslint-config-prettier`, `eslint-plugin-react-hooks`,
+`eslint-plugin-react-refresh`, `globals`, `typescript-eslint`.
+
+## Entry points
+
+The package ships compiled ESM plus type declarations. Four subpath
+patterns are exported:
+
+| Import                            | Contents                                                       |
+| --------------------------------- | -------------------------------------------------------------- |
+| `@cronos-labs/ui`                 | The barrel — every component, token and helper below           |
+| `@cronos-labs/ui/<path>`          | Any single module, e.g. `locale/config`, `locale/localization` |
+| `@cronos-labs/ui/eslint-config`   | `createReactEslintConfig`                                      |
+| `@cronos-labs/ui/prettier-config` | The shared Prettier config, as a default export                |
+
+### When to use a deep import instead of the barrel
+
+**This is the most common way to break a build.** The barrel re-exports
+components that depend on `react-router-dom` and `styled-components`. Any
+context that evaluates modules with Node's own ESM loader rather than a
+bundler — an Astro config file, a content-collection schema, a sitemap
+script — cannot load it, and fails at import time with
+`styled.div is not a function`.
+
+Reach for the single module you actually need in those places:
+
+```js
+// astro.config.mjs — evaluated by Node, not the bundler
+import { localeConfig } from '@cronos-labs/ui/locale/config';
+```
+
+```ts
+// src/content/config.ts — content collection schema
+import { Locale } from '@cronos-labs/ui/locale/localization';
+```
+
+Application code that goes through the bundler uses the barrel normally:
+
+```tsx
+import { Header, Footer, tokens, useCurrentLocale } from '@cronos-labs/ui';
+```
+
+### Bundler configuration
+
+Vite treats the package as external during SSR by default and loads it
+with Node's native ESM loader, which does not apply the `__esModule`
+CJS-interop convention `styled-components` relies on. Force it through
+the same transform pipeline as `styled-components` itself:
+
+```js
+// astro.config.mjs / vite.config.ts
+ssr: {
+  noExternal: ['styled-components', '@cronos-labs/ui'],
+}
+```
+
+For Vitest, inline the package so component tests resolve it the same way:
+
+```ts
+test: {
+  server: { deps: { inline: ['@cronos-labs/ui'] } },
+}
+```
+
+## What's in the package
+
+### Components
+
+| Export                        | Purpose                                                                                                                          |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `Header`                      | Site header: brand wordmark, nav with dropdowns, mobile drawer, locale selector, waitlist CTA                                    |
+| `Footer`                      | Site footer: link columns, legal links, cookie-preferences hook, disclaimer copy                                                 |
+| `Seo`                         | Renders nothing; imperatively upserts `<title>`, meta and canonical tags. Creates tags that are absent rather than skipping them |
+| `LocaleSelector`              | Locale dropdown, shared by `Header` and `Footer`                                                                                 |
+| `SectionAnchorNav`            | In-page anchor nav that tracks the active section                                                                                |
+| `SearchField`                 | Labelled search input with optional clear button and status text                                                                 |
+| `PillButton`, `FilterPillRow` | Filter pill primitives                                                                                                           |
+
+Header and Footer are driven entirely by props — no data fetching, no
+router coupling beyond `react-router-dom`. Their content strings arrive
+through `HeaderContent` / `FooterContent` so each app supplies its own
+localized copy.
+
+Exported types: `HeaderPresentationVariant`, `HeaderPresentationState`,
+`HeaderNavItem`, `HeaderNavChild`, `HeaderContent`, `HeaderWaitlistCta`,
+`FooterLinkItem`, `FooterLinkGroup`, `FooterLegalLinkItem`,
+`FooterContent`, `SeoMeta`, `RouteSeoMeta`, `SearchFieldProps`,
+`SectionAnchorNavItem`.
+
+### Design tokens
+
+`tokens` groups every shared value: `colors`, `sizes`, `mediaQueries`,
+`borderRadius`, `fontWeight`, `typography`, `shadow`, `effects`, `motion`,
+`layout`, `zIndex`. `desktopViewportQuery` is the `min-width: 1024px`
+media query the components use to switch to their desktop layout.
+
+```ts
+import { tokens, desktopViewportQuery } from '@cronos-labs/ui';
+```
+
+### Typography
+
+Ready-made `styled-components` `css` blocks, so type scale stays
+consistent across apps: `displayHeroTitleTypography`,
+`pageHeroTitleTypography`, `articleHeroTitleTypography`,
+`sectionTitleTypography`, `articleSectionTitleTypography`,
+`cardTitleTypography`, `leadBodyTypography`, `articleBodyTypography`,
+`compactBodyTypography`, `eyebrowTypography`, `metaTypography`.
+
+### Locale
+
+Nine locales are supported: `en`, `en-in`, `en-ng`, `en-ph`, `id-id`,
+`ko-kr`, `pt-br`, `es-mx`, `vi-vn`. The prefix strategy is `as-needed` —
+the default locale has no path prefix, the rest do.
+
+| Export                                                                                                              | Purpose                                                                              |
+| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `Locale`                                                                                                            | Enum of supported locale codes                                                       |
+| `localeConfig`                                                                                                      | Full config: default, fallback, supported list, per-locale labels and text direction |
+| `isSupportedLocale`                                                                                                 | Type guard for an unknown string                                                     |
+| `resolveLocale`                                                                                                     | Resolves a value to a locale, falling back when unrecognised                         |
+| `stripLocalePrefix`                                                                                                 | Removes the locale segment from a pathname                                           |
+| `buildLocalizedPath`                                                                                                | Prefixes a path for a locale, honouring `as-needed`                                  |
+| `useCurrentLocale`                                                                                                  | Reads the active locale from the router                                              |
+| `useApplyLocaleDocumentAttributes`                                                                                  | Keeps `<html lang>` and `dir` in sync                                                |
+| `setStoredLocalePreference`, `getStoredLocalePreference`, `hasStoredLocalePreference`, `localePreferenceStorageKey` | Persisted locale preference (`cronos.locale`)                                        |
+
+Types: `AppLocale`, `LocaleConfig`, `LocaleDefinition`,
+`LocalePrefixStrategy`, `TextDirection`, `LocalizedContentDictionary`,
+`LocalizedPageMetadata`.
+
+### Utilities
+
+| Export                       | Purpose                                                                                                              |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `navigationContent`          | Shared nav structure, with the `NavigationContent` type                                                              |
+| `normalizePathname`          | Trailing-slash-insensitive pathname comparison used for nav active state                                             |
+| `interpolateMessageTemplate` | Fills `{placeholder}` tokens in localized strings                                                                    |
+| `scrollToSectionHeading`     | Smooth-scrolls to a section's first `h1`/`h2` (or `[data-section-scroll-target]`), offset 128px for the fixed header |
+
+### Shared lint and format config
+
+```js
+// eslint.config.mjs
+import { createReactEslintConfig } from '@cronos-labs/ui/eslint-config';
+
+export default createReactEslintConfig({
+  tsconfigRootDir: import.meta.dirname,
+});
+```
+
+`createReactEslintConfig` takes `tsconfigRootDir` (required) and optional
+`ignores` and `allowDefaultProject`. It composes the recommended,
+type-checked and stylistic `typescript-eslint` sets with the React Hooks
+and React Refresh plugins, and disables rules Prettier owns.
+
+```json
+// package.json
+"prettier": "@cronos-labs/ui/prettier-config"
+```
+
+## Local development
+
+```bash
+npm ci
+npm run lint
+npm run typecheck
+npm run test
+npm run build
+npm run format:check
+```
+
+`build` compiles `src/` to `dist/` with `tsc`, then rewrites every relative
+specifier in `dist/**/*.js` and `dist/**/*.d.ts` to point at the concrete
+emitted file. `tsc` emits extensionless specifiers under
+`moduleResolution: "bundler"`, which plain Node ESM cannot resolve at
+runtime. `dist/` is generated and not committed.
+
+The repo formats itself with the same Prettier config it exports. A unit
+test asserts `.prettierrc` and `src/config/prettierConfig.ts` stay in
+sync, so the two copies cannot drift.
+
+### Structure rule
+
+Styled React units use `ComponentName/index.tsx` for the component and
+`ComponentName/styles.ts` for its styled definitions.
+
+## Releasing
+
+Releases are cut by tag. Publishing happens in CI so the tarball is always
+built on the same Node 22 runner consumers' pipelines use, rather than
+whatever happens to be on a laptop.
+
+1. Land your change on `main` through a PR.
+2. Bump `version` in `package.json` (semver).
+3. Tag the merge commit and push:
+
+   ```bash
+   git tag ui-v<version>
+   git push origin ui-v<version>
+   ```
+
+The release workflow refuses to publish if the tag and `package.json`
+disagree on the version. `prepack` rebuilds `dist/` as part of packing, so
+a stale build can never ship.
+
+Consumers then bump their range and run `npm install`.
+
+## License
+
+UNLICENSED. Published publicly on npm for installation convenience; not
+open source.

package/dist/Button/index.d.ts

@@ -0,0 +1,32 @@
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+export type ButtonVariant = 'light' | 'dark';
+export interface ButtonProps {
+    label: string;
+    variant?: ButtonVariant;
+    /** Decorative mark shown before the label. Pair with `iconSrc`. */
+    icon?: 'google-play' | 'app-store';
+    /** Resolved icon URL, so each site can ship its own artwork. */
+    iconSrc?: string;
+    /** Smaller line above the label, e.g. "Download on the". */
+    subLabel?: ReactNode;
+    href?: string;
+    rel?: string;
+    target?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Render as a different element or component.
+     *
+     * The reason this exists: an in-app destination needs a router link, not an
+     * `<a>`, or the navigation becomes a full page reload. Without it, callers
+     * re-implemented this button's surface by hand to get a `Link`.
+     *
+     * ```tsx
+     * <Button as={Link} to="/create" label="Create token" />
+     * ```
+     */
+    as?: ElementType;
+    /** Destination when rendering as a router link. Forwarded verbatim. */
+    to?: string;
+    'aria-label'?: string;
+}
+export declare function Button({ icon, iconSrc, href, label, rel, subLabel, target, variant, as, to, onClick, 'aria-label': ariaLabel, }: ButtonProps): React.JSX.Element;

package/dist/Button/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconWrap, Label, StoreSubLabel, Surface } from './styles.js';
+export function Button({ icon, iconSrc, href, label, rel, subLabel, target, variant = 'light', as, to, onClick, 'aria-label': ariaLabel, }) {
+    return (_jsxs(Surface, { "$variant": variant, ...(as ? { as } : {}), ...(to !== undefined ? { to } : {}), href: href, rel: rel, target: target, onClick: onClick, "aria-label": ariaLabel, children: [icon && iconSrc ? (_jsx(IconWrap, { "$variant": variant, children: _jsx("img", { src: iconSrc, alt: "", "aria-hidden": "true" }) })) : null, _jsxs(Label, { children: [subLabel ? _jsx(StoreSubLabel, { "$variant": variant, children: subLabel }) : null, _jsx("strong", { children: label })] })] }));
+}

package/dist/Button/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const Surface: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $variant: "light" | "dark";
+}>> & string;
+export declare const IconWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $variant: "light" | "dark";
+}>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StoreSubLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $variant: "light" | "dark";
+}>> & string;

package/dist/Button/styles.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+export const Surface = styled.a `
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${({ $variant }) => ($variant === 'dark' ? '10px' : '8px')};
+  min-height: 56px;
+  min-width: 0;
+  padding: 16px 20px;
+  border: 1px solid
+    ${({ $variant, theme }) => $variant === 'dark' ? theme.colors.overlayBorderStrong : 'rgb(255 255 255 / 0.4)'};
+  border-radius: ${({ theme }) => theme.borderRadius.panel};
+  background: ${({ $variant, theme }) => ($variant === 'dark' ? '#111111' : theme.colors.light)};
+  color: ${({ $variant, theme }) => ($variant === 'dark' ? theme.colors.light : theme.colors.ink)};
+  box-shadow: ${({ theme }) => theme.shadow.button};
+  transition:
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    box-shadow ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    background-color ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    transform: translateY(-2px);
+    background: ${({ $variant, theme }) => $variant === 'dark' ? theme.colors.dark : 'rgb(255 255 255 / 0.92)'};
+    box-shadow: ${({ theme }) => theme.shadow.md};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 3px ${({ theme }) => theme.colors.focusRing},
+      ${({ theme }) => theme.shadow.button};
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    min-height: 60px;
+    min-width: 153px;
+    padding: 18px 24px;
+  }
+`;
+export const IconWrap = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 24px;
+  font-size: 1.2rem;
+  line-height: 1;
+
+  img {
+    display: block;
+    width: auto;
+    height: 100%;
+  }
+`;
+export const Label = styled.span `
+  display: grid;
+  justify-items: start;
+  text-align: left;
+  gap: 6px;
+  line-height: 1;
+  min-width: 0;
+  font-family: ${({ theme }) => theme.typography.fontFamily.ui};
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    min-width: max-content;
+  }
+
+  strong {
+    font-size: 0.875rem;
+    font-weight: ${({ theme }) => theme.fontWeight.semibold};
+    letter-spacing: -0.03em;
+  }
+`;
+export const StoreSubLabel = styled.span `
+  color: ${({ $variant, theme }) => $variant === 'dark' ? theme.colors.overlayTextMuted : 'rgb(0 0 0 / 0.4)'};
+  font-size: 0.625rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.03em;
+  text-transform: uppercase;
+`;

package/dist/Footer/index.d.ts

@@ -22,7 +22,8 @@ export interface FooterContent {
     disclaimer: string[];
 }
 interface FooterProps {
-    brandWordmarkSrc: string;
+    /** Overrides the wordmark from `<BrandProvider>`. Optional when one is present. */
+    brandWordmarkSrc?: string;
     columns: FooterLinkGroup[];
     content: FooterContent;
     forceDocumentNavigation?: boolean;

package/dist/Footer/index.js

@@ -4,6 +4,7 @@ import { LocaleSelector } from '../LocaleSelector/index.js';
 import { buildLocalizedPath } from '../locale/routes.js';
 import { useCurrentLocale } from '../locale/hooks.js';
 import { desktopViewportQuery } from '../tokens.js';
+import { useOptionalBrand } from '../brand/index.js';
 import { FooterColumn, FooterColumnHeading, FooterContainer, FooterCopyright, FooterColumnsGrid, FooterDesktopLocaleSlot, FooterDisclaimer, FooterDisclaimerStack, FooterGrid, FooterLegalButton, FooterLegalDivider, FooterLegalLink as FooterLegalLinkStyled, FooterLegalMeta, FooterLegalNav, FooterLegalText, FooterLocaleSlot, FooterLink as FooterLinkStyled, FooterLinkList, FooterMobileCopyright, FooterMobileDivider, FooterMobileLegalDividerTrack, FooterMobileLegalMeta, FooterMobileLegalNav, FooterShell, FooterWaitlistSlot, FooterWordmark, FooterWordmarkImage, } from './styles.js';
 const buildFooterHref = (target, locale, localize = true) => {
     if (target.startsWith('/') && localize) {
@@ -18,6 +19,11 @@ const getExternalLinkProps = (external) => {
     return { target: '_blank', rel: 'noreferrer' };
 };
 export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNavigation = false, legalLinks, onOpenCookiePreferences, waitlistSlot, }) {
+    const brand = useOptionalBrand();
+    const wordmarkSrc = brandWordmarkSrc ?? brand?.wordmarkSrc;
+    if (wordmarkSrc === undefined) {
+        throw new Error('<Footer> needs a brandWordmarkSrc prop or a <BrandProvider>.');
+    }
     const locale = useCurrentLocale();
     const [isDesktopFooterLayout, setIsDesktopFooterLayout] = useState(true);
     useEffect(() => {
@@ -44,5 +50,5 @@ export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNaviga
         return (_jsx(FooterLegalLinkStyled, { href: buildFooterHref(link.target, locale), ...getExternalLinkProps(link.external), children: link.label }));
     };
     const legalMeta = isDesktopFooterLayout ? (_jsxs(FooterLegalMeta, { children: [_jsx(FooterCopyright, { children: content.copyrightText }), _jsx(FooterLegalNav, { "aria-label": content.legalNavLabel, children: legalLinks.map((link, index) => (_jsxs("span", { children: [index > 0 ? _jsx(FooterLegalDivider, { "aria-hidden": "true" }) : null, renderLegalLink(link)] }, link.target))) })] })) : undefined;
-    return (_jsx(FooterShell, { children: _jsxs(FooterContainer, { children: [_jsxs(FooterGrid, { children: [_jsx(FooterWaitlistSlot, { children: waitlistSlot?.(legalMeta) }), _jsx(FooterMobileDivider, { "aria-hidden": "true" }), _jsxs(FooterColumnsGrid, { children: [columns.map((group) => (_jsxs(FooterColumn, { children: [_jsx(FooterColumnHeading, { children: group.group }), _jsx(FooterLinkList, { children: group.links.map((link) => renderFooterLink(link)) })] }, group.group))), _jsxs(FooterDisclaimerStack, { children: [isDesktopFooterLayout ? (_jsx(FooterDesktopLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) })) : null, _jsx(FooterDisclaimer, { children: content.disclaimer.map((paragraph) => (_jsx("p", { children: paragraph }, paragraph))) })] })] }), !isDesktopFooterLayout ? (_jsxs(FooterMobileLegalMeta, { children: [_jsx(FooterLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) }), _jsx(FooterMobileCopyright, { children: content.copyrightText }), _jsx(FooterMobileLegalNav, { "aria-label": content.legalNavLabel, children: legalLinks.map((link, index) => (_jsxs(Fragment, { children: [index > 0 ? (_jsx(FooterMobileLegalDividerTrack, { children: _jsx(FooterLegalDivider, { "aria-hidden": "true" }) })) : null, renderLegalLink(link)] }, link.target))) })] })) : null] }), _jsx(FooterWordmark, { "aria-hidden": "true", children: _jsx(FooterWordmarkImage, { src: brandWordmarkSrc, alt: "" }) })] }) }));
+    return (_jsx(FooterShell, { children: _jsxs(FooterContainer, { children: [_jsxs(FooterGrid, { children: [_jsx(FooterWaitlistSlot, { children: waitlistSlot?.(legalMeta) }), _jsx(FooterMobileDivider, { "aria-hidden": "true" }), _jsxs(FooterColumnsGrid, { children: [columns.map((group) => (_jsxs(FooterColumn, { children: [_jsx(FooterColumnHeading, { children: group.group }), _jsx(FooterLinkList, { children: group.links.map((link) => renderFooterLink(link)) })] }, group.group))), _jsxs(FooterDisclaimerStack, { children: [isDesktopFooterLayout ? (_jsx(FooterDesktopLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) })) : null, _jsx(FooterDisclaimer, { children: content.disclaimer.map((paragraph) => (_jsx("p", { children: paragraph }, paragraph))) })] })] }), !isDesktopFooterLayout ? (_jsxs(FooterMobileLegalMeta, { children: [_jsx(FooterLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) }), _jsx(FooterMobileCopyright, { children: content.copyrightText }), _jsx(FooterMobileLegalNav, { "aria-label": content.legalNavLabel, children: legalLinks.map((link, index) => (_jsxs(Fragment, { children: [index > 0 ? (_jsx(FooterMobileLegalDividerTrack, { children: _jsx(FooterLegalDivider, { "aria-hidden": "true" }) })) : null, renderLegalLink(link)] }, link.target))) })] })) : null] }), _jsx(FooterWordmark, { "aria-hidden": "true", children: _jsx(FooterWordmarkImage, { src: wordmarkSrc, alt: "" }) })] }) }));
 }

package/dist/FooterWaitlist/helper.d.ts

@@ -0,0 +1,3 @@
+import type { NavigationContent } from '../navigationContent.js';
+import type { WaitlistFormMessages } from '../waitlist/types.js';
+export declare const resolveWaitlistFormContent: (navContent: NavigationContent) => WaitlistFormMessages;

package/dist/FooterWaitlist/helper.js

@@ -0,0 +1,7 @@
+export const resolveWaitlistFormContent = (navContent) => ({
+    successMessage: navContent.footer.waitlistForm.successMessage,
+    emptyEmailMessage: navContent.footer.waitlistForm.emptyEmailMessage,
+    invalidEmailMessage: navContent.footer.waitlistForm.invalidEmailMessage,
+    errorMessage: navContent.footer.waitlistForm.errorMessage,
+    submittingLabel: navContent.footer.waitlistForm.submittingLabel,
+});

package/dist/FooterWaitlist/index.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import type { WaitlistRequest, WaitlistSource } from '../waitlist/types.js';
+import { type FooterWaitlistVariant } from './styles.js';
+export interface FooterWaitlistProps {
+    /** Identifies which form on the site was submitted. */
+    source: WaitlistSource;
+    /** Performs the submission. Resolve for success, throw for failure. */
+    submit: (request: WaitlistRequest) => Promise<unknown>;
+    /** Namespaces stored attribution. One stable value per site. */
+    attributionKey: string;
+    variant?: FooterWaitlistVariant;
+    legalMeta?: ReactNode | undefined;
+    onWaitlistSuccess?: ((message: string) => void) | undefined;
+    onWaitlistError?: ((message: string) => void) | undefined;
+    /** Fires when submit is pressed, before validation. For analytics. */
+    onSubmitClick?: (() => void) | undefined;
+}
+/**
+ * Email capture card with the site's social row beneath it.
+ *
+ * Wordmark and social links come from `<BrandProvider>`, so two sites render
+ * this identically while showing entirely different artwork and destinations.
+ */
+export declare function FooterWaitlist({ source, submit, attributionKey, variant, legalMeta, onWaitlistSuccess, onWaitlistError, onSubmitClick, }: FooterWaitlistProps): React.JSX.Element;

package/dist/FooterWaitlist/index.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useBrand } from '../brand/index.js';
+import { navigationContent } from '../navigationContent.js';
+import { useCurrentLocale } from '../locale/hooks.js';
+import { resetAutocompleteFillMarkersAfterInput } from '../waitlist/autocompleteFillMarkers.js';
+import { useWaitlistForm } from '../waitlist/useWaitlistForm.js';
+import { resolveWaitlistFormContent } from './helper.js';
+import { WaitlistCard, WaitlistCardContent, WaitlistCardTitle, WaitlistCheckbox, WaitlistCheckboxLabel, WaitlistCheckboxRow, WaitlistContainer, WaitlistDisclaimer, WaitlistFieldGroup, WaitlistForm, WaitlistInput, WaitlistInputMeasure, WaitlistLowerContent, WaitlistSectionShell, WaitlistSocialBlock, WaitlistSocialIcon, WaitlistSocialLink, WaitlistSocialLinks, WaitlistStatusText, WaitlistSubmitButton, } from './styles.js';
+// Below this the address is unreadable; the field scrolls instead of shrinking further.
+const minWaitlistInputScale = 0.5;
+/**
+ * Email capture card with the site's social row beneath it.
+ *
+ * Wordmark and social links come from `<BrandProvider>`, so two sites render
+ * this identically while showing entirely different artwork and destinations.
+ */
+export function FooterWaitlist({ source, submit, attributionKey, variant = 'footer', legalMeta, onWaitlistSuccess, onWaitlistError, onSubmitClick, }) {
+    const locale = useCurrentLocale();
+    const brand = useBrand();
+    const navContent = navigationContent[locale];
+    const waitlistContent = resolveWaitlistFormContent(navContent);
+    const inputRef = useRef(null);
+    const inputMeasureRef = useRef(null);
+    const [waitlistInputScale, setWaitlistInputScale] = useState(1);
+    const waitlistMessages = {
+        ...waitlistContent,
+        emailPlaceholder: navContent.footer.emailPlaceholder,
+        submitLabel: navContent.footer.submitLabel,
+    };
+    const waitlistOptions = {
+        source,
+        submit,
+        attributionKey,
+        messages: waitlistMessages,
+        initialConsentMarketing: false,
+    };
+    if (onWaitlistSuccess) {
+        waitlistOptions.onSuccess = onWaitlistSuccess;
+    }
+    if (onWaitlistError) {
+        waitlistOptions.onError = onWaitlistError;
+    }
+    const { email, setEmail, consentMarketing, setConsentMarketing, emailError, isSubmitting, statusMessage, statusTone, onSubmit, } = useWaitlistForm(waitlistOptions);
+    const describedBy = statusMessage ? `${variant}-waitlist-status` : undefined;
+    const setWaitlistInputRef = useCallback((input) => {
+        inputRef.current = input;
+        if (input) {
+            resetAutocompleteFillMarkersAfterInput(input);
+        }
+    }, []);
+    const updateWaitlistInputScale = useCallback(() => {
+        const input = inputRef.current;
+        const inputMeasure = inputMeasureRef.current;
+        if (!email || !input || !inputMeasure) {
+            setWaitlistInputScale(1);
+            return;
+        }
+        const inputStyles = window.getComputedStyle(input);
+        const inputHorizontalPadding = Number.parseFloat(inputStyles.paddingLeft) + Number.parseFloat(inputStyles.paddingRight);
+        const availableInputWidth = input.clientWidth - inputHorizontalPadding;
+        const measuredTextWidth = inputMeasure.getBoundingClientRect().width;
+        if (availableInputWidth <= 0 || measuredTextWidth <= 0) {
+            setWaitlistInputScale(1);
+            return;
+        }
+        const nextScale = Math.min(1, Math.max(minWaitlistInputScale, availableInputWidth / measuredTextWidth));
+        setWaitlistInputScale((currentScale) => Math.abs(currentScale - nextScale) < 0.01 ? currentScale : nextScale);
+    }, [email]);
+    const handleWaitlistEmailChange = useCallback((event) => {
+        setEmail(event.currentTarget.value);
+        resetAutocompleteFillMarkersAfterInput(event.currentTarget);
+    }, [setEmail]);
+    useLayoutEffect(() => {
+        updateWaitlistInputScale();
+    }, [updateWaitlistInputScale]);
+    useEffect(() => {
+        window.addEventListener('resize', updateWaitlistInputScale);
+        return () => {
+            window.removeEventListener('resize', updateWaitlistInputScale);
+        };
+    }, [updateWaitlistInputScale]);
+    return (_jsx(WaitlistSectionShell, { "$variant": variant, children: _jsx(WaitlistContainer, { "$variant": variant, children: _jsx(WaitlistCard, { children: _jsxs(WaitlistCardContent, { "$variant": variant, children: [_jsx(WaitlistCardTitle, { "$variant": variant, children: navContent.footer.ctaTitle }), _jsxs(WaitlistForm, { "$variant": variant, noValidate: true, onSubmit: (event) => {
+                                void onSubmit(event);
+                            }, children: [_jsxs(WaitlistFieldGroup, { "$variant": variant, children: [_jsx(WaitlistInputMeasure, { ref: inputMeasureRef, "$variant": variant, "aria-hidden": "true", children: email }), _jsx(WaitlistInput, { ref: setWaitlistInputRef, "$variant": variant, "$fontScale": waitlistInputScale, "aria-describedby": describedBy, "aria-invalid": emailError ? true : undefined, "aria-label": waitlistMessages.emailPlaceholder, autoComplete: "email", placeholder: waitlistMessages.emailPlaceholder, type: "email", value: email, onChange: handleWaitlistEmailChange, onFocus: (event) => resetAutocompleteFillMarkersAfterInput(event.currentTarget) }), _jsx(WaitlistSubmitButton, { "$variant": variant, type: "submit", disabled: isSubmitting, onClick: onSubmitClick, children: isSubmitting ? waitlistMessages.submittingLabel : waitlistMessages.submitLabel })] }), statusMessage ? (_jsx(WaitlistStatusText, { "$tone": statusTone, id: `${variant}-waitlist-status`, "aria-live": "polite", role: "status", children: statusMessage })) : null, _jsx(WaitlistDisclaimer, { children: navContent.footer.consentNote })] }), _jsxs(WaitlistLowerContent, { "$variant": variant, children: [_jsxs(WaitlistCheckboxRow, { htmlFor: `${variant}-waitlist-marketing`, children: [_jsx(WaitlistCheckbox, { id: `${variant}-waitlist-marketing`, checked: consentMarketing, type: "checkbox", onChange: (event) => setConsentMarketing(event.target.checked) }), _jsx(WaitlistCheckboxLabel, { children: navContent.footer.consentLabel })] }), brand.socialLinks.length > 0 ? (_jsx(WaitlistSocialBlock, { "$variant": variant, "aria-label": navContent.footer.socialHeading, children: _jsx(WaitlistSocialLinks, { children: brand.socialLinks.map((socialLink) => (_jsx(WaitlistSocialLink, { href: socialLink.href, target: "_blank", rel: "noreferrer", "aria-label": socialLink.label, children: _jsx(WaitlistSocialIcon, { src: socialLink.iconSrc, alt: "", "aria-hidden": "true" }) }, socialLink.key))) }) })) : null, legalMeta] })] }) }) }) }));
+}

package/dist/FooterWaitlist/styles.d.ts

@@ -0,0 +1,71 @@
+export type FooterWaitlistVariant = 'standalone' | 'footer';
+type StatusTone = 'default' | 'success' | 'error';
+interface VariantProps {
+    $variant: FooterWaitlistVariant;
+}
+interface WaitlistInputProps extends VariantProps {
+    $fontScale: number;
+}
+export declare const WaitlistSectionShell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistCard: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistLowerContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistFieldGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistInputMeasure: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, WaitlistInputProps>> & string;
+export declare const WaitlistSubmitButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistDisclaimer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCheckboxRow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistStatusText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $tone: StatusTone;
+}>> & string;
+export declare const WaitlistSocialBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistSocialLinks: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistSocialLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistSocialIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export {};