@beautinique/frontend-components 1.0.7 → 1.0.9

package/dist/resend/index.js

@@ -0,0 +1,113 @@
+import { useState, useRef, useEffect } from 'react';
+import { GradientText } from '@beautinique/frontend-components/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/countdown.ts
+var toSeconds = /* @__PURE__ */ __name((seconds) => Number.isFinite(seconds) ? Math.max(Math.ceil(seconds), 0) : 0, "toSeconds");
+var getSecondsLeft = /* @__PURE__ */ __name((endsAt, now) => Math.max(Math.ceil((endsAt - now) / 1e3), 0), "getSecondsLeft");
+var isPromiseLike = /* @__PURE__ */ __name((value) => typeof value === "object" && value !== null && "then" in value && typeof value.then === "function", "isPromiseLike");
+var defaultFormatSeconds = /* @__PURE__ */ __name((seconds) => `${String(seconds)}s`, "defaultFormatSeconds");
+var BUTTON_CSS = "cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-wait disabled:opacity-60";
+var Resend = /* @__PURE__ */ __name(({
+  label,
+  count,
+  onResend,
+  resendLabel = "Resend",
+  countdownLabel = "Resend in",
+  sendingLabel = "Sending\u2026",
+  readyLabel = "You can resend now",
+  formatSeconds = defaultFormatSeconds,
+  className = "",
+  ...pProps
+}) => {
+  const [wait, setWait] = useState(() => ({ seconds: toSeconds(count) }));
+  const [secondsLeft, setSecondsLeft] = useState(wait.seconds);
+  const [isReady, setIsReady] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const isSendingRef = useRef(false);
+  const countRef = useRef(count);
+  useEffect(() => {
+    countRef.current = count;
+  }, [count]);
+  useEffect(() => {
+    if (wait.seconds <= 0) return;
+    const endsAt = Date.now() + wait.seconds * 1e3;
+    let shown = wait.seconds;
+    const update = /* @__PURE__ */ __name(() => {
+      const left = getSecondsLeft(endsAt, Date.now());
+      if (left !== shown) {
+        shown = left;
+        setSecondsLeft(left);
+      }
+      if (left > 0) return;
+      window.clearInterval(timer);
+      setIsReady(true);
+    }, "update");
+    const timer = window.setInterval(update, 250);
+    document.addEventListener("visibilitychange", update);
+    return () => {
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", update);
+    };
+  }, [wait]);
+  const startWait = /* @__PURE__ */ __name(() => {
+    const seconds = toSeconds(countRef.current);
+    setIsReady(false);
+    setSecondsLeft(seconds);
+    setWait({ seconds });
+  }, "startWait");
+  const resend = /* @__PURE__ */ __name(async () => {
+    if (isSendingRef.current) return;
+    const result = onResend();
+    if (!isPromiseLike(result)) {
+      startWait();
+      return;
+    }
+    isSendingRef.current = true;
+    setIsSending(true);
+    try {
+      await result;
+      startWait();
+    } finally {
+      isSendingRef.current = false;
+      setIsSending(false);
+    }
+  }, "resend");
+  return /* @__PURE__ */ jsxs("p", { ...pProps, className: `space-x-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(GradientText, { text: label, type: "silver", className: "text-xs sm:text-sm" }),
+    secondsLeft > 0 ? /* @__PURE__ */ jsxs("span", { role: "timer", className: "text-muted text-xs sm:text-sm", children: [
+      /* @__PURE__ */ jsx(GradientText, { text: countdownLabel, type: "silver" }),
+      " ",
+      /* @__PURE__ */ jsx(GradientText, { text: formatSeconds(secondsLeft), type: "accent", className: "font-semibold" })
+    ] }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isSending,
+        "aria-busy": isSending || void 0,
+        onClick: () => {
+          resend().catch((error) => {
+            reportError(error);
+          });
+        },
+        className: BUTTON_CSS,
+        children: /* @__PURE__ */ jsx(
+          GradientText,
+          {
+            type: "accent",
+            text: isSending ? sendingLabel : resendLabel,
+            className: "text-xs font-semibold sm:text-sm"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: isReady ? readyLabel : "" })
+  ] });
+}, "Resend");
+
+export { Resend };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/resend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/countdown.ts","../../src/resend/Resend.tsx"],"names":[],"mappings":";;;;;;;;AAKO,IAAM,SAAA,mBAAY,MAAA,CAAA,CAAC,OAAA,KACxB,MAAA,CAAO,SAAS,OAAO,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,KAAK,IAAA,CAAK,OAAO,CAAA,EAAG,CAAC,IAAI,CAAA,EADtC,WAAA,CAAA;AAOlB,IAAM,cAAA,mBAAiB,MAAA,CAAA,CAAC,MAAA,EAAgB,GAAA,KAC7C,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,IAAA,CAAA,CAAM,MAAA,GAAS,GAAA,IAAO,GAAI,CAAA,EAAG,CAAC,CAAA,EADhB,gBAAA,CAAA;AAGvB,IAAM,aAAA,mBAAgB,MAAA,CAAA,CAAC,KAAA,KAC5B,OAAO,KAAA,KAAU,QAAA,IACjB,KAAA,KAAU,IAAA,IACV,MAAA,IAAU,KAAA,IACV,OAAO,KAAA,CAAM,SAAS,UAAA,EAJK,eAAA,CAAA;ACoB7B,IAAM,uCAAuB,MAAA,CAAA,CAAC,OAAA,KAAoB,GAAG,MAAA,CAAO,OAAO,CAAC,CAAA,CAAA,CAAA,EAAvC,sBAAA,CAAA;AAK7B,IAAM,UAAA,GACJ,gKAAA;AAOK,IAAM,yBAAS,MAAA,CAAA,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,cAAA,GAAiB,WAAA;AAAA,EACjB,YAAA,GAAe,eAAA;AAAA,EACf,UAAA,GAAa,oBAAA;AAAA,EACb,aAAA,GAAgB,oBAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAe;AAGb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,OAAO,EAAE,OAAA,EAAS,SAAA,CAAU,KAAK,CAAA,EAAE,CAAE,CAAA;AACtE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA,CAAS,KAAK,OAAO,CAAA;AAC3D,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AACjC,EAAA,MAAM,QAAA,GAAW,OAAO,KAAK,CAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,CAAK,WAAW,CAAA,EAAG;AAEvB,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,EAAI,GAAI,KAAK,OAAA,GAAU,GAAA;AAC3C,IAAA,IAAI,QAAQ,IAAA,CAAK,OAAA;AAEjB,IAAA,MAAM,yBAAS,MAAA,CAAA,MAAM;AACnB,MAAA,MAAM,IAAA,GAAO,cAAA,CAAe,MAAA,EAAQ,IAAA,CAAK,KAAK,CAAA;AAI9C,MAAA,IAAI,SAAS,KAAA,EAAO;AAClB,QAAA,KAAA,GAAQ,IAAA;AACR,QAAA,cAAA,CAAe,IAAI,CAAA;AAAA,MACrB;AACA,MAAA,IAAI,OAAO,CAAA,EAAG;AAEd,MAAA,MAAA,CAAO,cAAc,KAAK,CAAA;AAC1B,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,IACjB,CAAA,EAbe,QAAA,CAAA;AAgBf,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,WAAA,CAAY,MAAA,EAAQ,GAAG,CAAA;AAE5C,IAAA,QAAA,CAAS,gBAAA,CAAiB,oBAAoB,MAAM,CAAA;AAEpD,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,cAAc,KAAK,CAAA;AAC1B,MAAA,QAAA,CAAS,mBAAA,CAAoB,oBAAoB,MAAM,CAAA;AAAA,IACzD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,4BAAY,MAAA,CAAA,MAAM;AACtB,IAAA,MAAM,OAAA,GAAU,SAAA,CAAU,QAAA,CAAS,OAAO,CAAA;AAE1C,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,cAAA,CAAe,OAAO,CAAA;AACtB,IAAA,OAAA,CAAQ,EAAE,SAAS,CAAA;AAAA,EACrB,CAAA,EANkB,WAAA,CAAA;AAQlB,EAAA,MAAM,yBAAS,MAAA,CAAA,YAAY;AACzB,IAAA,IAAI,aAAa,OAAA,EAAS;AAE1B,IAAA,MAAM,SAAS,QAAA,EAAS;AAGxB,IAAA,IAAI,CAAC,aAAA,CAAc,MAAM,CAAA,EAAG;AAC1B,MAAA,SAAA,EAAU;AAEV,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,IAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,IAAA,IAAI;AACF,MAAA,MAAM,MAAA;AACN,MAAA,SAAA,EAAU;AAAA,IACZ,CAAA,SAAE;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAtBe,QAAA,CAAA;AAwBf,EAAA,4BACG,GAAA,EAAA,EAAG,GAAG,QAAQ,SAAA,EAAW,CAAA,UAAA,EAAa,SAAS,CAAA,CAAA,EAC9C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBAAa,IAAA,EAAM,KAAA,EAAO,IAAA,EAAK,QAAA,EAAS,WAAU,oBAAA,EAAqB,CAAA;AAAA,IAEvE,cAAc,CAAA,mBACb,IAAA,CAAC,UAAK,IAAA,EAAK,OAAA,EAAQ,WAAU,+BAAA,EAC3B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAK,QAAA,EAAS,CAAA;AAAA,MAAG,GAAA;AAAA,sBACrD,GAAA,CAAC,gBAAa,IAAA,EAAM,aAAA,CAAc,WAAW,CAAA,EAAG,IAAA,EAAK,QAAA,EAAS,SAAA,EAAU,eAAA,EAAgB;AAAA,KAAA,EAC1F,CAAA,mBAEA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,QAAA,EAAU,SAAA;AAAA,QACV,aAAW,SAAA,IAAa,MAAA;AAAA,QACxB,SAAS,MAAM;AAGb,UAAA,MAAA,EAAO,CAAE,KAAA,CAAM,CAAC,KAAA,KAAmB;AACjC,YAAA,WAAA,CAAY,KAAK,CAAA;AAAA,UACnB,CAAC,CAAA;AAAA,QACH,CAAA;AAAA,QACA,SAAA,EAAW,UAAA;AAAA,QAEX,QAAA,kBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAM,YAAY,YAAA,GAAe,WAAA;AAAA,YACjC,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,KACF;AAAA,oBAIF,GAAA,CAAC,UAAK,IAAA,EAAK,QAAA,EAAS,WAAU,SAAA,EAC3B,QAAA,EAAA,OAAA,GAAU,aAAa,EAAA,EAC1B;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA,EA9HsB,QAAA","file":"index.js","sourcesContent":["/**\n * A number of seconds to wait as a whole number that is never negative. A value that is not a number\n * of seconds (`NaN`, `Infinity`, a negative one) is no wait at all: a countdown that cannot end would\n * lock the button for good.\n */\nexport const toSeconds = (seconds: number) =>\n  Number.isFinite(seconds) ? Math.max(Math.ceil(seconds), 0) : 0;\n\n/**\n * The whole seconds left until `endsAt` (a time in ms, as `Date.now()` gives), counted up: 0.2 s left\n * is shown as 1, so the countdown shows 0 only once it is over.\n */\nexport const getSecondsLeft = (endsAt: number, now: number) =>\n  Math.max(Math.ceil((endsAt - now) / 1000), 0);\n\nexport const isPromiseLike = (value: unknown): value is PromiseLike<unknown> =>\n  typeof value === 'object' &&\n  value !== null &&\n  'then' in value &&\n  typeof value.then === 'function';\n","import { type ComponentProps, useEffect, useRef, useState } from 'react';\n\nimport { getSecondsLeft, isPromiseLike, toSeconds } from '../lib/countdown.js';\nimport { GradientText } from '../ui/index.js';\n\nexport interface IResend extends Omit<ComponentProps<'p'>, 'children'> {\n  /** What is said before the countdown or the button, e.g. `\"Didn't get the code?\"`. */\n  label: string;\n  /**\n   * How many seconds to wait before it can be asked again. The wait starts when the component is\n   * shown (the thing was just sent) and again after each resend, with the `count` of that moment, so\n   * an app can stop making people wait after a few tries by passing 0. A change of `count` in the\n   * middle of a wait does not change that wait; to start over (a new email address), give the\n   * component a new `key`.\n   */\n  count: number;\n  /**\n   * Asks again. When it returns a promise, the button waits for it (it cannot be pressed twice, and\n   * says it is sending) and the wait starts when it resolves; if it rejects there is no wait, the\n   * button can be pressed again and the error is reported to the window like any uncaught error.\n   * Handle the errors you can recover from (a toast) inside it.\n   */\n  onResend: () => unknown;\n  /** @default 'Resend' */\n  resendLabel?: string;\n  /** What comes before the seconds while waiting. @default 'Resend in' */\n  countdownLabel?: string;\n  /** The button while `onResend` is waiting for its promise. @default 'Sending…' */\n  sendingLabel?: string;\n  /** Read out by assistive technology when the wait ends. @default 'You can resend now' */\n  readyLabel?: string;\n  /** How the seconds are written. @default (seconds) => `${seconds}s` */\n  formatSeconds?: (seconds: number) => string;\n}\n\nconst defaultFormatSeconds = (seconds: number) => `${String(seconds)}s`;\n\n// No `outline-hidden` here: in Tailwind v4 it sets `--tw-outline-style: none`, which the\n// `focus-visible:outline-2` below uses for its style, so the ring would never be drawn. A button only\n// shows the browser's own ring for the keyboard anyway (`:focus-visible`), never for a click.\nconst BUTTON_CSS =\n  'cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-wait disabled:opacity-60';\n\n/**\n * \"Didn't get the code? Resend in 30s\" and, once the wait is over, a button to ask again. The wait is\n * measured against the clock, not counted tick by tick, so a tab that was in the background or a\n * laptop that slept does not leave people waiting longer than the time that really went by.\n */\nexport const Resend = ({\n  label,\n  count,\n  onResend,\n  resendLabel = 'Resend',\n  countdownLabel = 'Resend in',\n  sendingLabel = 'Sending…',\n  readyLabel = 'You can resend now',\n  formatSeconds = defaultFormatSeconds,\n  className = '',\n  ...pProps\n}: IResend) => {\n  // What is rendered first is the same on the server and in the browser: the wait starts when the\n  // component is on the page (the effect below), never from the time the render happened.\n  const [wait, setWait] = useState(() => ({ seconds: toSeconds(count) }));\n  const [secondsLeft, setSecondsLeft] = useState(wait.seconds);\n  const [isReady, setIsReady] = useState(false);\n  const [isSending, setIsSending] = useState(false);\n  const isSendingRef = useRef(false);\n  const countRef = useRef(count);\n\n  useEffect(() => {\n    countRef.current = count;\n  }, [count]);\n\n  useEffect(() => {\n    if (wait.seconds <= 0) return;\n\n    const endsAt = Date.now() + wait.seconds * 1000;\n    let shown = wait.seconds;\n\n    const update = () => {\n      const left = getSecondsLeft(endsAt, Date.now());\n\n      // Several ticks fall in every second; the state is only set (and React only asked to render,\n      // which it sometimes does even for a value that is the same) when the second changes.\n      if (left !== shown) {\n        shown = left;\n        setSecondsLeft(left);\n      }\n      if (left > 0) return;\n\n      window.clearInterval(timer);\n      setIsReady(true);\n    };\n\n    // Several times a second, not once: a tick that comes a little late still shows the right second.\n    const timer = window.setInterval(update, 250);\n    // A background tab runs timers rarely; come back to the right number as soon as it is seen.\n    document.addEventListener('visibilitychange', update);\n\n    return () => {\n      window.clearInterval(timer);\n      document.removeEventListener('visibilitychange', update);\n    };\n  }, [wait]);\n\n  const startWait = () => {\n    const seconds = toSeconds(countRef.current);\n\n    setIsReady(false);\n    setSecondsLeft(seconds);\n    setWait({ seconds });\n  };\n\n  const resend = async () => {\n    if (isSendingRef.current) return;\n\n    const result = onResend();\n\n    // `onResend` that does not return a promise (most) starts the wait at once, as the click.\n    if (!isPromiseLike(result)) {\n      startWait();\n\n      return;\n    }\n\n    isSendingRef.current = true;\n    setIsSending(true);\n\n    try {\n      await result;\n      startWait();\n    } finally {\n      isSendingRef.current = false;\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <p {...pProps} className={`space-x-2 ${className}`}>\n      <GradientText text={label} type=\"silver\" className=\"text-xs sm:text-sm\" />\n\n      {secondsLeft > 0 ? (\n        <span role=\"timer\" className=\"text-muted text-xs sm:text-sm\">\n          <GradientText text={countdownLabel} type=\"silver\" />{' '}\n          <GradientText text={formatSeconds(secondsLeft)} type=\"accent\" className=\"font-semibold\" />\n        </span>\n      ) : (\n        <button\n          type=\"button\"\n          disabled={isSending}\n          aria-busy={isSending || undefined}\n          onClick={() => {\n            // `reportError` is what the browser does for an error nobody caught: it is reported to\n            // `window` (and to the error tracker of the app) instead of vanishing in a dropped promise.\n            resend().catch((error: unknown) => {\n              reportError(error);\n            });\n          }}\n          className={BUTTON_CSS}\n        >\n          <GradientText\n            type=\"accent\"\n            text={isSending ? sendingLabel : resendLabel}\n            className=\"text-xs font-semibold sm:text-sm\"\n          />\n        </button>\n      )}\n\n      {/* Said once, when the wait ends: a person using a screen reader cannot see the button appear. */}\n      <span role=\"status\" className=\"sr-only\">\n        {isReady ? readyLabel : ''}\n      </span>\n    </p>\n  );\n};\n"]}

package/dist/static-page/StaticPage.d.cts

@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+import type { IChildren, IClassName } from '../types/component.js';
+/** The column all the parts sit in. */
+export declare const StaticPageLayout: ({ children }: IChildren) => import("react").JSX.Element;
+export interface IStaticPageHeader {
+    /** An icon of Iconify, in a circle above the title. */
+    icon: string;
+    /** The title of the page: it is the `h1`. */
+    title: string;
+    description: ReactNode;
+    /** Something under the description, e.g. `LastUpdatedBadge`. */
+    meta?: ReactNode;
+}
+export declare const StaticPageHeader: ({ icon, title, description, meta }: IStaticPageHeader) => import("react").JSX.Element;
+export interface ILastUpdatedBadge {
+    /** When the page was changed. */
+    date: Date | string | number;
+    /** @default 'Last updated' */
+    label?: string;
+    /** The language of the date. It is fixed (not the one of the machine) so a server and a browser write the same. @default 'en-US' */
+    locale?: string;
+}
+/**
+ * "Last updated 15 Oct 2026", with the date in a `<time>`. The day is the day of the date in UTC, so
+ * it does not depend on where the page is drawn.
+ */
+export declare const LastUpdatedBadge: ({ date, label, locale, }: ILastUpdatedBadge) => import("react").JSX.Element | null;
+export interface IStaticPageSection extends IClassName {
+    /** The heading of the section: an `h2`. Without it the section has none. */
+    title?: string;
+    children: ReactNode;
+}
+export declare const StaticPageSection: ({ title, children, className }: IStaticPageSection) => import("react").JSX.Element;
+export interface IInfoCard {
+    icon: string;
+    /** A heading (an `h3`). */
+    title: string;
+    description: string;
+}
+export declare const InfoCard: ({ icon, title, description }: IInfoCard) => import("react").JSX.Element;
+export interface IInfoCardGrid {
+    items: readonly IInfoCard[];
+    /** How many cards in a row from `sm:` up. @default 2 */
+    columns?: 2 | 3;
+}
+export declare const InfoCardGrid: ({ items, columns }: IInfoCardGrid) => import("react").JSX.Element;
+export interface IChecklist {
+    items: readonly string[];
+    /** @default 'solar:check-circle-linear' */
+    icon?: string;
+    iconClassName?: string;
+}
+/** Short statements in a list, each in its own bordered row with an icon. */
+export declare const Checklist: ({ items, icon, iconClassName, }: IChecklist) => import("react").JSX.Element;
+export interface IHighlightNote {
+    /** @default 'solar:danger-triangle-linear' */
+    icon?: string;
+    title: string;
+    children: ReactNode;
+}
+/** A note that stands out: an icon beside a title and a text. It is a `note`, named by its title. */
+export declare const HighlightNote: ({ icon, title, children, }: IHighlightNote) => import("react").JSX.Element;
+export interface INumberedStep {
+    title: string;
+    description: string;
+}
+export interface INumberedSteps {
+    steps: readonly INumberedStep[];
+}
+/** The steps of a process in an ordered list, each with its number. */
+export declare const NumberedSteps: ({ steps }: INumberedSteps) => import("react").JSX.Element;
+export interface IStaticPageCTA extends IClassName {
+    /** The heading of the block: an `h2`. */
+    title: string;
+    description: ReactNode;
+    /** The buttons or links. */
+    actions: ReactNode;
+    footer?: ReactNode;
+    /** `'row'` puts the text and the actions side by side from `sm:` up; `'stack'` keeps them stacked. @default 'row' */
+    layout?: 'row' | 'stack';
+}
+/** The closing block of a page ("Get in touch"): a heading, a text and the actions. */
+export declare const StaticPageCTA: ({ title, description, actions, footer, layout, className, }: IStaticPageCTA) => import("react").JSX.Element;
+export interface IEmailUsAction {
+    /** The address; it is also the text, unless `children` says another. */
+    email: string;
+    children?: ReactNode;
+}
+/** A pill that writes an e-mail to an address: the usual action of `StaticPageCTA`. */
+export declare const EmailUsAction: ({ email, children }: IEmailUsAction) => import("react").JSX.Element;
+//# sourceMappingURL=StaticPage.d.cts.map

package/dist/static-page/StaticPage.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticPage.d.cts","sourceRoot":"","sources":["../../src/static-page/StaticPage.tsx"],"names":[],"mappings":"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"}

package/dist/static-page/StaticPage.d.ts

@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+import type { IChildren, IClassName } from '../types/component.js';
+/** The column all the parts sit in. */
+export declare const StaticPageLayout: ({ children }: IChildren) => import("react").JSX.Element;
+export interface IStaticPageHeader {
+    /** An icon of Iconify, in a circle above the title. */
+    icon: string;
+    /** The title of the page: it is the `h1`. */
+    title: string;
+    description: ReactNode;
+    /** Something under the description, e.g. `LastUpdatedBadge`. */
+    meta?: ReactNode;
+}
+export declare const StaticPageHeader: ({ icon, title, description, meta }: IStaticPageHeader) => import("react").JSX.Element;
+export interface ILastUpdatedBadge {
+    /** When the page was changed. */
+    date: Date | string | number;
+    /** @default 'Last updated' */
+    label?: string;
+    /** The language of the date. It is fixed (not the one of the machine) so a server and a browser write the same. @default 'en-US' */
+    locale?: string;
+}
+/**
+ * "Last updated 15 Oct 2026", with the date in a `<time>`. The day is the day of the date in UTC, so
+ * it does not depend on where the page is drawn.
+ */
+export declare const LastUpdatedBadge: ({ date, label, locale, }: ILastUpdatedBadge) => import("react").JSX.Element | null;
+export interface IStaticPageSection extends IClassName {
+    /** The heading of the section: an `h2`. Without it the section has none. */
+    title?: string;
+    children: ReactNode;
+}
+export declare const StaticPageSection: ({ title, children, className }: IStaticPageSection) => import("react").JSX.Element;
+export interface IInfoCard {
+    icon: string;
+    /** A heading (an `h3`). */
+    title: string;
+    description: string;
+}
+export declare const InfoCard: ({ icon, title, description }: IInfoCard) => import("react").JSX.Element;
+export interface IInfoCardGrid {
+    items: readonly IInfoCard[];
+    /** How many cards in a row from `sm:` up. @default 2 */
+    columns?: 2 | 3;
+}
+export declare const InfoCardGrid: ({ items, columns }: IInfoCardGrid) => import("react").JSX.Element;
+export interface IChecklist {
+    items: readonly string[];
+    /** @default 'solar:check-circle-linear' */
+    icon?: string;
+    iconClassName?: string;
+}
+/** Short statements in a list, each in its own bordered row with an icon. */
+export declare const Checklist: ({ items, icon, iconClassName, }: IChecklist) => import("react").JSX.Element;
+export interface IHighlightNote {
+    /** @default 'solar:danger-triangle-linear' */
+    icon?: string;
+    title: string;
+    children: ReactNode;
+}
+/** A note that stands out: an icon beside a title and a text. It is a `note`, named by its title. */
+export declare const HighlightNote: ({ icon, title, children, }: IHighlightNote) => import("react").JSX.Element;
+export interface INumberedStep {
+    title: string;
+    description: string;
+}
+export interface INumberedSteps {
+    steps: readonly INumberedStep[];
+}
+/** The steps of a process in an ordered list, each with its number. */
+export declare const NumberedSteps: ({ steps }: INumberedSteps) => import("react").JSX.Element;
+export interface IStaticPageCTA extends IClassName {
+    /** The heading of the block: an `h2`. */
+    title: string;
+    description: ReactNode;
+    /** The buttons or links. */
+    actions: ReactNode;
+    footer?: ReactNode;
+    /** `'row'` puts the text and the actions side by side from `sm:` up; `'stack'` keeps them stacked. @default 'row' */
+    layout?: 'row' | 'stack';
+}
+/** The closing block of a page ("Get in touch"): a heading, a text and the actions. */
+export declare const StaticPageCTA: ({ title, description, actions, footer, layout, className, }: IStaticPageCTA) => import("react").JSX.Element;
+export interface IEmailUsAction {
+    /** The address; it is also the text, unless `children` says another. */
+    email: string;
+    children?: ReactNode;
+}
+/** A pill that writes an e-mail to an address: the usual action of `StaticPageCTA`. */
+export declare const EmailUsAction: ({ email, children }: IEmailUsAction) => import("react").JSX.Element;
+//# sourceMappingURL=StaticPage.d.ts.map

package/dist/static-page/StaticPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticPage.d.ts","sourceRoot":"","sources":["../../src/static-page/StaticPage.tsx"],"names":[],"mappings":"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"}

package/dist/static-page/index.cjs

@@ -0,0 +1,247 @@
+'use strict';
+
+var react = require('@iconify/react');
+var react$1 = require('react');
+var ui = require('@beautinique/frontend-components/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/static-page/static-page-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "calendar-mark-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z"/><path d="M7 4V2.5"/><path d="M17 4V2.5"/><circle cx="16.5" cy="16.5" r="1.5"/><path d="M2.5 9H21.5"/></g>'
+      },
+      "check-circle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linejoin="round" d="M8.5 12.5L10.5 14.5L15.5 9.5"/></g>'
+      },
+      "danger-triangle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z"/><path d="M12 8V13"/><path stroke-linejoin="round" d="M12 16H12.0001"/></g>'
+      },
+      "letter-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"/><path d="M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8"/></g>'
+      }
+    }
+  }
+];
+var { register: registerStaticPageIcons, names: STATIC_PAGE_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var StaticPageLayout = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-10 sm:px-6 sm:py-14", children }), "StaticPageLayout");
+var StaticPageHeader = /* @__PURE__ */ __name(({ icon, title, description, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col items-center gap-4 text-center", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "bg-accent-duo flex size-16 items-center justify-center rounded-full shadow-lg sm:size-20",
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon, className: "size-8 text-white sm:size-10" })
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    ui.GradientText,
+    {
+      as: "h1",
+      type: "accent",
+      text: title,
+      className: "text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-secondary max-w-2xl text-sm sm:text-base", children: description }),
+  meta
+] }), "StaticPageHeader");
+var LastUpdatedBadge = /* @__PURE__ */ __name(({
+  date,
+  label = "Last updated",
+  locale = "en-US"
+}) => {
+  registerStaticPageIcons();
+  const value = new Date(date);
+  if (Number.isNaN(value.getTime())) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-primary/50 flex items-center gap-1 text-xs sm:text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { "aria-hidden": "true", icon: "solar:calendar-mark-linear", className: "size-3.5" }),
+    label,
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: value.toISOString().slice(0, 10), children: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(value) })
+  ] });
+}, "LastUpdatedBadge");
+var StaticPageSection = /* @__PURE__ */ __name(({ title, children, className = "gap-4" }) => {
+  const titleId = react$1.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": title ? titleId : void 0, className: `flex flex-col ${className}`, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.GradientText,
+      {
+        as: "h2",
+        id: titleId,
+        type: "accent",
+        text: title,
+        className: "text-xl font-semibold sm:text-2xl"
+      }
+    ),
+    children
+  ] });
+}, "StaticPageSection");
+var InfoCard = /* @__PURE__ */ __name(({ icon, title, description }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-primary/10 bg-secondary-invert hover:border-primary/20 flex items-start gap-3 rounded-xl border p-4 transition-colors motion-reduce:transition-none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "bg-accent-duo flex size-9 shrink-0 items-center justify-center rounded-lg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon, className: "size-5 text-white" })
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-primary text-sm font-semibold sm:text-base", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-secondary text-xs sm:text-sm", children: description })
+  ] })
+] }), "InfoCard");
+var InfoCardGrid = /* @__PURE__ */ __name(({ items, columns = 2 }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-1 gap-4 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { ...item }, item.title)) }), "InfoCardGrid");
+var Checklist = /* @__PURE__ */ __name(({
+  items,
+  icon = "solar:check-circle-linear",
+  iconClassName = "text-primary-green"
+}) => {
+  registerStaticPageIcons();
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-3", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-3 sm:p-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Icon,
+          {
+            "aria-hidden": "true",
+            icon,
+            className: `mt-0.5 size-4.5 shrink-0 ${iconClassName}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-secondary text-xs sm:text-sm", children: item })
+      ]
+    },
+    item
+  )) });
+}, "Checklist");
+var HighlightNote = /* @__PURE__ */ __name(({
+  icon = "solar:danger-triangle-linear",
+  title,
+  children
+}) => {
+  registerStaticPageIcons();
+  const titleId = react$1.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "note",
+      "aria-labelledby": titleId,
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4 sm:p-5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { "aria-hidden": "true", icon, className: "text-primary/60 mt-0.5 size-5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { id: titleId, className: "text-primary text-sm font-semibold sm:text-base", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-secondary text-xs leading-relaxed sm:text-sm", children })
+        ] })
+      ]
+    }
+  );
+}, "HighlightNote");
+var NumberedSteps = /* @__PURE__ */ __name(({ steps }) => (
+  // `list-none` takes the list away for some screen readers; `role="list"` gives it back
+  /* @__PURE__ */ jsxRuntime.jsx("ol", { role: "list", className: "flex list-none flex-col gap-3", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "bg-accent-duo flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white",
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-primary text-sm font-semibold sm:text-base", children: step.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-secondary text-xs sm:text-sm", children: step.description })
+        ] })
+      ]
+    },
+    step.title
+  )) })
+), "NumberedSteps");
+var StaticPageCTA = /* @__PURE__ */ __name(({
+  title,
+  description,
+  actions,
+  footer,
+  layout = "row",
+  className = ""
+}) => {
+  const titleId = react$1.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: `border-primary/10 bg-secondary-invert flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `flex flex-col gap-4 ${layout === "row" ? "items-start justify-between sm:flex-row sm:items-center" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "text-primary text-base font-semibold sm:text-lg", children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-secondary text-xs sm:text-sm", children: description })
+              ] }),
+              actions
+            ]
+          }
+        ),
+        footer
+      ]
+    }
+  );
+}, "StaticPageCTA");
+var EmailUsAction = /* @__PURE__ */ __name(({ email, children }) => {
+  registerStaticPageIcons();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: `mailto:${email}`,
+      className: "border-primary/20 hover:bg-primary-invert/60 text-primary flex shrink-0 items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c motion-reduce:transition-none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { "aria-hidden": "true", icon: "solar:letter-linear", className: "size-4.5" }),
+        children ?? email
+      ]
+    }
+  );
+}, "EmailUsAction");
+
+exports.Checklist = Checklist;
+exports.EmailUsAction = EmailUsAction;
+exports.HighlightNote = HighlightNote;
+exports.InfoCard = InfoCard;
+exports.InfoCardGrid = InfoCardGrid;
+exports.LastUpdatedBadge = LastUpdatedBadge;
+exports.NumberedSteps = NumberedSteps;
+exports.StaticPageCTA = StaticPageCTA;
+exports.StaticPageHeader = StaticPageHeader;
+exports.StaticPageLayout = StaticPageLayout;
+exports.StaticPageSection = StaticPageSection;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/static-page/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/icon-registry.ts","../../src/static-page/static-page-icons.ts","../../src/static-page/StaticPage.tsx"],"names":["addCollection","jsxs","jsx","Icon","GradientText","useId"],"mappings":"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","file":"index.cjs","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the parts of a static page, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'calendar-mark-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z\"/><path d=\"M7 4V2.5\"/><path d=\"M17 4V2.5\"/><circle cx=\"16.5\" cy=\"16.5\" r=\"1.5\"/><path d=\"M2.5 9H21.5\"/></g>',\n      },\n      'check-circle-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path stroke-linejoin=\"round\" d=\"M8.5 12.5L10.5 14.5L15.5 9.5\"/></g>',\n      },\n      'danger-triangle-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z\"/><path d=\"M12 8V13\"/><path stroke-linejoin=\"round\" d=\"M12 16H12.0001\"/></g>',\n      },\n      'letter-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z\"/><path d=\"M6 8L8.1589 9.79908C9.99553 11.3296 10.9139 12.0949 12 12.0949C13.0861 12.0949 14.0045 11.3296 15.8411 9.79908L18 8\"/></g>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerStaticPageIcons, names: STATIC_PAGE_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import { Icon } from '@iconify/react';\nimport { type ReactNode, useId } from 'react';\n\nimport type { IChildren, IClassName } from '../types/component.js';\nimport { GradientText } from '../ui/index.js';\nimport { registerStaticPageIcons } from './static-page-icons.js';\n\n/*\n * The parts of a page that is only content (company, legal and information pages): a header, some\n * sections, and a closing call to action, in the same column. The headings are real headings\n * (the page `h1`, each section `h2`, each card `h3`), the lists are lists, and the icons are decoration\n * that assistive technology skips. The icons are given by name: they come from the Iconify API unless\n * the app has them registered.\n */\n\n/** The column all the parts sit in. */\nexport const StaticPageLayout = ({ children }: IChildren) => (\n  <div className=\"mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-10 sm:px-6 sm:py-14\">\n    {children}\n  </div>\n);\n\nexport interface IStaticPageHeader {\n  /** An icon of Iconify, in a circle above the title. */\n  icon: string;\n  /** The title of the page: it is the `h1`. */\n  title: string;\n  description: ReactNode;\n  /** Something under the description, e.g. `LastUpdatedBadge`. */\n  meta?: ReactNode;\n}\n\nexport const StaticPageHeader = ({ icon, title, description, meta }: IStaticPageHeader) => (\n  <header className=\"flex flex-col items-center gap-4 text-center\">\n    <span\n      aria-hidden=\"true\"\n      className=\"bg-accent-duo flex size-16 items-center justify-center rounded-full shadow-lg sm:size-20\"\n    >\n      <Icon icon={icon} className=\"size-8 text-white sm:size-10\" />\n    </span>\n    <GradientText\n      as=\"h1\"\n      type=\"accent\"\n      text={title}\n      className=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\"\n    />\n    <p className=\"text-secondary max-w-2xl text-sm sm:text-base\">{description}</p>\n    {meta}\n  </header>\n);\n\nexport interface ILastUpdatedBadge {\n  /** When the page was changed. */\n  date: Date | string | number;\n  /** @default 'Last updated' */\n  label?: string;\n  /** The language of the date. It is fixed (not the one of the machine) so a server and a browser write the same. @default 'en-US' */\n  locale?: string;\n}\n\n/**\n * \"Last updated 15 Oct 2026\", with the date in a `<time>`. The day is the day of the date in UTC, so\n * it does not depend on where the page is drawn.\n */\nexport const LastUpdatedBadge = ({\n  date,\n  label = 'Last updated',\n  locale = 'en-US',\n}: ILastUpdatedBadge) => {\n  registerStaticPageIcons();\n\n  const value = new Date(date);\n\n  if (Number.isNaN(value.getTime())) return null;\n\n  return (\n    <span className=\"text-primary/50 flex items-center gap-1 text-xs sm:text-sm\">\n      <Icon aria-hidden=\"true\" icon=\"solar:calendar-mark-linear\" className=\"size-3.5\" />\n      {label}{' '}\n      <time dateTime={value.toISOString().slice(0, 10)}>\n        {new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' }).format(value)}\n      </time>\n    </span>\n  );\n};\n\nexport interface IStaticPageSection extends IClassName {\n  /** The heading of the section: an `h2`. Without it the section has none. */\n  title?: string;\n  children: ReactNode;\n}\n\nexport const StaticPageSection = ({ title, children, className = 'gap-4' }: IStaticPageSection) => {\n  const titleId = useId();\n\n  return (\n    <section aria-labelledby={title ? titleId : undefined} className={`flex flex-col ${className}`}>\n      {title && (\n        <GradientText\n          as=\"h2\"\n          id={titleId}\n          type=\"accent\"\n          text={title}\n          className=\"text-xl font-semibold sm:text-2xl\"\n        />\n      )}\n      {children}\n    </section>\n  );\n};\n\nexport interface IInfoCard {\n  icon: string;\n  /** A heading (an `h3`). */\n  title: string;\n  description: string;\n}\n\nexport const InfoCard = ({ icon, title, description }: IInfoCard) => (\n  <div className=\"border-primary/10 bg-secondary-invert hover:border-primary/20 flex items-start gap-3 rounded-xl border p-4 transition-colors motion-reduce:transition-none\">\n    <span\n      aria-hidden=\"true\"\n      className=\"bg-accent-duo flex size-9 shrink-0 items-center justify-center rounded-lg\"\n    >\n      <Icon icon={icon} className=\"size-5 text-white\" />\n    </span>\n    <div>\n      <h3 className=\"text-primary text-sm font-semibold sm:text-base\">{title}</h3>\n      <p className=\"text-secondary text-xs sm:text-sm\">{description}</p>\n    </div>\n  </div>\n);\n\nexport interface IInfoCardGrid {\n  items: readonly IInfoCard[];\n  /** How many cards in a row from `sm:` up. @default 2 */\n  columns?: 2 | 3;\n}\n\nexport const InfoCardGrid = ({ items, columns = 2 }: IInfoCardGrid) => (\n  <div className={`grid grid-cols-1 gap-4 ${columns === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2'}`}>\n    {items.map((item) => (\n      <InfoCard key={item.title} {...item} />\n    ))}\n  </div>\n);\n\nexport interface IChecklist {\n  items: readonly string[];\n  /** @default 'solar:check-circle-linear' */\n  icon?: string;\n  iconClassName?: string;\n}\n\n/** Short statements in a list, each in its own bordered row with an icon. */\nexport const Checklist = ({\n  items,\n  icon = 'solar:check-circle-linear',\n  iconClassName = 'text-primary-green',\n}: IChecklist) => {\n  registerStaticPageIcons();\n\n  return (\n    <ul className=\"flex flex-col gap-3\">\n      {items.map((item) => (\n        <li\n          key={item}\n          className=\"border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-3 sm:p-4\"\n        >\n          <Icon\n            aria-hidden=\"true\"\n            icon={icon}\n            className={`mt-0.5 size-4.5 shrink-0 ${iconClassName}`}\n          />\n          <span className=\"text-secondary text-xs sm:text-sm\">{item}</span>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport interface IHighlightNote {\n  /** @default 'solar:danger-triangle-linear' */\n  icon?: string;\n  title: string;\n  children: ReactNode;\n}\n\n/** A note that stands out: an icon beside a title and a text. It is a `note`, named by its title. */\nexport const HighlightNote = ({\n  icon = 'solar:danger-triangle-linear',\n  title,\n  children,\n}: IHighlightNote) => {\n  registerStaticPageIcons();\n\n  const titleId = useId();\n\n  return (\n    <div\n      role=\"note\"\n      aria-labelledby={titleId}\n      className=\"border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4 sm:p-5\"\n    >\n      <Icon aria-hidden=\"true\" icon={icon} className=\"text-primary/60 mt-0.5 size-5 shrink-0\" />\n      <div className=\"flex flex-col gap-1.5\">\n        <p id={titleId} className=\"text-primary text-sm font-semibold sm:text-base\">\n          {title}\n        </p>\n        <p className=\"text-secondary text-xs leading-relaxed sm:text-sm\">{children}</p>\n      </div>\n    </div>\n  );\n};\n\nexport interface INumberedStep {\n  title: string;\n  description: string;\n}\n\nexport interface INumberedSteps {\n  steps: readonly INumberedStep[];\n}\n\n/** The steps of a process in an ordered list, each with its number. */\nexport const NumberedSteps = ({ steps }: INumberedSteps) => (\n  // `list-none` takes the list away for some screen readers; `role=\"list\"` gives it back\n  <ol role=\"list\" className=\"flex list-none flex-col gap-3\">\n    {steps.map((step, index) => (\n      <li\n        key={step.title}\n        className=\"border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4\"\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"bg-accent-duo flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white\"\n        >\n          {index + 1}\n        </span>\n        <div>\n          <p className=\"text-primary text-sm font-semibold sm:text-base\">{step.title}</p>\n          <p className=\"text-secondary text-xs sm:text-sm\">{step.description}</p>\n        </div>\n      </li>\n    ))}\n  </ol>\n);\n\nexport interface IStaticPageCTA extends IClassName {\n  /** The heading of the block: an `h2`. */\n  title: string;\n  description: ReactNode;\n  /** The buttons or links. */\n  actions: ReactNode;\n  footer?: ReactNode;\n  /** `'row'` puts the text and the actions side by side from `sm:` up; `'stack'` keeps them stacked. @default 'row' */\n  layout?: 'row' | 'stack';\n}\n\n/** The closing block of a page (\"Get in touch\"): a heading, a text and the actions. */\nexport const StaticPageCTA = ({\n  title,\n  description,\n  actions,\n  footer,\n  layout = 'row',\n  className = '',\n}: IStaticPageCTA) => {\n  const titleId = useId();\n\n  return (\n    <section\n      aria-labelledby={titleId}\n      className={`border-primary/10 bg-secondary-invert flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 ${className}`}\n    >\n      <div\n        className={`flex flex-col gap-4 ${\n          layout === 'row' ? 'items-start justify-between sm:flex-row sm:items-center' : ''\n        }`}\n      >\n        <div className=\"flex flex-col gap-1\">\n          <h2 id={titleId} className=\"text-primary text-base font-semibold sm:text-lg\">\n            {title}\n          </h2>\n          <p className=\"text-secondary text-xs sm:text-sm\">{description}</p>\n        </div>\n        {actions}\n      </div>\n      {footer}\n    </section>\n  );\n};\n\nexport interface IEmailUsAction {\n  /** The address; it is also the text, unless `children` says another. */\n  email: string;\n  children?: ReactNode;\n}\n\n/** A pill that writes an e-mail to an address: the usual action of `StaticPageCTA`. */\nexport const EmailUsAction = ({ email, children }: IEmailUsAction) => {\n  registerStaticPageIcons();\n\n  return (\n    <a\n      href={`mailto:${email}`}\n      className=\"border-primary/20 hover:bg-primary-invert/60 text-primary flex shrink-0 items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c motion-reduce:transition-none\"\n    >\n      <Icon aria-hidden=\"true\" icon=\"solar:letter-linear\" className=\"size-4.5\" />\n      {children ?? email}\n    </a>\n  );\n};\n"]}

package/dist/static-page/index.d.cts

@@ -0,0 +1,2 @@
+export { Checklist, EmailUsAction, HighlightNote, type IChecklist, type IEmailUsAction, type IHighlightNote, type IInfoCard, type IInfoCardGrid, type ILastUpdatedBadge, InfoCard, InfoCardGrid, type INumberedStep, type INumberedSteps, type IStaticPageCTA, type IStaticPageHeader, type IStaticPageSection, LastUpdatedBadge, NumberedSteps, StaticPageCTA, StaticPageHeader, StaticPageLayout, StaticPageSection, } from './StaticPage.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/static-page/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/static-page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,QAAQ,EACR,YAAY,EACZ,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}