@cronos-labs/ui 0.2.0

package/dist/LocaleSelector/index.d.ts

@@ -0,0 +1,9 @@
+interface LocaleSelectorProps {
+    ariaLabel: string;
+    forceDocumentNavigation?: boolean;
+    inlineMenu?: boolean;
+    menuPlacement?: 'down' | 'up';
+    onLocaleSelect?: (() => void) | undefined;
+}
+export declare function LocaleSelector({ ariaLabel, forceDocumentNavigation, inlineMenu, menuPlacement, onLocaleSelect, }: LocaleSelectorProps): React.JSX.Element;
+export {};

package/dist/LocaleSelector/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { localeConfig } from '../locale/config.js';
+import { useCurrentLocale } from '../locale/hooks.js';
+import { setStoredLocalePreference } from '../locale/localePreference.js';
+import { buildLocalizedPath, stripLocalePrefix } from '../locale/routes.js';
+import { LocaleSelectorButton, LocaleSelectorChevron, LocaleSelectorIcon, LocaleSelectorMenu, LocaleSelectorOption, LocaleSelectorOptionList, LocaleSelectorRoot, LocaleSelectorText, } from './styles.js';
+export function LocaleSelector({ ariaLabel, forceDocumentNavigation = false, inlineMenu = false, menuPlacement = 'up', onLocaleSelect, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const selectorRef = useRef(null);
+    const locale = useCurrentLocale();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const menuId = 'footer-locale-menu';
+    const currentLocaleLabel = localeConfig.locales[locale].selectorLabel;
+    const localeOptions = localeConfig.supportedLocales.map((optionLocale) => ({
+        isCurrent: optionLocale === locale,
+        label: localeConfig.locales[optionLocale].selectorLabel,
+        locale: optionLocale,
+    }));
+    useEffect(() => {
+        setIsOpen(false);
+    }, [location.pathname, location.hash]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePointerDown = (event) => {
+            if (event.target instanceof Node && selectorRef.current?.contains(event.target)) {
+                return;
+            }
+            setIsOpen(false);
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    const buildLocaleTarget = (targetLocale) => {
+        const targetPathname = buildLocalizedPath(stripLocalePrefix(location.pathname), targetLocale);
+        return `${targetPathname}${location.search}${location.hash}`;
+    };
+    const handleLocaleSelect = (targetLocale) => {
+        const targetHref = buildLocaleTarget(targetLocale);
+        setStoredLocalePreference(targetLocale);
+        setIsOpen(false);
+        onLocaleSelect?.();
+        if (forceDocumentNavigation) {
+            window.location.assign(targetHref);
+            return;
+        }
+        void navigate(targetHref);
+    };
+    return (_jsxs(LocaleSelectorRoot, { ref: selectorRef, "$inlineMenu": inlineMenu, children: [_jsxs(LocaleSelectorButton, { type: "button", "aria-label": ariaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, onClick: () => setIsOpen((currentValue) => !currentValue), children: [_jsx(LocaleSelectorIcon, { "aria-hidden": "true" }), _jsx(LocaleSelectorText, { children: currentLocaleLabel }), _jsx(LocaleSelectorChevron, { "$open": isOpen, "aria-hidden": "true" })] }), isOpen ? (_jsx(LocaleSelectorMenu, { id: menuId, role: "menu", "aria-label": "Language options", "$inline": inlineMenu, "$placement": menuPlacement, children: _jsx(LocaleSelectorOptionList, { children: localeOptions.map((option) => (_jsx(LocaleSelectorOption, { type: "button", role: "menuitemradio", "aria-checked": option.isCurrent, "$active": option.isCurrent, onClick: () => handleLocaleSelect(option.locale), children: _jsx("span", { children: option.label }) }, option.label))) }) })) : null] }));
+}

package/dist/LocaleSelector/styles.d.ts

@@ -0,0 +1,33 @@
+export declare const LocaleSelectorRoot: 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;
+}, {
+    $inlineMenu: boolean;
+}>> & string;
+export declare const LocaleSelectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const LocaleSelectorIcon: 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 LocaleSelectorText: 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 LocaleSelectorChevron: 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;
+}, {
+    $open: boolean;
+}>> & string;
+export declare const LocaleSelectorMenu: 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;
+}, {
+    $inline: boolean;
+    $placement: "down" | "up";
+}>> & string;
+export declare const LocaleSelectorOptionList: 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 LocaleSelectorOption: 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;
+}, {
+    $active: boolean;
+}>> & string;

