@openwarelabs/blocks 0.0.0-stage → 0.6.0

package/dist/index.js

@@ -0,0 +1,347 @@
+// blocks/src/heroes/Hero01/Hero01.tsx
+import { useId } from "react";
+import { Chip, cx, Text } from "@openwarelabs/ui";
+
+// blocks/src/shared/BlockActions.tsx
+import { Button, buttonClassName } from "@openwarelabs/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BlockActionButton({ action, variant }) {
+  const { label, href, onClick, startIcon, endIcon, target, "aria-label": ariaLabel } = action;
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: buttonClassName({ variant, size: "lg", shape: "pill" }),
+        href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        "aria-label": ariaLabel,
+        onClick,
+        children: [
+          startIcon ? /* @__PURE__ */ jsx("span", { className: "ow-button__icon", children: startIcon }) : null,
+          label,
+          endIcon ? /* @__PURE__ */ jsx("span", { className: "ow-button__icon", children: endIcon }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Button, { variant, shape: "pill", size: "lg", startIcon, endIcon, "aria-label": ariaLabel, onClick, children: label });
+}
+function BlockActions({ primary, secondary, className }) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(BlockActionButton, { action: primary, variant: "primary" }),
+    secondary ? /* @__PURE__ */ jsx(BlockActionButton, { action: secondary, variant: "secondary" }) : null
+  ] });
+}
+
+// blocks/src/heroes/Hero01/Hero01.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Hero01({ eyebrow, title, description, primaryAction, secondaryAction, note, visual, className, ...props }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs2("section", { className: cx("ow-hero01", className), "aria-labelledby": titleId, ...props, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ow-hero01__inner", children: [
+      eyebrow ? /* @__PURE__ */ jsx2(Chip, { children: eyebrow }) : null,
+      /* @__PURE__ */ jsx2(Text, { variant: "hero", align: "center", id: titleId, className: "ow-hero01__title", children: title }),
+      /* @__PURE__ */ jsx2(Text, { variant: "lead", align: "center", className: "ow-hero01__lead", children: description }),
+      /* @__PURE__ */ jsx2(BlockActions, { className: "ow-hero01__actions", primary: primaryAction, secondary: secondaryAction }),
+      note ? /* @__PURE__ */ jsx2(Text, { variant: "caption", as: "p", className: "ow-hero01__note", children: note }) : null
+    ] }),
+    visual ? /* @__PURE__ */ jsx2("div", { className: "ow-hero01__visual", children: visual }) : null
+  ] });
+}
+
+// blocks/src/heroes/Hero02/Hero02.tsx
+import { useId as useId2 } from "react";
+import { Chip as Chip2, cx as cx2, Text as Text2 } from "@openwarelabs/ui";
+
+// blocks/src/shared/icons.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var icon = (paths) => function BlockIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: paths
+    }
+  );
+};
+var CheckIcon = icon(/* @__PURE__ */ jsx3("path", { d: "M20 6 9 17l-5-5" }));
+var MailIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }),
+    /* @__PURE__ */ jsx3("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" })
+  ] })
+);
+var DownloadIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M12 15V3" }),
+    /* @__PURE__ */ jsx3("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx3("path", { d: "m7 10 5 5 5-5" })
+  ] })
+);
+
+// blocks/src/heroes/Hero02/Hero02.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Hero02({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }) {
+  const titleId = useId2();
+  return /* @__PURE__ */ jsx4("section", { className: cx2("ow-hero02", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs4("div", { className: "ow-hero02__inner", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ow-hero02__text", children: [
+      eyebrow ? /* @__PURE__ */ jsx4(Chip2, { children: eyebrow }) : null,
+      /* @__PURE__ */ jsx4(Text2, { variant: "page-title", id: titleId, className: "ow-hero02__title", children: title }),
+      /* @__PURE__ */ jsx4(Text2, { variant: "lead", className: "ow-hero02__lead", children: description }),
+      /* @__PURE__ */ jsx4(BlockActions, { className: "ow-hero02__actions", primary: primaryAction, secondary: secondaryAction }),
+      points?.length ? /* @__PURE__ */ jsx4("ul", { className: "ow-hero02__points", children: points.map((point, index) => /* @__PURE__ */ jsxs4(Text2, { as: "li", tone: "muted", className: "ow-hero02__point", children: [
+        /* @__PURE__ */ jsx4(CheckIcon, { size: 15 }),
+        point
+      ] }, index)) }) : null
+    ] }),
+    visual
+  ] }) });
+}
+
+// blocks/src/heroes/Hero03/Hero03.tsx
+import { useEffect, useId as useId3, useRef, useState } from "react";
+import { Button as Button2, Chip as Chip3, cx as cx3, Input, Text as Text3 } from "@openwarelabs/ui";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function Hero03({
+  eyebrow,
+  title,
+  description,
+  submitLabel,
+  onSubmit,
+  note,
+  successTitle,
+  successDescription,
+  visual,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState(null);
+  const [sending, setSending] = useState(false);
+  const [joined, setJoined] = useState(null);
+  const inputRef = useRef(null);
+  const doneRef = useRef(null);
+  const touched = useRef(false);
+  const id = useId3();
+  const titleId = `${id}-title`;
+  useEffect(() => {
+    if (!touched.current) return;
+    if (joined) doneRef.current?.focus();
+    else inputRef.current?.focus();
+  }, [joined]);
+  const submit = async (event) => {
+    event.preventDefault();
+    const value = email.trim();
+    const problem = !value ? labels.empty ?? "Enter your work email to join the waitlist." : !emailPattern.test(value) ? labels.invalid ?? "That doesn't look like an email address. Try one like maya@example.com." : null;
+    setError(problem);
+    if (problem) {
+      inputRef.current?.focus();
+      return;
+    }
+    setSending(true);
+    try {
+      await onSubmit(value);
+      touched.current = true;
+      setJoined(value);
+    } catch (failure) {
+      setError(failure instanceof Error && failure.message ? failure.message : labels.failed ?? "That didn't go through. Try again in a moment.");
+      inputRef.current?.focus();
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsx5("section", { className: cx3("ow-hero03", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs5("div", { className: "ow-hero03__inner", children: [
+    eyebrow ? /* @__PURE__ */ jsx5(Chip3, { children: eyebrow }) : null,
+    /* @__PURE__ */ jsx5(Text3, { variant: "hero", align: "center", id: titleId, className: "ow-hero03__title", children: title }),
+    /* @__PURE__ */ jsx5(Text3, { variant: "lead", align: "center", className: "ow-hero03__lead", children: description }),
+    joined ? /* @__PURE__ */ jsxs5("div", { ref: doneRef, className: "ow-hero03__done", tabIndex: -1, children: [
+      /* @__PURE__ */ jsx5("span", { className: "ow-hero03__done-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(CheckIcon, { size: 16 }) }),
+      /* @__PURE__ */ jsxs5("div", { className: "ow-hero03__done-text", children: [
+        /* @__PURE__ */ jsx5(Text3, { variant: "label", children: successTitle }),
+        successDescription ? /* @__PURE__ */ jsx5(Text3, { variant: "caption", as: "p", className: "ow-hero03__done-detail", children: successDescription(joined) }) : null
+      ] }),
+      /* @__PURE__ */ jsx5(
+        Button2,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            touched.current = true;
+            setJoined(null);
+          },
+          children: labels.change ?? "Change email"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs5("form", { className: "ow-hero03__form", noValidate: true, onSubmit: submit, children: [
+      /* @__PURE__ */ jsxs5("div", { className: "ow-hero03__row", children: [
+        /* @__PURE__ */ jsx5(
+          Input,
+          {
+            ref: inputRef,
+            className: "ow-hero03__input",
+            type: "email",
+            autoComplete: "email",
+            "aria-label": labels.email ?? "Work email",
+            "aria-describedby": error ? `${id}-error` : note ? `${id}-note` : void 0,
+            placeholder: labels.placeholder ?? "you@company.com",
+            startContent: /* @__PURE__ */ jsx5(MailIcon, { size: 16 }),
+            value: email,
+            isInvalid: Boolean(error),
+            onChange: (event) => {
+              setEmail(event.target.value);
+              if (error) setError(null);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(Button2, { type: "submit", variant: "primary", shape: "pill", size: "lg", loading: sending, children: submitLabel })
+      ] }),
+      error ? /* @__PURE__ */ jsx5(Text3, { tone: "danger", id: `${id}-error`, className: "ow-hero03__error", role: "alert", children: error }) : null,
+      note ? /* @__PURE__ */ jsx5(Text3, { variant: "caption", as: "p", id: `${id}-note`, className: "ow-hero03__note", children: note }) : null
+    ] }),
+    visual
+  ] }) });
+}
+
+// blocks/src/heroes/Hero04/Hero04.tsx
+import { useId as useId4 } from "react";
+import { Chip as Chip4, cx as cx4, DotGrid, Text as Text4 } from "@openwarelabs/ui";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function Hero04({ eyebrow, title, description, primaryAction, secondaryAction, start, end, interactive = true, className, ...props }) {
+  const titleId = useId4();
+  return /* @__PURE__ */ jsx6("section", { className: cx4("ow-hero04", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsx6(DotGrid, { fade: true, interactive, className: "ow-hero04__grid", children: /* @__PURE__ */ jsxs6("div", { className: "ow-hero04__layout", children: [
+    start,
+    /* @__PURE__ */ jsxs6("div", { className: "ow-hero04__text", children: [
+      eyebrow ? /* @__PURE__ */ jsx6(Chip4, { children: eyebrow }) : null,
+      /* @__PURE__ */ jsx6(Text4, { variant: "hero", align: "center", id: titleId, className: "ow-hero04__title", children: title }),
+      /* @__PURE__ */ jsx6(Text4, { variant: "lead", align: "center", className: "ow-hero04__lead", children: description }),
+      /* @__PURE__ */ jsx6(BlockActions, { className: "ow-hero04__actions", primary: primaryAction, secondary: secondaryAction })
+    ] }),
+    end
+  ] }) }) });
+}
+
+// blocks/src/heroes/Hero05/Hero05.tsx
+import { useId as useId5 } from "react";
+import { Chip as Chip5, cx as cx5, Text as Text5 } from "@openwarelabs/ui";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function Hero05({ eyebrow, title, description, primaryAction, secondaryAction, logosTitle, logos, className, ...props }) {
+  const id = useId5();
+  return /* @__PURE__ */ jsx7("section", { className: cx5("ow-hero05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__inner", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__top", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__heading", children: [
+        eyebrow ? /* @__PURE__ */ jsx7(Chip5, { children: eyebrow }) : null,
+        /* @__PURE__ */ jsx7(Text5, { variant: "hero", id: `${id}-title`, className: "ow-hero05__title", children: title })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx7(Text5, { variant: "lead", children: description }),
+        /* @__PURE__ */ jsx7(BlockActions, { className: "ow-hero05__actions", primary: primaryAction, secondary: secondaryAction })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__proof", children: [
+      /* @__PURE__ */ jsx7(Text5, { tone: "muted", id: `${id}-logos`, children: logosTitle }),
+      /* @__PURE__ */ jsx7("ul", { className: "ow-hero05__list", "aria-labelledby": `${id}-logos`, children: logos.map((logo) => /* @__PURE__ */ jsx7("li", { className: "ow-hero05__logo", children: logo.logo }, logo.name)) })
+    ] })
+  ] }) });
+}
+
+// blocks/src/heroes/Hero06/Hero06.tsx
+import { useEffect as useEffect2, useId as useId6, useState as useState2 } from "react";
+import { Button as Button3, buttonClassName as buttonClassName2, Chip as Chip6, cx as cx6, Link, Text as Text6 } from "@openwarelabs/ui";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function detectPlatform() {
+  const nav = navigator;
+  const name = `${nav.userAgentData?.platform ?? ""} ${navigator.platform} ${navigator.userAgent}`.toLowerCase();
+  if (/android|iphone|ipad|ipod/.test(name) || name.includes("mac") && navigator.maxTouchPoints > 1) return null;
+  if (name.includes("mac")) return "mac";
+  if (name.includes("win")) return "windows";
+  if (name.includes("linux") || name.includes("x11")) return "linux";
+  return null;
+}
+var defaultLabel = (name) => `Download for ${name}`;
+function Hero06({
+  eyebrow,
+  title,
+  description,
+  platforms,
+  version,
+  otherDownloads,
+  downloadLabel = defaultLabel,
+  visual,
+  className,
+  ...props
+}) {
+  const titleId = useId6();
+  const [detected, setDetected] = useState2(null);
+  useEffect2(() => setDetected(detectPlatform()), []);
+  const current = platforms.find((platform) => platform.id === detected) ?? platforms[0];
+  const order = current ? [current, ...platforms.filter((platform) => platform !== current)] : [];
+  const button = (platform, primary) => {
+    const label = downloadLabel(platform.name);
+    const content = primary ? label : platform.name;
+    const icon2 = primary ? /* @__PURE__ */ jsx8(DownloadIcon, { size: 16 }) : null;
+    if (platform.href !== void 0) {
+      return /* @__PURE__ */ jsxs8(
+        "a",
+        {
+          className: buttonClassName2({ variant: primary ? "primary" : "secondary", size: "lg", shape: "pill" }),
+          href: platform.href,
+          "aria-label": primary ? void 0 : label,
+          onClick: platform.onDownload,
+          children: [
+            icon2 ? /* @__PURE__ */ jsx8("span", { className: "ow-button__icon", children: icon2 }) : null,
+            content
+          ]
+        },
+        platform.id
+      );
+    }
+    return /* @__PURE__ */ jsx8(
+      Button3,
+      {
+        variant: primary ? "primary" : "secondary",
+        shape: "pill",
+        size: "lg",
+        startIcon: icon2,
+        "aria-label": primary ? void 0 : label,
+        onClick: platform.onDownload,
+        children: content
+      },
+      platform.id
+    );
+  };
+  return /* @__PURE__ */ jsx8("section", { className: cx6("ow-hero06", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs8("div", { className: "ow-hero06__inner", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "ow-hero06__text", children: [
+      eyebrow ? /* @__PURE__ */ jsx8(Chip6, { children: eyebrow }) : null,
+      /* @__PURE__ */ jsx8(Text6, { variant: "page-title", id: titleId, className: "ow-hero06__title", children: title }),
+      /* @__PURE__ */ jsx8(Text6, { variant: "lead", className: "ow-hero06__lead", children: description }),
+      /* @__PURE__ */ jsx8("div", { className: "ow-hero06__buttons", children: order.map((platform, index) => button(platform, index === 0)) }),
+      version || current?.requirement || otherDownloads ? /* @__PURE__ */ jsxs8(Text6, { variant: "caption", as: "p", className: "ow-hero06__meta", children: [
+        version ? /* @__PURE__ */ jsx8("span", { children: version }) : null,
+        current?.requirement ? /* @__PURE__ */ jsx8("span", { children: current.requirement }) : null,
+        otherDownloads ? /* @__PURE__ */ jsx8("span", { className: "ow-hero06__other", children: /* @__PURE__ */ jsx8(Link, { href: otherDownloads.href, variant: "muted", children: otherDownloads.label }) }) : null
+      ] }) : null
+    ] }),
+    visual
+  ] }) });
+}
+export {
+  Hero01,
+  Hero02,
+  Hero03,
+  Hero04,
+  Hero05,
+  Hero06
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/heroes/Hero01/Hero01.tsx", "../src/shared/BlockActions.tsx", "../src/heroes/Hero02/Hero02.tsx", "../src/shared/icons.tsx", "../src/heroes/Hero03/Hero03.tsx", "../src/heroes/Hero04/Hero04.tsx", "../src/heroes/Hero05/Hero05.tsx", "../src/heroes/Hero06/Hero06.tsx"],
+  "sourcesContent": ["import { useId } from \"react\";\n\nimport { Chip, cx, Text } from \"@openwarelabs/ui\";\n\nimport { BlockActions } from \"@blocks/shared/BlockActions\";\nimport type { Hero01Props } from \"./Hero01.types\";\n\n/** A centred hero: an eyebrow, the headline, a lead, two actions and a note, with the product below, running on into the page. */\nexport function Hero01({ eyebrow, title, description, primaryAction, secondaryAction, note, visual, className, ...props }: Hero01Props) {\n    const titleId = useId();\n    return (\n        <section className={cx(\"ow-hero01\", className)} aria-labelledby={titleId} {...props}>\n            <div className=\"ow-hero01__inner\">\n                {eyebrow ? <Chip>{eyebrow}</Chip> : null}\n                <Text variant=\"hero\" align=\"center\" id={titleId} className=\"ow-hero01__title\">\n                    {title}\n                </Text>\n                <Text variant=\"lead\" align=\"center\" className=\"ow-hero01__lead\">\n                    {description}\n                </Text>\n                <BlockActions className=\"ow-hero01__actions\" primary={primaryAction} secondary={secondaryAction} />\n                {note ? (\n                    <Text variant=\"caption\" as=\"p\" className=\"ow-hero01__note\">\n                        {note}\n                    </Text>\n                ) : null}\n            </div>\n            {visual ? <div className=\"ow-hero01__visual\">{visual}</div> : null}\n        </section>\n    );\n}\n", "import { Button, buttonClassName } from \"@openwarelabs/ui\";\n\nimport type { BlockActionButtonProps, BlockActionsProps } from \"@blocks/shared/shared.types\";\n\n/** One action as a large pill: a link styled as a button when it has an href, a button otherwise. */\nexport function BlockActionButton({ action, variant }: BlockActionButtonProps) {\n    const { label, href, onClick, startIcon, endIcon, target, \"aria-label\": ariaLabel } = action;\n    if (href !== undefined) {\n        return (\n            <a\n                className={buttonClassName({ variant, size: \"lg\", shape: \"pill\" })}\n                href={href}\n                target={target}\n                rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n                aria-label={ariaLabel}\n                onClick={onClick}\n            >\n                {startIcon ? <span className=\"ow-button__icon\">{startIcon}</span> : null}\n                {label}\n                {endIcon ? <span className=\"ow-button__icon\">{endIcon}</span> : null}\n            </a>\n        );\n    }\n    return (\n        <Button variant={variant} shape=\"pill\" size=\"lg\" startIcon={startIcon} endIcon={endIcon} aria-label={ariaLabel} onClick={onClick}>\n            {label}\n        </Button>\n    );\n}\n\n/** The primary action and an optional secondary one, side by side. */\nexport function BlockActions({ primary, secondary, className }: BlockActionsProps) {\n    return (\n        <div className={className}>\n            <BlockActionButton action={primary} variant=\"primary\" />\n            {secondary ? <BlockActionButton action={secondary} variant=\"secondary\" /> : null}\n        </div>\n    );\n}\n", "import { useId } from \"react\";\n\nimport { Chip, cx, Text } from \"@openwarelabs/ui\";\n\nimport { BlockActions } from \"@blocks/shared/BlockActions\";\nimport { CheckIcon } from \"@blocks/shared/icons\";\nimport type { Hero02Props } from \"./Hero02.types\";\n\n/** A split hero: the words on the left and the product on the right. They stack on phones. */\nexport function Hero02({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }: Hero02Props) {\n    const titleId = useId();\n    return (\n        <section className={cx(\"ow-hero02\", className)} aria-labelledby={titleId} {...props}>\n            <div className=\"ow-hero02__inner\">\n                <div className=\"ow-hero02__text\">\n                    {eyebrow ? <Chip>{eyebrow}</Chip> : null}\n                    <Text variant=\"page-title\" id={titleId} className=\"ow-hero02__title\">\n                        {title}\n                    </Text>\n                    <Text variant=\"lead\" className=\"ow-hero02__lead\">\n                        {description}\n                    </Text>\n                    <BlockActions className=\"ow-hero02__actions\" primary={primaryAction} secondary={secondaryAction} />\n                    {points?.length ? (\n                        <ul className=\"ow-hero02__points\">\n                            {points.map((point, index) => (\n                                <Text as=\"li\" key={index} tone=\"muted\" className=\"ow-hero02__point\">\n                                    <CheckIcon size={15} />\n                                    {point}\n                                </Text>\n                            ))}\n                        </ul>\n                    ) : null}\n                </div>\n                {visual}\n            </div>\n        </section>\n    );\n}\n", "import type { ReactNode } from \"react\";\n\nimport type { BlockIconProps } from \"@blocks/shared/shared.types\";\n\n// The few icons the blocks draw themselves, as Lucide shapes (ISC licence), so the package needs no icon library.\nconst icon = (paths: ReactNode) =>\n    function BlockIcon({ size = 16 }: BlockIconProps) {\n        return (\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width={size}\n                height={size}\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden=\"true\"\n            >\n                {paths}\n            </svg>\n        );\n    };\n\nexport const CheckIcon = icon(<path d=\"M20 6 9 17l-5-5\" />);\nexport const MailIcon = icon(\n    <>\n        <path d=\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\" />\n        <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" />\n    </>,\n);\nexport const DownloadIcon = icon(\n    <>\n        <path d=\"M12 15V3\" />\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <path d=\"m7 10 5 5 5-5\" />\n    </>,\n);\n", "import { useEffect, useId, useRef, useState, type FormEvent } from \"react\";\n\nimport { Button, Chip, cx, Input, Text } from \"@openwarelabs/ui\";\n\nimport { CheckIcon, MailIcon } from \"@blocks/shared/icons\";\nimport type { Hero03Props } from \"./Hero03.types\";\n\nconst emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n/** A hero with an email field: join a waitlist or start a trial in one step, with a confirmation in place of the form. */\nexport function Hero03({\n    eyebrow,\n    title,\n    description,\n    submitLabel,\n    onSubmit,\n    note,\n    successTitle,\n    successDescription,\n    visual,\n    labels = {},\n    className,\n    ...props\n}: Hero03Props) {\n    const [email, setEmail] = useState(\"\");\n    const [error, setError] = useState<string | null>(null);\n    const [sending, setSending] = useState(false);\n    const [joined, setJoined] = useState<string | null>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const doneRef = useRef<HTMLDivElement>(null);\n    const touched = useRef(false);\n    const id = useId();\n    const titleId = `${id}-title`;\n\n    // Moving between the form and the confirmation, take focus along so it isn't lost with the element that had it.\n    useEffect(() => {\n        if (!touched.current) return;\n        if (joined) doneRef.current?.focus();\n        else inputRef.current?.focus();\n    }, [joined]);\n\n    const submit = async (event: FormEvent<HTMLFormElement>) => {\n        event.preventDefault();\n        const value = email.trim();\n        const problem = !value\n            ? (labels.empty ?? \"Enter your work email to join the waitlist.\")\n            : !emailPattern.test(value)\n              ? (labels.invalid ?? \"That doesn't look like an email address. Try one like maya@example.com.\")\n              : null;\n        setError(problem);\n        if (problem) {\n            inputRef.current?.focus();\n            return;\n        }\n        setSending(true);\n        try {\n            await onSubmit(value);\n            touched.current = true;\n            setJoined(value);\n        } catch (failure) {\n            setError(failure instanceof Error && failure.message ? failure.message : (labels.failed ?? \"That didn't go through. Try again in a moment.\"));\n            inputRef.current?.focus();\n        } finally {\n            setSending(false);\n        }\n    };\n\n    return (\n        <section className={cx(\"ow-hero03\", className)} aria-labelledby={titleId} {...props}>\n            <div className=\"ow-hero03__inner\">\n                {eyebrow ? <Chip>{eyebrow}</Chip> : null}\n                <Text variant=\"hero\" align=\"center\" id={titleId} className=\"ow-hero03__title\">\n                    {title}\n                </Text>\n                <Text variant=\"lead\" align=\"center\" className=\"ow-hero03__lead\">\n                    {description}\n                </Text>\n\n                {joined ? (\n                    <div ref={doneRef} className=\"ow-hero03__done\" tabIndex={-1}>\n                        <span className=\"ow-hero03__done-icon\" aria-hidden=\"true\">\n                            <CheckIcon size={16} />\n                        </span>\n                        <div className=\"ow-hero03__done-text\">\n                            <Text variant=\"label\">{successTitle}</Text>\n                            {successDescription ? (\n                                <Text variant=\"caption\" as=\"p\" className=\"ow-hero03__done-detail\">\n                                    {successDescription(joined)}\n                                </Text>\n                            ) : null}\n                        </div>\n                        <Button\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            onClick={() => {\n                                touched.current = true;\n                                setJoined(null);\n                            }}\n                        >\n                            {labels.change ?? \"Change email\"}\n                        </Button>\n                    </div>\n                ) : (\n                    <form className=\"ow-hero03__form\" noValidate onSubmit={submit}>\n                        <div className=\"ow-hero03__row\">\n                            <Input\n                                ref={inputRef}\n                                className=\"ow-hero03__input\"\n                                type=\"email\"\n                                autoComplete=\"email\"\n                                aria-label={labels.email ?? \"Work email\"}\n                                aria-describedby={error ? `${id}-error` : note ? `${id}-note` : undefined}\n                                placeholder={labels.placeholder ?? \"you@company.com\"}\n                                startContent={<MailIcon size={16} />}\n                                value={email}\n                                isInvalid={Boolean(error)}\n                                onChange={(event) => {\n                                    setEmail(event.target.value);\n                                    if (error) setError(null);\n                                }}\n                            />\n                            <Button type=\"submit\" variant=\"primary\" shape=\"pill\" size=\"lg\" loading={sending}>\n                                {submitLabel}\n                            </Button>\n                        </div>\n                        {error ? (\n                            <Text tone=\"danger\" id={`${id}-error`} className=\"ow-hero03__error\" role=\"alert\">\n                                {error}\n                            </Text>\n                        ) : null}\n                        {note ? (\n                            <Text variant=\"caption\" as=\"p\" id={`${id}-note`} className=\"ow-hero03__note\">\n                                {note}\n                            </Text>\n                        ) : null}\n                    </form>\n                )}\n\n                {visual}\n            </div>\n        </section>\n    );\n}\n", "import { useId } from \"react\";\n\nimport { Chip, cx, DotGrid, Text } from \"@openwarelabs/ui\";\n\nimport { BlockActions } from \"@blocks/shared/BlockActions\";\nimport type { Hero04Props } from \"./Hero04.types\";\n\n/** A hero on Openware's dot grid, with the dots turning brass under the pointer and room for something either side. */\nexport function Hero04({ eyebrow, title, description, primaryAction, secondaryAction, start, end, interactive = true, className, ...props }: Hero04Props) {\n    const titleId = useId();\n    return (\n        <section className={cx(\"ow-hero04\", className)} aria-labelledby={titleId} {...props}>\n            <DotGrid fade interactive={interactive} className=\"ow-hero04__grid\">\n                <div className=\"ow-hero04__layout\">\n                    {start}\n                    <div className=\"ow-hero04__text\">\n                        {eyebrow ? <Chip>{eyebrow}</Chip> : null}\n                        <Text variant=\"hero\" align=\"center\" id={titleId} className=\"ow-hero04__title\">\n                            {title}\n                        </Text>\n                        <Text variant=\"lead\" align=\"center\" className=\"ow-hero04__lead\">\n                            {description}\n                        </Text>\n                        <BlockActions className=\"ow-hero04__actions\" primary={primaryAction} secondary={secondaryAction} />\n                    </div>\n                    {end}\n                </div>\n            </DotGrid>\n        </section>\n    );\n}\n", "import { useId } from \"react\";\n\nimport { Chip, cx, Text } from \"@openwarelabs/ui\";\n\nimport { BlockActions } from \"@blocks/shared/BlockActions\";\nimport type { Hero05Props } from \"./Hero05.types\";\n\n/** The usual hero, with the headline beside the lead, then a row of customers' logos as the first proof. */\nexport function Hero05({ eyebrow, title, description, primaryAction, secondaryAction, logosTitle, logos, className, ...props }: Hero05Props) {\n    const id = useId();\n    return (\n        <section className={cx(\"ow-hero05\", className)} aria-labelledby={`${id}-title`} {...props}>\n            <div className=\"ow-hero05__inner\">\n                <div className=\"ow-hero05__top\">\n                    <div className=\"ow-hero05__heading\">\n                        {eyebrow ? <Chip>{eyebrow}</Chip> : null}\n                        <Text variant=\"hero\" id={`${id}-title`} className=\"ow-hero05__title\">\n                            {title}\n                        </Text>\n                    </div>\n                    <div>\n                        <Text variant=\"lead\">{description}</Text>\n                        <BlockActions className=\"ow-hero05__actions\" primary={primaryAction} secondary={secondaryAction} />\n                    </div>\n                </div>\n\n                <div className=\"ow-hero05__proof\">\n                    <Text tone=\"muted\" id={`${id}-logos`}>\n                        {logosTitle}\n                    </Text>\n                    <ul className=\"ow-hero05__list\" aria-labelledby={`${id}-logos`}>\n                        {logos.map((logo) => (\n                            <li key={logo.name} className=\"ow-hero05__logo\">\n                                {logo.logo}\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n}\n", "import { useEffect, useId, useState } from \"react\";\n\nimport { Button, buttonClassName, Chip, cx, Link, Text } from \"@openwarelabs/ui\";\n\nimport { DownloadIcon } from \"@blocks/shared/icons\";\nimport type { Hero06Platform, Hero06PlatformId, Hero06Props } from \"./Hero06.types\";\n\n/** The computer this page is open on, or null for phones, tablets and anything unknown. */\nfunction detectPlatform(): Hero06PlatformId | null {\n    const nav = navigator as Navigator & { userAgentData?: { platform?: string } };\n    const name = `${nav.userAgentData?.platform ?? \"\"} ${navigator.platform} ${navigator.userAgent}`.toLowerCase();\n    if (/android|iphone|ipad|ipod/.test(name) || (name.includes(\"mac\") && navigator.maxTouchPoints > 1)) return null;\n    if (name.includes(\"mac\")) return \"mac\";\n    if (name.includes(\"win\")) return \"windows\";\n    if (name.includes(\"linux\") || name.includes(\"x11\")) return \"linux\";\n    return null;\n}\n\nconst defaultLabel = (name: string) => `Download for ${name}`;\n\n/** A hero for a desktop app: a download button for each system, with the visitor's own first, and the app beside it. */\nexport function Hero06({\n    eyebrow,\n    title,\n    description,\n    platforms,\n    version,\n    otherDownloads,\n    downloadLabel = defaultLabel,\n    visual,\n    className,\n    ...props\n}: Hero06Props) {\n    const titleId = useId();\n    // Until the page knows which computer it's on (after it mounts), the first platform leads.\n    const [detected, setDetected] = useState<Hero06PlatformId | null>(null);\n    useEffect(() => setDetected(detectPlatform()), []);\n\n    const current = platforms.find((platform) => platform.id === detected) ?? platforms[0];\n    const order = current ? [current, ...platforms.filter((platform) => platform !== current)] : [];\n\n    const button = (platform: Hero06Platform, primary: boolean) => {\n        const label = downloadLabel(platform.name);\n        const content = primary ? label : platform.name;\n        const icon = primary ? <DownloadIcon size={16} /> : null;\n        if (platform.href !== undefined) {\n            return (\n                <a\n                    key={platform.id}\n                    className={buttonClassName({ variant: primary ? \"primary\" : \"secondary\", size: \"lg\", shape: \"pill\" })}\n                    href={platform.href}\n                    aria-label={primary ? undefined : label}\n                    onClick={platform.onDownload}\n                >\n                    {icon ? <span className=\"ow-button__icon\">{icon}</span> : null}\n                    {content}\n                </a>\n            );\n        }\n        return (\n            <Button\n                key={platform.id}\n                variant={primary ? \"primary\" : \"secondary\"}\n                shape=\"pill\"\n                size=\"lg\"\n                startIcon={icon}\n                aria-label={primary ? undefined : label}\n                onClick={platform.onDownload}\n            >\n                {content}\n            </Button>\n        );\n    };\n\n    return (\n        <section className={cx(\"ow-hero06\", className)} aria-labelledby={titleId} {...props}>\n            <div className=\"ow-hero06__inner\">\n                <div className=\"ow-hero06__text\">\n                    {eyebrow ? <Chip>{eyebrow}</Chip> : null}\n                    <Text variant=\"page-title\" id={titleId} className=\"ow-hero06__title\">\n                        {title}\n                    </Text>\n                    <Text variant=\"lead\" className=\"ow-hero06__lead\">\n                        {description}\n                    </Text>\n                    <div className=\"ow-hero06__buttons\">{order.map((platform, index) => button(platform, index === 0))}</div>\n                    {version || current?.requirement || otherDownloads ? (\n                        <Text variant=\"caption\" as=\"p\" className=\"ow-hero06__meta\">\n                            {version ? <span>{version}</span> : null}\n                            {current?.requirement ? <span>{current.requirement}</span> : null}\n                            {otherDownloads ? (\n                                <span className=\"ow-hero06__other\">\n                                    <Link href={otherDownloads.href} variant=\"muted\">\n                                        {otherDownloads.label}\n                                    </Link>\n                                </span>\n                            ) : null}\n                        </Text>\n                    ) : null}\n                </div>\n                {visual}\n            </div>\n        </section>\n    );\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useId", "Chip", "cx", "Text", "jsx", "jsxs", "jsx", "jsxs", "useId", "cx", "Chip", "Text", "useId", "Button", "Chip", "cx", "Text", "jsx", "jsxs", "useId", "cx", "Chip", "Text", "Button", "useId", "Chip", "cx", "Text", "jsx", "jsxs", "useId", "cx", "Chip", "Text", "useId", "Chip", "cx", "Text", "jsx", "jsxs", "useId", "cx", "Chip", "Text", "useEffect", "useId", "useState", "Button", "buttonClassName", "Chip", "cx", "Text", "jsx", "jsxs", "useId", "useState", "useEffect", "icon", "buttonClassName", "Button", "cx", "Chip", "Text"]
+}

package/dist/shared/BlockActions.d.cts

@@ -0,0 +1,5 @@
+import type { BlockActionButtonProps, BlockActionsProps } from "./shared.types.cjs";
+/** One action as a large pill: a link styled as a button when it has an href, a button otherwise. */
+export declare function BlockActionButton({ action, variant }: BlockActionButtonProps): import("react").JSX.Element;
+/** The primary action and an optional secondary one, side by side. */
+export declare function BlockActions({ primary, secondary, className }: BlockActionsProps): import("react").JSX.Element;

package/dist/shared/BlockActions.d.ts

@@ -0,0 +1,5 @@
+import type { BlockActionButtonProps, BlockActionsProps } from "./shared.types.js";
+/** One action as a large pill: a link styled as a button when it has an href, a button otherwise. */
+export declare function BlockActionButton({ action, variant }: BlockActionButtonProps): import("react").JSX.Element;
+/** The primary action and an optional secondary one, side by side. */
+export declare function BlockActions({ primary, secondary, className }: BlockActionsProps): import("react").JSX.Element;

package/dist/shared/icons.d.cts

@@ -0,0 +1,4 @@
+import type { BlockIconProps } from "./shared.types.cjs";
+export declare const CheckIcon: ({ size }: BlockIconProps) => import("react").JSX.Element;
+export declare const MailIcon: ({ size }: BlockIconProps) => import("react").JSX.Element;
+export declare const DownloadIcon: ({ size }: BlockIconProps) => import("react").JSX.Element;

package/dist/shared/icons.d.ts

@@ -0,0 +1,4 @@
+import type { BlockIconProps } from "./shared.types.js";
+export declare const CheckIcon: ({ size }: BlockIconProps) => import("react").JSX.Element;
+export declare const MailIcon: ({ size }: BlockIconProps) => import("react").JSX.Element;
+export declare const DownloadIcon: ({ size }: BlockIconProps) => import("react").JSX.Element;

package/dist/shared/shared.types.d.cts

@@ -0,0 +1,38 @@
+import type { MouseEvent, ReactNode } from "react";
+/**
+ * A call to action. With `href` it's a link styled as a button, so it works with any router's links as an
+ * ordinary <a>; without one it's a button that runs `onClick`.
+ */
+export interface BlockAction {
+    /** The button's words: name the action, in sentence case ("Start for free", never "Click here"). */
+    label: ReactNode;
+    /** Where it goes. Makes it a link. */
+    href?: string;
+    /** What it does, for a button (or as well as following the link). */
+    onClick?(event: MouseEvent<HTMLElement>): void;
+    /** A 16px icon before the label, usually from lucide-react. */
+    startIcon?: ReactNode;
+    /** A 16px icon after the label, such as an arrow. */
+    endIcon?: ReactNode;
+    /** For links: "_blank" opens a new tab (with rel="noopener noreferrer" added). */
+    target?: string;
+    /** Read out instead of the label, when the label alone isn't clear. */
+    "aria-label"?: string;
+}
+/** A plain text link. */
+export interface BlockLink {
+    label: ReactNode;
+    href: string;
+}
+export interface BlockActionButtonProps {
+    action: BlockAction;
+    variant: "primary" | "secondary";
+}
+export interface BlockActionsProps {
+    primary: BlockAction;
+    secondary?: BlockAction;
+    className: string;
+}
+export interface BlockIconProps {
+    size?: number;
+}

package/dist/shared/shared.types.d.ts

@@ -0,0 +1,38 @@
+import type { MouseEvent, ReactNode } from "react";
+/**
+ * A call to action. With `href` it's a link styled as a button, so it works with any router's links as an
+ * ordinary <a>; without one it's a button that runs `onClick`.
+ */
+export interface BlockAction {
+    /** The button's words: name the action, in sentence case ("Start for free", never "Click here"). */
+    label: ReactNode;
+    /** Where it goes. Makes it a link. */
+    href?: string;
+    /** What it does, for a button (or as well as following the link). */
+    onClick?(event: MouseEvent<HTMLElement>): void;
+    /** A 16px icon before the label, usually from lucide-react. */
+    startIcon?: ReactNode;
+    /** A 16px icon after the label, such as an arrow. */
+    endIcon?: ReactNode;
+    /** For links: "_blank" opens a new tab (with rel="noopener noreferrer" added). */
+    target?: string;
+    /** Read out instead of the label, when the label alone isn't clear. */
+    "aria-label"?: string;
+}
+/** A plain text link. */
+export interface BlockLink {
+    label: ReactNode;
+    href: string;
+}
+export interface BlockActionButtonProps {
+    action: BlockAction;
+    variant: "primary" | "secondary";
+}
+export interface BlockActionsProps {
+    primary: BlockAction;
+    secondary?: BlockAction;
+    className: string;
+}
+export interface BlockIconProps {
+    size?: number;
+}