@beautinique/frontend-components 1.0.7 → 1.0.9

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

@@ -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.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","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"}

package/dist/static-page/index.js

@@ -0,0 +1,235 @@
+import { addCollection, Icon } from '@iconify/react';
+import { useId } from 'react';
+import { GradientText } from '@beautinique/frontend-components/ui';
+import { jsx, jsxs } from '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) 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__ */ 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__ */ jsxs("header", { className: "flex flex-col items-center gap-4 text-center", children: [
+  /* @__PURE__ */ 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__ */ jsx(Icon, { icon, className: "size-8 text-white sm:size-10" })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    GradientText,
+    {
+      as: "h1",
+      type: "accent",
+      text: title,
+      className: "text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl"
+    }
+  ),
+  /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-primary/50 flex items-center gap-1 text-xs sm:text-sm", children: [
+    /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", icon: "solar:calendar-mark-linear", className: "size-3.5" }),
+    label,
+    " ",
+    /* @__PURE__ */ 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 = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": title ? titleId : void 0, className: `flex flex-col ${className}`, children: [
+    title && /* @__PURE__ */ jsx(
+      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__ */ 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__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "bg-accent-duo flex size-9 shrink-0 items-center justify-center rounded-lg",
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-5 text-white" })
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-primary text-sm font-semibold sm:text-base", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-secondary text-xs sm:text-sm", children: description })
+  ] })
+] }), "InfoCard");
+var InfoCardGrid = /* @__PURE__ */ __name(({ items, columns = 2 }) => /* @__PURE__ */ jsx("div", { className: `grid grid-cols-1 gap-4 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`, children: items.map((item) => /* @__PURE__ */ jsx(InfoCard, { ...item }, item.title)) }), "InfoCardGrid");
+var Checklist = /* @__PURE__ */ __name(({
+  items,
+  icon = "solar:check-circle-linear",
+  iconClassName = "text-primary-green"
+}) => {
+  registerStaticPageIcons();
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: items.map((item) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-3 sm:p-4",
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": "true",
+            icon,
+            className: `mt-0.5 size-4.5 shrink-0 ${iconClassName}`
+          }
+        ),
+        /* @__PURE__ */ 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 = useId();
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { "aria-hidden": "true", icon, className: "text-primary/60 mt-0.5 size-5 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("p", { id: titleId, className: "text-primary text-sm font-semibold sm:text-base", children: title }),
+          /* @__PURE__ */ 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__ */ jsx("ol", { role: "list", className: "flex list-none flex-col gap-3", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "border-primary/10 bg-secondary-invert flex items-start gap-3 rounded-xl border p-4",
+      children: [
+        /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold sm:text-base", children: step.title }),
+          /* @__PURE__ */ 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 = useId();
+  return /* @__PURE__ */ 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__ */ jsxs(
+          "div",
+          {
+            className: `flex flex-col gap-4 ${layout === "row" ? "items-start justify-between sm:flex-row sm:items-center" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-primary text-base font-semibold sm:text-lg", children: title }),
+                /* @__PURE__ */ jsx("p", { className: "text-secondary text-xs sm:text-sm", children: description })
+              ] }),
+              actions
+            ]
+          }
+        ),
+        footer
+      ]
+    }
+  );
+}, "StaticPageCTA");
+var EmailUsAction = /* @__PURE__ */ __name(({ email, children }) => {
+  registerStaticPageIcons();
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { "aria-hidden": "true", icon: "solar:letter-linear", className: "size-4.5" }),
+        children ?? email
+      ]
+    }
+  );
+}, "EmailUsAction");
+
+export { Checklist, EmailUsAction, HighlightNote, InfoCard, InfoCardGrid, LastUpdatedBadge, NumberedSteps, StaticPageCTA, StaticPageHeader, StaticPageLayout, StaticPageSection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/static-page/index.js.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":[],"mappings":"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","file":"index.js","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/static-page-icons.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Registers the icons above with Iconify; the components of this entry call it when they render
+ * (calling it again is harmless).
+ */
+export declare const registerStaticPageIcons: () => void, STATIC_PAGE_ICON_NAMES: string[];
+//# sourceMappingURL=static-page-icons.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"static-page-icons.d.cts","sourceRoot":"","sources":["../../src/static-page/static-page-icons.ts"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,sBAAsB,UAChD,CAAC"}

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

@@ -0,0 +1,6 @@
+/**
+ * Registers the icons above with Iconify; the components of this entry call it when they render
+ * (calling it again is harmless).
+ */
+export declare const registerStaticPageIcons: () => void, STATIC_PAGE_ICON_NAMES: string[];
+//# sourceMappingURL=static-page-icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"static-page-icons.d.ts","sourceRoot":"","sources":["../../src/static-page/static-page-icons.ts"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,sBAAsB,UAChD,CAAC"}

package/dist/stepper/Stepper.d.cts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+export interface IStepperStep {
+    title: string;
+    description?: string;
+    /**
+     * An Iconify name (`'solar:user-linear'`) shown in the circle while the step is not completed; the
+     * step's number if left out. Iconify downloads it the first time it is shown and draws it in the
+     * browser, not on a server: to have it without a network, bundle it in the app (`addCollection`).
+     */
+    icon?: string;
+    /** Cannot be clicked. Only matters when `onStepClick` is given. */
+    disabled?: boolean;
+}
+export interface IStepper extends ComponentProps<'div'> {
+    steps: readonly IStepperStep[];
+    /** The index of the current step: the ones before it are completed, the ones after it are upcoming. */
+    activeStep: number;
+    /** Makes the steps buttons. It gets the index of the step that was clicked. */
+    onStepClick?: (step: number) => void;
+    /** Names the list of steps for assistive technology, e.g. `"Checkout progress"`. */
+    label?: string;
+    /**
+     * What assistive technology reads before the title of a completed step, which otherwise only shows
+     * a tick.
+     * @default 'Completed'
+     */
+    completedLabel?: string;
+}
+/**
+ * A row of steps with the current one marked, for a checkout, a sign-up or any other wizard. The
+ * steps are an ordered list; the current one has `aria-current="step"`. With `onStepClick` the steps
+ * are buttons, and the content in `children` is shown under them.
+ */
+export declare const Stepper: ({ steps, activeStep, onStepClick, label, completedLabel, className, children, ...divProps }: IStepper) => import("react").JSX.Element;
+//# sourceMappingURL=Stepper.d.cts.map

package/dist/stepper/Stepper.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.cts","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,uGAAuG;IACvG,UAAU,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuCD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,6FASrB,QAAQ,gCA8FV,CAAC"}

package/dist/stepper/Stepper.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+export interface IStepperStep {
+    title: string;
+    description?: string;
+    /**
+     * An Iconify name (`'solar:user-linear'`) shown in the circle while the step is not completed; the
+     * step's number if left out. Iconify downloads it the first time it is shown and draws it in the
+     * browser, not on a server: to have it without a network, bundle it in the app (`addCollection`).
+     */
+    icon?: string;
+    /** Cannot be clicked. Only matters when `onStepClick` is given. */
+    disabled?: boolean;
+}
+export interface IStepper extends ComponentProps<'div'> {
+    steps: readonly IStepperStep[];
+    /** The index of the current step: the ones before it are completed, the ones after it are upcoming. */
+    activeStep: number;
+    /** Makes the steps buttons. It gets the index of the step that was clicked. */
+    onStepClick?: (step: number) => void;
+    /** Names the list of steps for assistive technology, e.g. `"Checkout progress"`. */
+    label?: string;
+    /**
+     * What assistive technology reads before the title of a completed step, which otherwise only shows
+     * a tick.
+     * @default 'Completed'
+     */
+    completedLabel?: string;
+}
+/**
+ * A row of steps with the current one marked, for a checkout, a sign-up or any other wizard. The
+ * steps are an ordered list; the current one has `aria-current="step"`. With `onStepClick` the steps
+ * are buttons, and the content in `children` is shown under them.
+ */
+export declare const Stepper: ({ steps, activeStep, onStepClick, label, completedLabel, className, children, ...divProps }: IStepper) => import("react").JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,uGAAuG;IACvG,UAAU,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuCD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,6FASrB,QAAQ,gCA8FV,CAAC"}

package/dist/stepper/index.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+var react = require('@iconify/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/content.ts
+var hasContent = /* @__PURE__ */ __name((content) => content !== null && content !== void 0 && content !== false && content !== true && content !== "", "hasContent");
+
+// src/lib/stepper.ts
+var getCurrentStep = /* @__PURE__ */ __name((activeStep, count) => Number.isNaN(activeStep) ? 0 : Math.min(Math.max(Math.trunc(activeStep), 0), Math.max(count - 1, 0)), "getCurrentStep");
+var getStepState = /* @__PURE__ */ __name((index, currentStep) => {
+  if (index < currentStep) return "completed";
+  return index === currentStep ? "active" : "upcoming";
+}, "getStepState");
+var STEPPER_ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "check-read-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 12.9L7.14286 16.5L15 7.5"/><path d="M20 7.5625L11.4283 16.5625L11 16"/></g>'
+      }
+    }
+  }
+];
+var registered = false;
+var registerStepperIcons = /* @__PURE__ */ __name(() => {
+  if (registered) return;
+  for (const iconSet of STEPPER_ICON_SETS) react.addCollection(iconSet);
+  registered = true;
+}, "registerStepperIcons");
+STEPPER_ICON_SETS.flatMap(
+  ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
+);
+var ITEM_CSS = "group relative flex min-w-0 items-start gap-3 text-left md:flex-col md:items-center md:gap-3 md:px-2";
+var CLICKABLE_CSS = "cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-crayola-c disabled:cursor-not-allowed disabled:opacity-50";
+var CIRCLE_CSS = "relative z-1 flex size-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-300 motion-reduce:transition-none md:size-11";
+var CIRCLE_STATE_CSS = {
+  completed: "border-blue-crayola-c bg-accent-duo text-white shadow-[0_8px_24px_rgba(var(--blue-crayola-c-rgb),0.28)] forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:bg-none forced-colors:text-[HighlightText]",
+  active: "border-blue-crayola-c bg-primary-invert text-primary shadow-[0_0_0_5px_rgba(var(--blue-crayola-c-rgb),0.12)] forced-colors:border-[Highlight] forced-colors:border-4",
+  upcoming: "border-primary/20 bg-primary-invert text-primary/60 forced-colors:border-[GrayText] forced-colors:text-[GrayText]"
+};
+var TITLE_STATE_CSS = {
+  completed: "text-primary/80",
+  active: "text-primary",
+  upcoming: "text-primary/45 forced-colors:text-[GrayText]"
+};
+var DESCRIPTION_STATE_CSS = {
+  completed: "text-primary/35",
+  active: "text-secondary",
+  upcoming: "text-primary/35 forced-colors:text-[GrayText]"
+};
+var CONNECTOR_BASE_CSS = "absolute top-10 left-5 h-4 w-0.5 -translate-x-1/2 md:top-5 md:left-[calc(50%+1.375rem)] md:h-0.5 md:w-[calc(100%-2.75rem)] md:translate-x-0";
+var Stepper = /* @__PURE__ */ __name(({
+  steps,
+  activeStep,
+  onStepClick,
+  label,
+  completedLabel = "Completed",
+  className = "",
+  children,
+  ...divProps
+}) => {
+  registerStepperIcons();
+  const currentStep = getCurrentStep(activeStep, steps.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...divProps,
+      className: `flex w-full flex-col gap-6 p-4 shadow-sm sm:p-5 lg:p-6 ${className}`,
+      children: [
+        steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            "aria-label": label,
+            style: { "--steps-count": steps.length },
+            className: "m-0 flex list-none flex-col gap-4 p-0 md:grid md:grid-cols-[repeat(var(--steps-count),minmax(0,1fr))] md:gap-0",
+            children: steps.map((step, index) => {
+              const state = getStepState(index, currentStep);
+              const hasNextStep = index < steps.length - 1;
+              const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                hasNextStep && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `${CONNECTOR_BASE_CSS} ${state === "completed" ? "bg-accent-duo forced-colors:bg-[Highlight] forced-colors:bg-none" : "bg-primary/20 forced-colors:bg-[GrayText]"}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: `${CIRCLE_CSS} ${CIRCLE_STATE_CSS[state]}`, children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "solar:check-read-linear", className: "size-5" }) : step.icon ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: step.icon, className: "size-5" }) : index + 1 }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 pt-0.5 md:items-center md:pt-0 md:text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: `line-clamp-1 text-sm font-semibold md:text-[13px] lg:text-sm ${TITLE_STATE_CSS[state]}`,
+                      children: [
+                        state === "completed" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `${completedLabel}: ` }),
+                        step.title
+                      ]
+                    }
+                  ),
+                  hasContent(step.description) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `line-clamp-1 text-xs leading-4 md:line-clamp-2 ${DESCRIPTION_STATE_CSS[state]}`,
+                      children: step.description
+                    }
+                  )
+                ] })
+              ] });
+              return (
+                // The steps are a fixed order that is never sorted or filtered, and two can have the
+                // same title: the place is what tells them apart.
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "li",
+                  {
+                    "data-state": state,
+                    "aria-current": state === "active" ? "step" : void 0,
+                    children: onStepClick ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: step.disabled,
+                        onClick: () => {
+                          onStepClick(index);
+                        },
+                        className: `${ITEM_CSS} ${CLICKABLE_CSS} w-full`,
+                        children: content
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${ITEM_CSS} cursor-default`, children: content })
+                  },
+                  index
+                )
+              );
+            })
+          }
+        ),
+        hasContent(children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-primary/10 border-t pt-5", children })
+      ]
+    }
+  );
+}, "Stepper");
+
+exports.Stepper = Stepper;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/stepper/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/content.ts","../../src/lib/stepper.ts","../../src/stepper/stepper-icons.ts","../../src/stepper/Stepper.tsx"],"names":["addCollection","jsxs","jsx","Fragment","Icon"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { ReactNode } from 'react';\n\n/**\n * Whether React would show something for `content`. `null`, `undefined`, booleans and an empty string\n * show nothing; `0` does show (the text \"0\"), which is why this is not a plain truthiness check.\n */\nexport const hasContent = (content: ReactNode) =>\n  content !== null &&\n  content !== undefined &&\n  content !== false &&\n  content !== true &&\n  content !== '';\n","export type TStepState = 'completed' | 'active' | 'upcoming';\n\n/**\n * The step that is the current one: `activeStep` kept inside the steps. A number past the ends (or\n * with a fraction) is put on the nearest step, and `NaN` is the first, so a wrong value never makes\n * every step look completed or none look current.\n */\nexport const getCurrentStep = (activeStep: number, count: number) =>\n  Number.isNaN(activeStep)\n    ? 0\n    : Math.min(Math.max(Math.trunc(activeStep), 0), Math.max(count - 1, 0));\n\nexport const getStepState = (index: number, currentStep: number): TStepState => {\n  if (index < currentStep) return 'completed';\n\n  return index === currentStep ? 'active' : 'upcoming';\n};\n","import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/*\n * The tick of a completed step. Iconify downloads an icon from its API the first time it is shown,\n * which cannot work offline and leaves an empty circle until it arrives, so the icon is bundled here\n * and registered with Iconify (the same way as the toast icons, see `toast-icons.ts`).\n *\n * An icon a step asks for with `icon: 'solar:...'` is the app's and is downloaded as usual; add it to\n * the app with `addCollection` when it has to show without a network.\n *\n * The data is what `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst STEPPER_ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'check-read-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4 12.9L7.14286 16.5L15 7.5\"/><path d=\"M20 7.5625L11.4283 16.5625L11 16\"/></g>',\n      },\n    },\n  },\n];\n\nlet registered = false;\n\n/**\n * Registers the icons above with Iconify. `Stepper` calls it when it renders, not when this file is\n * imported: an app that never renders a stepper never runs it, and nothing depends on the bundler\n * keeping an import that is only there for its effect (see `toast-icons.ts`). Calling it again is\n * harmless.\n */\nexport const registerStepperIcons = () => {\n  if (registered) return;\n\n  for (const iconSet of STEPPER_ICON_SETS) addCollection(iconSet);\n  registered = true;\n};\n\n/** Every icon name registered above, e.g. `solar:check-read-linear`. */\nexport const STEPPER_ICON_NAMES = STEPPER_ICON_SETS.flatMap(({ prefix, icons }) =>\n  Object.keys(icons).map((name) => `${prefix}:${name}`),\n);\n","import { Icon } from '@iconify/react';\nimport type { ComponentProps, CSSProperties } from 'react';\n\nimport { hasContent } from '../lib/content.js';\nimport { getCurrentStep, getStepState, type TStepState } from '../lib/stepper.js';\nimport { registerStepperIcons } from './stepper-icons.js';\n\nexport interface IStepperStep {\n  title: string;\n  description?: string;\n  /**\n   * An Iconify name (`'solar:user-linear'`) shown in the circle while the step is not completed; the\n   * step's number if left out. Iconify downloads it the first time it is shown and draws it in the\n   * browser, not on a server: to have it without a network, bundle it in the app (`addCollection`).\n   */\n  icon?: string;\n  /** Cannot be clicked. Only matters when `onStepClick` is given. */\n  disabled?: boolean;\n}\n\nexport interface IStepper extends ComponentProps<'div'> {\n  steps: readonly IStepperStep[];\n  /** The index of the current step: the ones before it are completed, the ones after it are upcoming. */\n  activeStep: number;\n  /** Makes the steps buttons. It gets the index of the step that was clicked. */\n  onStepClick?: (step: number) => void;\n  /** Names the list of steps for assistive technology, e.g. `\"Checkout progress\"`. */\n  label?: string;\n  /**\n   * What assistive technology reads before the title of a completed step, which otherwise only shows\n   * a tick.\n   * @default 'Completed'\n   */\n  completedLabel?: string;\n}\n\nconst ITEM_CSS =\n  'group relative flex min-w-0 items-start gap-3 text-left md:flex-col md:items-center md:gap-3 md:px-2';\n// No `outline-hidden`: 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 CLICKABLE_CSS =\n  'cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-crayola-c disabled:cursor-not-allowed disabled:opacity-50';\n\nconst CIRCLE_CSS =\n  'relative z-1 flex size-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-300 motion-reduce:transition-none md:size-11';\n\n// `Record`s: a new state is a type error here until it has a look. Every state also looks different\n// in forced-colors mode (Windows high contrast), where backgrounds and shadows are not drawn.\nconst CIRCLE_STATE_CSS: Record<TStepState, string> = {\n  completed:\n    'border-blue-crayola-c bg-accent-duo text-white shadow-[0_8px_24px_rgba(var(--blue-crayola-c-rgb),0.28)] forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:bg-none forced-colors:text-[HighlightText]',\n  active:\n    'border-blue-crayola-c bg-primary-invert text-primary shadow-[0_0_0_5px_rgba(var(--blue-crayola-c-rgb),0.12)] forced-colors:border-[Highlight] forced-colors:border-4',\n  upcoming:\n    'border-primary/20 bg-primary-invert text-primary/60 forced-colors:border-[GrayText] forced-colors:text-[GrayText]',\n};\n\nconst TITLE_STATE_CSS: Record<TStepState, string> = {\n  completed: 'text-primary/80',\n  active: 'text-primary',\n  upcoming: 'text-primary/45 forced-colors:text-[GrayText]',\n};\n\nconst DESCRIPTION_STATE_CSS: Record<TStepState, string> = {\n  completed: 'text-primary/35',\n  active: 'text-secondary',\n  upcoming: 'text-primary/35 forced-colors:text-[GrayText]',\n};\n\nconst CONNECTOR_BASE_CSS =\n  'absolute top-10 left-5 h-4 w-0.5 -translate-x-1/2 md:top-5 md:left-[calc(50%+1.375rem)] md:h-0.5 md:w-[calc(100%-2.75rem)] md:translate-x-0';\n\n/**\n * A row of steps with the current one marked, for a checkout, a sign-up or any other wizard. The\n * steps are an ordered list; the current one has `aria-current=\"step\"`. With `onStepClick` the steps\n * are buttons, and the content in `children` is shown under them.\n */\nexport const Stepper = ({\n  steps,\n  activeStep,\n  onStepClick,\n  label,\n  completedLabel = 'Completed',\n  className = '',\n  children,\n  ...divProps\n}: IStepper) => {\n  registerStepperIcons();\n\n  const currentStep = getCurrentStep(activeStep, steps.length);\n\n  return (\n    <div\n      {...divProps}\n      className={`flex w-full flex-col gap-6 p-4 shadow-sm sm:p-5 lg:p-6 ${className}`}\n    >\n      {steps.length > 0 && (\n        <ol\n          aria-label={label}\n          style={{ '--steps-count': steps.length } as CSSProperties}\n          className=\"m-0 flex list-none flex-col gap-4 p-0 md:grid md:grid-cols-[repeat(var(--steps-count),minmax(0,1fr))] md:gap-0\"\n        >\n          {steps.map((step, index) => {\n            const state = getStepState(index, currentStep);\n            const hasNextStep = index < steps.length - 1;\n\n            const content = (\n              <>\n                {hasNextStep && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={`${CONNECTOR_BASE_CSS} ${\n                      state === 'completed'\n                        ? 'bg-accent-duo forced-colors:bg-[Highlight] forced-colors:bg-none'\n                        : 'bg-primary/20 forced-colors:bg-[GrayText]'\n                    }`}\n                  />\n                )}\n\n                <span aria-hidden=\"true\" className={`${CIRCLE_CSS} ${CIRCLE_STATE_CSS[state]}`}>\n                  {state === 'completed' ? (\n                    <Icon icon=\"solar:check-read-linear\" className=\"size-5\" />\n                  ) : step.icon ? (\n                    <Icon icon={step.icon} className=\"size-5\" />\n                  ) : (\n                    index + 1\n                  )}\n                </span>\n\n                <span className=\"flex min-w-0 flex-1 flex-col gap-1 pt-0.5 md:items-center md:pt-0 md:text-center\">\n                  <span\n                    className={`line-clamp-1 text-sm font-semibold md:text-[13px] lg:text-sm ${TITLE_STATE_CSS[state]}`}\n                  >\n                    {state === 'completed' && (\n                      <span className=\"sr-only\">{`${completedLabel}: `}</span>\n                    )}\n                    {step.title}\n                  </span>\n                  {hasContent(step.description) && (\n                    <span\n                      className={`line-clamp-1 text-xs leading-4 md:line-clamp-2 ${DESCRIPTION_STATE_CSS[state]}`}\n                    >\n                      {step.description}\n                    </span>\n                  )}\n                </span>\n              </>\n            );\n\n            return (\n              // The steps are a fixed order that is never sorted or filtered, and two can have the\n              // same title: the place is what tells them apart.\n              <li\n                key={index}\n                data-state={state}\n                aria-current={state === 'active' ? 'step' : undefined}\n              >\n                {onStepClick ? (\n                  <button\n                    type=\"button\"\n                    disabled={step.disabled}\n                    onClick={() => {\n                      onStepClick(index);\n                    }}\n                    className={`${ITEM_CSS} ${CLICKABLE_CSS} w-full`}\n                  >\n                    {content}\n                  </button>\n                ) : (\n                  <div className={`${ITEM_CSS} cursor-default`}>{content}</div>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      )}\n\n      {hasContent(children) && <div className=\"border-primary/10 border-t pt-5\">{children}</div>}\n    </div>\n  );\n};\n"]}

package/dist/stepper/index.d.cts

@@ -0,0 +1,2 @@
+export { type IStepper, type IStepperStep, Stepper } from './Stepper.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/stepper/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { type IStepper, type IStepperStep, Stepper } from './Stepper.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}