package/dist/LocaleSelector/styles.js

@@ -0,0 +1,156 @@
+import styled from 'styled-components';
+export const LocaleSelectorRoot = styled.div `
+  position: relative;
+  display: inline-flex;
+  flex-direction: ${({ $inlineMenu }) => ($inlineMenu ? 'column' : 'row')};
+  gap: ${({ $inlineMenu }) => ($inlineMenu ? '8px' : '0')};
+  width: min(100%, 331px);
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 197px;
+  }
+`;
+export const LocaleSelectorButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+  height: 44px;
+  padding: 9px 8px;
+  border: 1px solid #e5faff;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.colors.brandSky};
+  color: ${({ theme }) => theme.colors.ink};
+  cursor: pointer;
+  transition: opacity ${({ theme }) => theme.motion.duration.fast}
+    ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    opacity: 0.96;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.ink};
+    outline-offset: 3px;
+  }
+`;
+export const LocaleSelectorIcon = styled.span `
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  border: 2px solid currentColor;
+  border-radius: 999px;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &::before {
+    width: 7px;
+    height: 18px;
+    border-right: 2px solid currentColor;
+    border-left: 2px solid currentColor;
+    border-radius: 999px;
+  }
+
+  &::after {
+    width: 18px;
+    height: 2px;
+    background: currentColor;
+    box-shadow:
+      0 -5px 0 currentColor,
+      0 5px 0 currentColor;
+  }
+`;
+export const LocaleSelectorText = styled.span `
+  min-width: 0;
+  flex: 1;
+  color: inherit;
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  letter-spacing: 0;
+  line-height: 18px;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const LocaleSelectorChevron = styled.span `
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: ${({ $open }) => ($open ? '9px' : '7px')};
+    width: 9px;
+    height: 9px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: ${({ $open }) => ($open ? 'rotate(225deg)' : 'rotate(45deg)')};
+    transform-origin: center;
+  }
+`;
+export const LocaleSelectorMenu = styled.div `
+  position: ${({ $inline }) => ($inline ? 'static' : 'absolute')};
+  ${({ $inline, $placement }) => $inline ? '' : $placement === 'down' ? 'top: calc(100% + 8px);' : 'bottom: calc(100% + 8px);'}
+  left: ${({ $inline }) => ($inline ? 'auto' : '0')};
+  z-index: ${({ theme }) => theme.zIndex.overlay};
+  width: ${({ $inline }) => ($inline ? '100%' : 'min(100vw - 32px, 331px)')};
+  padding: 4px;
+  border: 1px solid #f2f2f3;
+  border-radius: 12px;
+  background: ${({ theme }) => theme.colors.light};
+  color: ${({ theme }) => theme.colors.ink};
+  box-shadow:
+    0 15px 20px -5px rgb(38 38 38 / 0.1),
+    0 5px 10px -5px rgb(38 38 38 / 0.05);
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: ${({ $inline }) => ($inline ? '100%' : '232px')};
+  }
+`;
+export const LocaleSelectorOptionList = styled.div `
+  display: grid;
+  gap: 2px;
+`;
+export const LocaleSelectorOption = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  padding: 12px;
+  border: 0;
+  border-radius: 8px;
+  background: ${({ $active, theme }) => ($active ? theme.colors.brandSky : 'transparent')};
+  color: inherit;
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  font-weight: ${({ theme }) => theme.fontWeight.black};
+  line-height: 1.4;
+  text-align: left;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.brandSky};
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -3px;
+  }
+`;

package/dist/SearchField/index.d.ts

@@ -0,0 +1,14 @@
+export interface SearchFieldProps {
+    label: string;
+    placeholder: string;
+    value: string;
+    onChange: (value: string) => void;
+    /** Resolved icon URL — each caller resolves the asset its own bundler's way (e.g. Astro's `.src`, Vite's plain import) and passes the string in. */
+    iconSrc: string;
+    /** Renders a clear button once the field has a value; omit for a field with no clear affordance. */
+    onClear?: () => void;
+    clearLabel?: string;
+    /** Result-count or status text shown beneath the field. */
+    hint?: string | null;
+}
+export declare function SearchField({ label, placeholder, value, onChange, iconSrc, onClear, clearLabel, hint, }: SearchFieldProps): React.JSX.Element;

package/dist/SearchField/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClearButton, Column, Hint, Icon, Input, Root } from './styles.js';
+export function SearchField({ label, placeholder, value, onChange, iconSrc, onClear, clearLabel, hint, }) {
+    const showsClearButton = onClear !== undefined && value.length > 0;
+    return (_jsxs(Column, { children: [_jsxs(Root, { children: [_jsx(Icon, { src: iconSrc, alt: "", "aria-hidden": "true" }), _jsx(Input, { type: "search", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, "aria-label": label, "$hasClearButton": showsClearButton }), showsClearButton && (_jsx(ClearButton, { type: "button", "aria-label": clearLabel, onClick: onClear, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M2.5 2.5 L9.5 9.5 M9.5 2.5 L2.5 9.5" }) }) }))] }), hint !== null && hint !== undefined && _jsx(Hint, { role: "status", children: hint })] }));
+}

package/dist/SearchField/styles.d.ts

@@ -0,0 +1,20 @@
+export declare const Column: 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 Root: 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 Icon: 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 declare const Input: 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;
+}, {
+    $hasClearButton: boolean;
+}>> & string;
+export declare const ClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const Hint: 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;

package/dist/SearchField/styles.js

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import { metaTypography } from '../typography.js';
+export const Column = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.sizes.xxxs};
+  min-width: 0;
+`;
+export const Root = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 360px;
+`;
+export const Icon = styled.img `
+  position: absolute;
+  left: 14px;
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  opacity: 0.5;
+  pointer-events: none;
+`;
+// Right padding matches the left icon gutter only once a clear button needs
+// the room — the common (empty) state stays a 1:1 match with the field's
+// base padding instead of always reserving space nothing sits in.
+export const Input = styled.input `
+  width: 100%;
+  padding: ${({ $hasClearButton }) => $hasClearButton ? '10px 40px 10px 40px' : '10px 14px 10px 40px'};
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  border: 1px solid ${({ theme }) => theme.colors.borderDarkSubtle};
+  background: ${({ theme }) => theme.colors.surfaceDarkElevated};
+  color: ${({ theme }) => theme.colors.light};
+  font-family: inherit;
+  font-size: ${({ theme }) => theme.typography.fontSize.footnote};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.overlayTextMuted};
+  }
+
+  /* The native search affordances are replaced by the designed clear button. */
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px ${({ theme }) => theme.colors.focusRing};
+  }
+`;
+export const ClearButton = styled.button `
+  ${metaTypography}
+  position: absolute;
+  right: ${({ theme }) => theme.sizes.xxs};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ theme }) => theme.sizes.lg};
+  height: ${({ theme }) => theme.sizes.lg};
+  padding: 0;
+  border: none;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: ${({ theme }) => theme.colors.overlaySurfaceStrong};
+  color: ${({ theme }) => theme.colors.overlayTextSoft};
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.overlayBorderSubtle};
+    color: ${({ theme }) => theme.colors.light};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px ${({ theme }) => theme.colors.focusRing};
+  }
+`;
+export const Hint = styled.p `
+  ${metaTypography}
+  margin: 0;
+  padding-left: ${({ theme }) => theme.sizes.xs};
+  color: ${({ theme }) => theme.colors.overlayTextSoft};
+`;

package/dist/SectionAnchorNav/index.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export interface SectionAnchorNavItem {
+    href: `#${string}`;
+    label: ReactNode;
+}
+export declare function SectionAnchorNav({ ariaLabel, initialActiveHref, items, markerSrc, }: {
+    ariaLabel: string;
+    initialActiveHref: `#${string}`;
+    items: readonly SectionAnchorNavItem[];
+    markerSrc?: string;
+}): React.JSX.Element;

package/dist/SectionAnchorNav/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { scrollToSectionHeading } from '../scrollToSectionHeading.js';
+import { List, MarkerImage, MarkerShape, MarkerSlot, Nav, NavLink } from './styles.js';
+function handleNavLinkClick(event, href) {
+    if (!href.startsWith('#'))
+        return;
+    event.preventDefault();
+    scrollToSectionHeading(href.slice(1));
+    window.history.pushState(null, '', href);
+}
+export function SectionAnchorNav({ ariaLabel, initialActiveHref, items, markerSrc, }) {
+    const [activeHref, setActiveHref] = useState(initialActiveHref);
+    useEffect(() => {
+        if (items.length === 0)
+            return undefined;
+        const sectionIds = items.map((item) => item.href.slice(1));
+        const updateActiveSection = () => {
+            const viewportAnchor = window.innerHeight * 0.35;
+            let currentSectionId = sectionIds[0];
+            sectionIds.forEach((sectionId) => {
+                const section = document.getElementById(sectionId);
+                if (section && section.getBoundingClientRect().top <= viewportAnchor) {
+                    currentSectionId = sectionId;
+                }
+            });
+            setActiveHref(`#${currentSectionId}`);
+        };
+        updateActiveSection();
+        window.addEventListener('scroll', updateActiveSection, { passive: true });
+        window.addEventListener('resize', updateActiveSection);
+        return () => {
+            window.removeEventListener('scroll', updateActiveSection);
+            window.removeEventListener('resize', updateActiveSection);
+        };
+    }, [items]);
+    return (_jsx(Nav, { "aria-label": ariaLabel, children: _jsx(List, { children: items.map((item) => {
+                const isActive = activeHref === item.href;
+                return (_jsx("li", { children: _jsxs(NavLink, { href: item.href, "$active": isActive, "aria-current": isActive ? 'location' : undefined, onClick: (event) => handleNavLinkClick(event, item.href), children: [_jsxs(MarkerSlot, { "$active": isActive, children: [markerSrc ? _jsx(MarkerImage, { src: markerSrc, alt: "", "aria-hidden": "true" }) : null, markerSrc ? null : _jsx(MarkerShape, { "aria-hidden": "true" })] }), item.label] }) }, item.href));
+            }) }) }));
+}

package/dist/SectionAnchorNav/styles.d.ts

@@ -0,0 +1,22 @@
+export declare const Nav: 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 List: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const NavLink: 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;
+}, {
+    $active?: boolean;
+}>> & string;
+export declare const MarkerSlot: 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;
+}, {
+    $active?: boolean;
+}>> & string;
+export declare const MarkerImage: 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 declare const MarkerShape: 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;

package/dist/SectionAnchorNav/styles.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+export const Nav = styled.nav `
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: grid;
+    gap: 8px;
+    position: sticky;
+    top: clamp(88px, 18vh, 144px);
+    align-self: start;
+    width: 199px;
+    max-height: calc(100vh - 176px);
+    padding: 22px 25px;
+    border-radius: ${({ theme }) => theme.borderRadius.cardLg};
+    background: ${({ theme }) => theme.colors.overlaySurfaceSubtle};
+    overflow: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`;
+export const List = styled.ul `
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+export const NavLink = styled.a `
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 6px;
+  width: fit-content;
+  margin-inline: -8px;
+  padding: 4px 8px;
+  color: ${({ theme, $active }) => ($active ? theme.colors.brandSky : theme.colors.light)};
+  font-size: 0.875rem;
+  line-height: 1.4286;
+  font-weight: ${({ theme, $active }) => $active ? theme.fontWeight.extrabold : theme.fontWeight.medium};
+  text-decoration: none;
+  transition: color ${({ theme }) => theme.motion.duration.fast}
+    ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.brandSky};
+  }
+`;
+export const MarkerSlot = styled.span `
+  display: block;
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  margin-top: 0.375rem;
+  opacity: ${({ $active }) => ($active ? 1 : 0)};
+  pointer-events: none;
+  transition: opacity ${({ theme }) => theme.motion.duration.fast}
+    ${({ theme }) => theme.motion.easing.standard};
+`;
+export const MarkerImage = styled.img `
+  display: block;
+  width: 9px;
+  height: 9px;
+  filter: brightness(0) saturate(100%) invert(82%) sepia(97%) saturate(1253%) hue-rotate(155deg)
+    brightness(104%) contrast(101%);
+`;
+export const MarkerShape = styled.span `
+  display: block;
+  width: 9px;
+  height: 9px;
+  background: ${({ theme }) => theme.colors.brandSky};
+  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
+`;

package/dist/Seo/index.d.ts

@@ -0,0 +1,18 @@
+import type { SeoMeta } from './types.js';
+export interface RouteSeoMeta {
+    canonicalUrl: string;
+    description: string;
+    htmlLang: string;
+    imageAlt: string;
+    imageUrl: string;
+    ogLocale: string;
+    ogType: 'article' | 'website';
+    robots: string;
+    themeColor: string;
+    title: string;
+}
+interface SeoProps extends SeoMeta {
+    resolveRouteMeta?: ((pathname: string) => RouteSeoMeta | null) | undefined;
+}
+export declare function Seo({ title, description, resolveRouteMeta }: SeoProps): null;
+export {};

package/dist/Seo/index.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+// These create the tag when it is absent rather than skipping it. Updating only
+// pre-existing nodes makes a tag missing from the host document a silent no-op,
+// which is how a consuming app can ship with no og:image at all and no error.
+const upsertMeta = (keyName, keyValue, content) => {
+    const existing = document.querySelector(`meta[${keyName}="${keyValue}"]`);
+    const node = existing ?? document.createElement('meta');
+    if (existing === null) {
+        node.setAttribute(keyName, keyValue);
+        document.head.appendChild(node);
+    }
+    node.setAttribute('content', content);
+};
+const upsertLink = (rel, href) => {
+    const existing = document.querySelector(`link[rel="${rel}"]`);
+    const node = existing ?? document.createElement('link');
+    if (existing === null) {
+        node.setAttribute('rel', rel);
+        document.head.appendChild(node);
+    }
+    node.setAttribute('href', href);
+};
+export function Seo({ title, description, resolveRouteMeta }) {
+    useEffect(() => {
+        const routeSeo = typeof window === 'undefined' || !resolveRouteMeta
+            ? null
+            : resolveRouteMeta(window.location.pathname);
+        const resolvedTitle = routeSeo?.title ?? title;
+        const resolvedDescription = routeSeo?.description ?? description;
+        document.title = resolvedTitle;
+        upsertMeta('name', 'description', resolvedDescription);
+        if (!routeSeo) {
+            return;
+        }
+        document.documentElement.lang = routeSeo.htmlLang;
+        upsertMeta('name', 'robots', routeSeo.robots);
+        upsertMeta('name', 'theme-color', routeSeo.themeColor);
+        upsertMeta('property', 'og:title', routeSeo.title);
+        upsertMeta('property', 'og:description', routeSeo.description);
+        upsertMeta('property', 'og:url', routeSeo.canonicalUrl);
+        upsertMeta('property', 'og:type', routeSeo.ogType);
+        upsertMeta('property', 'og:locale', routeSeo.ogLocale);
+        upsertMeta('property', 'og:image', routeSeo.imageUrl);
+        upsertMeta('property', 'og:image:alt', routeSeo.imageAlt);
+        upsertMeta('name', 'twitter:title', routeSeo.title);
+        upsertMeta('name', 'twitter:description', routeSeo.description);
+        upsertMeta('name', 'twitter:url', routeSeo.canonicalUrl);
+        upsertMeta('name', 'twitter:image', routeSeo.imageUrl);
+        upsertMeta('name', 'twitter:image:alt', routeSeo.imageAlt);
+        upsertLink('canonical', routeSeo.canonicalUrl);
+    }, [description, title, resolveRouteMeta]);
+    return null;
+}

package/dist/Seo/types.d.ts

@@ -0,0 +1,4 @@
+export interface SeoMeta {
+    title: string;
+    description: string;
+}

package/dist/Seo/types.js

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

package/dist/config/eslintConfig.d.ts

@@ -0,0 +1,6 @@
+export interface ReactEslintConfigOptions {
+    ignores?: string[];
+    allowDefaultProject?: string[];
+    tsconfigRootDir: string;
+}
+export declare const createReactEslintConfig: (options: ReactEslintConfigOptions) => import("typescript-eslint").FlatConfig.ConfigArray;