@recipe-book/react 0.0.3 → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1224 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Image: () => Image,
+  Ingredient: () => Ingredient,
+  IngredientList: () => IngredientList,
+  IngredientName: () => IngredientName,
+  IngredientNote: () => IngredientNote,
+  IngredientOptional: () => IngredientOptional,
+  IngredientQuantity: () => IngredientQuantity,
+  Ingredients: () => Ingredients,
+  JsonLd: () => JsonLd,
+  RecipeBookProvider: () => RecipeBookProvider,
+  RecipeImage: () => Image,
+  RecipeIngredient: () => Ingredient,
+  RecipeIngredientList: () => IngredientList,
+  RecipeIngredientName: () => IngredientName,
+  RecipeIngredientNote: () => IngredientNote,
+  RecipeIngredientOptional: () => IngredientOptional,
+  RecipeIngredientQuantity: () => IngredientQuantity,
+  RecipeIngredients: () => Ingredients,
+  RecipeJsonLd: () => JsonLd,
+  RecipeRoot: () => Root,
+  RecipeServingsInput: () => ServingsInput,
+  RecipeServingsSelect: () => ServingsSelect,
+  RecipeStep: () => Step,
+  RecipeStepList: () => StepList,
+  RecipeStepName: () => StepName,
+  RecipeStepText: () => StepText,
+  RecipeSteps: () => Steps,
+  RecipeSystemOption: () => SystemOption,
+  RecipeSystemToggle: () => SystemToggle,
+  Root: () => Root,
+  ServingsInput: () => ServingsInput,
+  ServingsSelect: () => ServingsSelect,
+  Step: () => Step,
+  StepList: () => StepList,
+  StepName: () => StepName,
+  StepText: () => StepText,
+  Steps: () => Steps,
+  SystemOption: () => SystemOption,
+  SystemToggle: () => SystemToggle,
+  useFormatIngredient: () => useFormatIngredient,
+  useRecipe: () => useRecipe,
+  useRecipeState: () => useRecipeState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_core3 = require("@recipe-book/core");
+var import_react4 = require("react");
+
+// src/labels.ts
+var defaultLabels = {
+  servings: "Servings",
+  servingUnit: { one: "serving", other: "servings" },
+  system: "Measurement system",
+  metric: "Metric",
+  us: "US",
+  fan: "fan",
+  optional: "(optional)",
+  to: "to"
+};
+
+// src/react.ts
+var import_react = require("react");
+
+// src/state/use-recipe-state.ts
+var import_core2 = require("@recipe-book/core");
+var import_react3 = require("react");
+
+// src/is-parsed-recipe.ts
+var import_core = require("@recipe-book/core");
+function assertParsedRecipe(value, caller, fix) {
+  if (isFields(value) && typeof value.id === "string" && typeof value.name === "string" && isFields(value.times) && Array.isArray(value.times.custom) && Array.isArray(value.notes) && Array.isArray(value.equipment) && (value.servings === void 0 || isFields(value.servings) && typeof value.servings.amount === "number") && (value.yield === void 0 || isFields(value.yield) && typeof value.yield.amount === "number" && typeof value.yield.unit === "string") && isSections(
+    value.ingredients,
+    (item) => (
+      // Parts format each line with formatIngredient, which checks the name.
+      (item.quantity === void 0 || isFields(item.quantity) && (typeof item.quantity.amount === "number" || isFields(item.quantity.amount))) && Array.isArray(item.equivalents) && typeof item.optional === "boolean"
+    )
+  ) && isSections(value.steps, (item) => typeof item.text === "string")) {
+    return;
+  }
+  throw new import_core.RecipeBookError(
+    "invalid_argument",
+    `${caller}: recipe must be a parsed recipe, received ${value === void 0 || value === null ? String(value) : Array.isArray(value) ? "an array" : typeof value === "object" ? "an object that parseRecipe hasn't normalized" : `a ${typeof value}`}. ${fix}`
+  );
+}
+function isSections(value, isItem) {
+  return Array.isArray(value) && value.every(
+    (section) => isFields(section) && typeof section.id === "string" && Array.isArray(section.items) && section.items.every(
+      (item) => isFields(item) && typeof item.id === "string" && isItem(item)
+    )
+  );
+}
+function isFields(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/quote.ts
+var UNESCAPED_BY_JSON = /[\x80-\x9f\u061c\u200e\u200f\u2028-\u202e\u2066-\u2069]/g;
+function quote(text) {
+  const shown = text.length > 60 ? `${text.slice(0, 59).replace(/[\ud800-\udbff]$/, "")}\u2026` : text;
+  return JSON.stringify(shown).replace(
+    UNESCAPED_BY_JSON,
+    (char) => `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`
+  );
+}
+
+// src/state/use-controllable-state.ts
+var import_react2 = require("react");
+function useControllableState(options) {
+  const { value, defaultValue, onChange, resetKey } = options;
+  const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
+  const [internalResetKey, setInternalResetKey] = (0, import_react2.useState)(resetKey);
+  let uncontrolled = internal;
+  if (!Object.is(resetKey, internalResetKey)) {
+    setInternalResetKey(resetKey);
+    setInternal(defaultValue);
+    uncontrolled = defaultValue;
+  }
+  const current = value === void 0 ? uncontrolled : value;
+  const latest = (0, import_react2.useRef)({ value, current, onChange });
+  (0, import_react2.useInsertionEffect)(() => {
+    latest.current = { value, current, onChange };
+  });
+  const setValue = (0, import_react2.useCallback)((next) => {
+    const { value: value2, current: current2, onChange: onChange2 } = latest.current;
+    if (Object.is(next, current2)) return;
+    if (value2 === void 0) {
+      latest.current.current = next;
+      setInternal(next);
+    }
+    onChange2?.(next);
+  }, []);
+  if (process.env.NODE_ENV !== "production") {
+    const controlled = value !== void 0;
+    useModeWarnings(
+      options.prop,
+      controlled,
+      controlled && onChange === void 0
+    );
+  }
+  return [current, setValue];
+}
+function useModeWarnings(prop, controlled, readOnly) {
+  const initiallyControlled = (0, import_react2.useRef)(controlled);
+  const warned2 = (0, import_react2.useRef)({ readOnly: false, modeSwitch: false });
+  (0, import_react2.useEffect)(() => {
+    const name = prop.charAt(0).toUpperCase() + prop.slice(1);
+    if (readOnly && !warned2.current.readOnly) {
+      warned2.current.readOnly = true;
+      console.warn(
+        `Recipe Book: \`${prop}\` was passed without \`on${name}Change\`, so it is read-only. Pass \`on${name}Change\` to update it, or \`default${name}\` instead of \`${prop}\` for uncontrolled state.`
+      );
+    }
+    if (controlled !== initiallyControlled.current && !warned2.current.modeSwitch) {
+      warned2.current.modeSwitch = true;
+      const [from, to] = controlled ? ["undefined to a value", "uncontrolled to controlled"] : ["a value to undefined", "controlled to uncontrolled"];
+      console.warn(
+        `Recipe Book: \`${prop}\` changed from ${from}, which switches it from ${to}. Decide between controlled and uncontrolled for the component's lifetime: pass \`${prop}\` on every render (never undefined), or pass only \`default${name}\`.`
+      );
+    }
+  }, [prop, controlled, readOnly]);
+}
+
+// src/state/use-recipe-state.ts
+function useRecipeState(options) {
+  const { recipe } = options;
+  if (process.env.NODE_ENV !== "production") {
+    (0, import_react3.useMemo)(() => {
+      assertParsedRecipe(
+        recipe,
+        "useRecipeState()",
+        "Call parseRecipe() from @recipe-book/react/core and pass result.data."
+      );
+    }, [recipe]);
+  }
+  const base = servingsBase(recipe);
+  const defaultServings = isServingsFor(options.defaultServings, base) ? options.defaultServings : base;
+  const defaultSystem = [options.defaultSystem, recipe.system].find(isSystem) ?? "metric";
+  const [rawServings, updateServings] = useControllableState({
+    prop: "servings",
+    value: options.servings,
+    defaultValue: defaultServings,
+    onChange: options.onServingsChange,
+    resetKey: recipe.id
+  });
+  const [rawSystem, updateSystem] = useControllableState({
+    prop: "system",
+    value: options.system,
+    defaultValue: defaultSystem,
+    onChange: options.onSystemChange,
+    resetKey: recipe.id
+  });
+  const servings = isServingsFor(rawServings, base) ? rawServings : defaultServings;
+  const system = isSystem(rawSystem) ? rawSystem : defaultSystem;
+  if (process.env.NODE_ENV !== "production") {
+    useWarning(
+      options.defaultServings !== void 0 && options.defaultServings !== defaultServings && `Recipe Book: \`defaultServings\` must be ${describeRange(base)}, received ${describe(options.defaultServings)}. Using ${defaultServings} instead.`
+    );
+    useWarning(
+      servings !== rawServings && `Recipe Book: \`servings\` must be ${describeRange(base)}, received ${describe(rawServings)}. Showing ${servings} instead.`
+    );
+    useWarning(
+      system !== rawSystem && `Recipe Book: \`system\` must be "metric" or "us", received ${describe(rawSystem)}. Showing "${system}" instead.`
+    );
+  }
+  const setServings = (0, import_react3.useCallback)(
+    (next) => {
+      if (isServingsFor(next, base)) {
+        updateServings(next);
+      } else if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `Recipe Book: setServings() expects ${describeRange(base)}, but received ${describe(next)}. The value was ignored.`
+        );
+      }
+    },
+    [updateServings, base]
+  );
+  const setSystem = (0, import_react3.useCallback)(
+    (next) => {
+      if (isSystem(next)) {
+        updateSystem(next);
+      } else if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `Recipe Book: setSystem() expects "metric" or "us", but received ${describe(next)}. The value was ignored.`
+        );
+      }
+    },
+    [updateSystem]
+  );
+  const steps = (0, import_react3.useMemo)(() => (0, import_core2.resolveRecipe)(recipe).steps, [recipe]);
+  const resolved = (0, import_react3.useMemo)(
+    () => (0, import_core2.resolveRecipe)(recipe, { servings, system }),
+    [recipe, servings, system]
+  );
+  return (0, import_react3.useMemo)(
+    () => ({
+      recipe,
+      servings,
+      setServings,
+      scale: resolved.scale,
+      system,
+      setSystem,
+      canConvert: resolved.canConvert,
+      ingredients: resolved.ingredients,
+      steps
+    }),
+    [recipe, servings, setServings, resolved, system, setSystem, steps]
+  );
+}
+function useWarning(message) {
+  const warned2 = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    if (message !== warned2.current) {
+      warned2.current = message;
+      if (message) console.warn(message);
+    }
+  }, [message]);
+}
+function isServings(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function servingsBase(recipe) {
+  return [recipe.servings?.amount, recipe.yield?.amount].find(isServings) ?? 1;
+}
+function servingsWindow(base) {
+  const [mantissa, exponent] = base.toExponential().split("e");
+  return [
+    Number(`${mantissa}e${Number(exponent) - 6}`),
+    Number(`${mantissa}e${Number(exponent) + 6}`)
+  ];
+}
+function isServingsFor(value, base) {
+  const [min, max] = servingsWindow(base);
+  return isServings(value) && value >= min && value <= max;
+}
+function describeRange(base) {
+  const [min, max] = servingsWindow(base);
+  return `a number from ${roundInward(min, true)} to ${roundInward(max, false)} for this recipe`;
+}
+function roundInward(bound, up) {
+  const nearest = Number(bound.toPrecision(6));
+  if (up ? nearest >= bound : nearest <= bound) {
+    return nearest;
+  }
+  const [mantissa, exponent] = bound.toExponential().split("e");
+  const digits = Number(mantissa.replace(".", "").slice(0, 6));
+  return Number(`${up ? digits + 1 : digits}e${Number(exponent) - 5}`);
+}
+function isSystem(value) {
+  return value === "metric" || value === "us";
+}
+function describe(value) {
+  if (typeof value === "string") {
+    return quote(value);
+  }
+  if (typeof value === "function") {
+    return "a function";
+  }
+  if (value === null || typeof value !== "object") {
+    return quote(String(value)).slice(1, -1);
+  }
+  return Array.isArray(value) ? "an array" : "an object";
+}
+
+// src/context.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ConfigContext = /* @__PURE__ */ (0, import_react.createContext)({
+  locale: "en-US",
+  labels: defaultLabels
+});
+function RecipeBookProvider({
+  children,
+  ...config
+}) {
+  const { locale, labels, defaultSystem } = useConfig(config);
+  const value = (0, import_react4.useMemo)(
+    () => ({ locale, labels, defaultSystem }),
+    [locale, labels, defaultSystem]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigContext.Provider, { value, children });
+}
+function useConfig({
+  locale,
+  labels,
+  defaultSystem
+}) {
+  const outer = (0, import_react4.useContext)(ConfigContext);
+  return {
+    locale: locale ?? outer.locale,
+    labels: (0, import_react4.useMemo)(
+      () => ({
+        ...outer.labels,
+        ...Object.fromEntries(
+          Object.entries({ ...labels }).filter(
+            ([, value]) => value !== void 0
+          )
+        )
+      }),
+      [outer.labels, labels]
+    ),
+    defaultSystem: [defaultSystem, outer.defaultSystem].find(isSystem)
+  };
+}
+var RecipeDataContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var RecipeStateContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+function useRequired(context, message) {
+  const value = (0, import_react4.useContext)(context);
+  if (!value) {
+    throw new import_core3.RecipeBookError("missing_parent", message);
+  }
+  return value;
+}
+function useRecipeData(part) {
+  return useRequired(
+    RecipeDataContext,
+    `<${part}> must be rendered inside <Recipe.Root>.`
+  );
+}
+function usePartState(part) {
+  return useRequired(
+    RecipeStateContext,
+    `<${part}> must be rendered inside <Recipe.Root>.`
+  );
+}
+function useRecipe() {
+  return useRequired(
+    RecipeStateContext,
+    "useRecipe() must be called inside <Recipe.Root>. To use recipe state without a Root, call useRecipeState()."
+  );
+}
+
+// src/parts/image.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Image = /* @__PURE__ */ (0, import_react.forwardRef)(function Image2({
+  as: Comp = "img",
+  src,
+  alt,
+  ...props
+}, ref) {
+  const { recipe } = useRecipeData("Recipe.Image");
+  return recipe.image !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      ...props,
+      src: src ?? recipe.image,
+      alt: alt ?? recipe.name,
+      "data-recipe-image": "",
+      ref
+    }
+  );
+});
+
+// src/parts/ingredients.tsx
+var import_react12 = require("react");
+
+// src/slot.tsx
+var import_react7 = require("react");
+function resolveAsChild(part, tag, asChild, children, defaults) {
+  if (asChild) {
+    if ((0, import_react.isValidElement)(children) && children.type !== import_react.Fragment) {
+      return [
+        Slot,
+        isEmpty(children.props.children) ? (0, import_react.cloneElement)(children, void 0, defaults) : children
+      ];
+    }
+    if (process.env.NODE_ENV !== "production" && !warned.has(part)) {
+      warned.add(part);
+      console.warn(
+        `Recipe Book: <${part}> has asChild but no single element child, received ${describeChildren(children)}, so it renders ${tag === "li" ? "an" : "a"} <${tag}>. Pass one element, such as <${tag}>.`
+      );
+    }
+  }
+  return [tag, isEmpty(children) ? defaults : children];
+}
+var Slot = /* @__PURE__ */ (0, import_react.forwardRef)(function Slot2({ children, ...props }, ref) {
+  const child = children;
+  const merged = { ...props, ...child.props };
+  for (const name in child.props) {
+    const ours = props[name];
+    const theirs = child.props[name];
+    if (name === "tabIndex" && ours !== void 0) {
+      merged[name] = ours;
+    } else if (name === "className") {
+      merged[name] = [ours, theirs].filter(Boolean).join(" ") || void 0;
+    } else if (name === "style") {
+      merged[name] = { ...ours, ...theirs };
+    } else if (/^on/.test(name) && typeof ours === "function") {
+      merged[name] = typeof theirs === "function" ? (...args) => {
+        const [first, second] = [theirs, ours];
+        first(...args);
+        second(...args);
+      } : ours;
+    }
+  }
+  const childRef = Object.getOwnPropertyDescriptor(child.props, "ref")?.value ?? child.ref;
+  merged.ref = (0, import_react7.useCallback)(
+    (node) => {
+      const refs = [ref, childRef];
+      const cleanups = refs.map((each) => setRef(each, node));
+      if (cleanups.some((cleanup) => typeof cleanup === "function")) {
+        return () => refs.forEach((each, index) => {
+          const cleanup = cleanups[index];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(each, null);
+          }
+        });
+      }
+      return void 0;
+    },
+    [ref, childRef]
+  );
+  return (0, import_react.cloneElement)(child, merged);
+});
+function setRef(ref, node) {
+  if (typeof ref === "function") {
+    return ref(node);
+  }
+  if (ref) {
+    ref.current = node;
+  }
+  return void 0;
+}
+var warned = /* @__PURE__ */ new Set();
+function describeChildren(children) {
+  if ((0, import_react.isValidElement)(children)) {
+    return "a Fragment";
+  }
+  if (Array.isArray(children)) {
+    const count = children.length;
+    return `an array of ${count} ${count === 1 ? "child" : "children"}`;
+  }
+  if (typeof children === "string" || typeof children === "number") {
+    return `text ${quote(String(children))}`;
+  }
+  return isEmpty(children) ? "no children" : "a child that is not an element";
+}
+function isEmpty(children) {
+  return children == null || typeof children === "boolean";
+}
+
+// src/use-format-ingredient.ts
+var import_core4 = require("@recipe-book/core");
+var import_react9 = require("react");
+function useFormatIngredient() {
+  const {
+    locale,
+    labels: { optional }
+  } = useRequired(
+    RecipeDataContext,
+    "useFormatIngredient() must be called inside <Recipe.Root>. To format ingredients without a Root, call formatIngredient() from @recipe-book/react/core."
+  );
+  return (0, import_react9.useCallback)(
+    (item) => formatLine(item, locale, optional),
+    [locale, optional]
+  );
+}
+function formatLine(item, locale, optional) {
+  const options = { locale };
+  const formatted = (0, import_core4.formatIngredient)(item, options);
+  const quantity = lineQuantity(item);
+  return {
+    ...formatted,
+    quantityParts: quantity ? (0, import_core4.formatQuantityToParts)(quantity, options) : [],
+    ...item.ingredient.optional && { optional }
+  };
+}
+function lineQuantity(item) {
+  return item.quantity ?? item.ingredient.quantity;
+}
+
+// src/parts/sections.tsx
+var import_react10 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function renderKeyed(items, render) {
+  return items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Fragment, { children: render(item) }, item.id));
+}
+function SectionBlock({
+  kind,
+  title,
+  headingLevel,
+  children
+}) {
+  const headingId = (0, import_react10.useId)();
+  const marker = `data-recipe-${kind}-section`;
+  const Heading = `h${headingLevel}`;
+  return title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { ...{ [marker]: "" }, "aria-labelledby": headingId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, { id: headingId, children: title }),
+    children
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...{ [marker]: "" }, children });
+}
+
+// src/parts/ingredients.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Ingredients = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function Ingredients2({ headingLevel = 3, children, ...props }, ref) {
+    const { ingredients } = usePartState("Recipe.Ingredients");
+    const renderSection = children ?? ((section) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SectionBlock,
+      {
+        kind: "ingredient",
+        title: section.title,
+        headingLevel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IngredientList, { section })
+      }
+    ));
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...props, "data-recipe-ingredients": "", ref, children: renderKeyed(ingredients, renderSection) });
+  }
+);
+var IngredientList = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function IngredientList2({ section, children = (item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Ingredient, { item }), ...props }, ref) {
+    const { ingredients } = usePartState("Recipe.IngredientList");
+    const items = section?.items ?? ingredients.flatMap((s) => s.items);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { ...props, "data-recipe-ingredient-list": "", ref, children: renderKeyed(items, children) });
+  }
+);
+var LineContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var Ingredient = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function Ingredient2({ item, asChild = false, children, ...props }, ref) {
+    const {
+      labels: { optional, to },
+      locale
+    } = useRecipeData("Recipe.Ingredient");
+    const line = (0, import_react12.useMemo)(
+      () => ({ ...formatLine(item, locale, optional), to }),
+      [item, locale, optional, to]
+    );
+    const quantity = lineQuantity(item);
+    const [Comp, content] = resolveAsChild(
+      "Recipe.Ingredient",
+      "li",
+      asChild,
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IngredientQuantity, {}),
+        quantity && (quantity.unit === void 0 ? "\xA0" : " "),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IngredientName, {}),
+        line.note !== void 0 && ", ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IngredientNote, {}),
+        line.optional && " ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IngredientOptional, {})
+      ] })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LineContext.Provider, { value: line, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Comp,
+      {
+        ...props,
+        "data-recipe-ingredient": "",
+        "data-origin": quantity && item.origin,
+        "data-unquantified": quantity ? void 0 : "",
+        "data-optional": item.ingredient.optional ? "" : void 0,
+        ref,
+        children: content
+      }
+    ) });
+  }
+);
+function ingredientText(name, attribute, read) {
+  const part = `Recipe.${name}`;
+  function IngredientText({ asChild = false, children, ...props }, ref) {
+    const line = useRequired(
+      LineContext,
+      `<${part}> must be rendered inside <Recipe.Ingredient>.`
+    );
+    const text = read(line, children);
+    if (text === void 0) {
+      return null;
+    }
+    const [Comp, child] = resolveAsChild(part, "span", asChild, children, null);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...props, ...{ [attribute]: "" }, ref, children: Comp === "span" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      children,
+      text
+    ] }) : (0, import_react.cloneElement)(child, void 0, child.props.children, text) });
+  }
+  if (process.env.NODE_ENV !== "production") {
+    Object.defineProperty(IngredientText, "name", { value: name });
+  }
+  return (0, import_react.forwardRef)(IngredientText);
+}
+var IngredientQuantity = /* @__PURE__ */ ingredientText(
+  "IngredientQuantity",
+  "data-recipe-quantity",
+  ({ quantity, quantityParts, to }) => quantity === void 0 ? void 0 : renderQuantity(quantityParts, to)
+);
+var hiddenStyle = {
+  position: "absolute",
+  border: 0,
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  wordWrap: "normal",
+  userSelect: "none",
+  WebkitUserSelect: "none"
+};
+function renderQuantity(parts, to) {
+  const join = (from) => from.map((part) => part.value).join("");
+  const dash = parts.findIndex((part) => part.type === "rangeSeparator");
+  const separator = parts[dash];
+  if (!separator) {
+    return join(parts);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    join(parts.slice(0, dash)),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-recipe-range-separator": "", "aria-hidden": "true", children: separator.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: hiddenStyle, children: ` ${to} ` }),
+    join(parts.slice(dash + 1))
+  ] });
+}
+var IngredientName = /* @__PURE__ */ ingredientText(
+  "IngredientName",
+  "data-recipe-name",
+  ({ name }) => name
+);
+var IngredientNote = /* @__PURE__ */ ingredientText(
+  "IngredientNote",
+  "data-recipe-note",
+  ({ note }) => note
+);
+var IngredientOptional = /* @__PURE__ */ ingredientText(
+  "IngredientOptional",
+  "data-recipe-optional",
+  // An empty label shows only the part's own children, such as an icon.
+  ({ optional }, children) => optional === "" && isEmpty(children) ? void 0 : optional
+);
+
+// src/parts/json-ld.tsx
+var import_schema_org = require("@recipe-book/core/schema-org");
+var import_react14 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var JsonLd = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function JsonLd2({
+    servings,
+    system,
+    url,
+    extra,
+    // Off the props type, but a JavaScript caller can still pass them.
+    children,
+    src,
+    ...props
+  }, ref) {
+    const { recipe } = useRecipeData("Recipe.JsonLd");
+    const result = (0, import_react14.useMemo)(
+      () => (0, import_schema_org.toJsonLd)(recipe, { servings, system, url, extra }),
+      [recipe, servings, system, url, extra]
+    );
+    if (process.env.NODE_ENV !== "production") {
+      useWarningsReport(recipe.name, result.warnings);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "script",
+      {
+        ...props,
+        type: "application/ld+json",
+        "data-recipe-json-ld": "",
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify(result.data).replace(/</g, "\\u003c")
+        },
+        ref
+      }
+    );
+  }
+);
+function useWarningsReport(name, warnings) {
+  const reported = (0, import_react14.useRef)(void 0);
+  (0, import_react14.useEffect)(() => {
+    const key = JSON.stringify(warnings);
+    const count = warnings.length;
+    if (count > 0 && key !== reported.current) {
+      console.warn(
+        `Recipe Book: <Recipe.JsonLd> for ${quote(name)} has ${count} ${count === 1 ? "warning" : "warnings"}. The script still renders, but without the fields they name.`,
+        warnings
+      );
+    }
+    reported.current = key;
+  }, [name, warnings]);
+}
+
+// src/parts/root.tsx
+var import_react16 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Root({
+  recipe,
+  parse,
+  fallback = null,
+  children,
+  ...options
+}) {
+  const result = (0, import_react16.useMemo)(() => {
+    if (parse !== void 0) {
+      return parse(recipe);
+    }
+    assertParsedRecipe(
+      recipe,
+      "<Recipe.Root>",
+      "Call parseRecipe() from @recipe-book/react/core on the server, in a loader, or at build time and pass result.data, or pass parse={parseRecipe} to parse it in the browser."
+    );
+    return { success: true, data: recipe, warnings: [] };
+  }, [parse, recipe]);
+  if (process.env.NODE_ENV !== "production") {
+    useParseReport(result);
+  }
+  if (!result.success) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecipeProvider, { ...options, recipe: result.data, children });
+}
+function RecipeProvider({ children, ...options }) {
+  const { locale, labels, defaultSystem } = useConfig(options);
+  const state = useRecipeState({ ...options, defaultSystem });
+  const [temperatures, setTemperatures] = (0, import_react16.useState)(0);
+  const reportTemperature = (0, import_react16.useCallback)(() => {
+    setTemperatures((count) => count + 1);
+    return () => setTemperatures((count) => count - 1);
+  }, []);
+  const canConvert = state.canConvert || temperatures > 0;
+  const value = (0, import_react16.useMemo)(() => ({ ...state, canConvert }), [state, canConvert]);
+  const { recipe, steps } = state;
+  const data = (0, import_react16.useMemo)(
+    () => ({ recipe, steps, labels, locale, reportTemperature }),
+    [recipe, steps, labels, locale, reportTemperature]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecipeDataContext.Provider, { value: data, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecipeStateContext.Provider, { value, children }) });
+}
+function useParseReport(result) {
+  const reported = (0, import_react16.useRef)(void 0);
+  (0, import_react16.useEffect)(() => {
+    const key = result.success ? result.warnings.length > 0 ? `warnings ${JSON.stringify(result.warnings)}` : void 0 : `error ${JSON.stringify([result.error.message, result.error.issues])}`;
+    if (key === reported.current) {
+      return;
+    }
+    reported.current = key;
+    if (key === void 0) {
+      return;
+    }
+    if (result.success) {
+      const count = result.warnings.length;
+      console.warn(
+        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders, but a warning can mean a misspelled field.`,
+        result.warnings
+      );
+    } else {
+      console.error(result.error);
+    }
+  }, [result]);
+}
+
+// src/parts/servings.tsx
+var import_core5 = require("@recipe-book/core");
+var import_react17 = require("react");
+
+// src/compose-event-handlers.ts
+function composeEventHandlers(theirs, ours) {
+  return (event) => {
+    theirs?.(event);
+    if (!event.defaultPrevented) {
+      ours(event);
+    }
+  };
+}
+
+// src/parts/servings.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ServingsSelect = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function ServingsSelect2({ options, "aria-label": ariaLabel, onChange, ...props }, ref) {
+    const { recipe, labels, locale } = useRecipeData("Recipe.ServingsSelect");
+    const { servings, setServings } = usePartState("Recipe.ServingsSelect");
+    const base = servingsBase(recipe);
+    const choices = [
+      .../* @__PURE__ */ new Set([
+        ...(options ?? [0.5, 1, 2, 3].map((factor) => Math.max(1, Math.round(base * factor)))).filter((choice) => isServingsFor(choice, base)),
+        servings
+      ])
+    ].sort((a, b) => a - b);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "select",
+      {
+        autoComplete: "off",
+        ...props,
+        "aria-label": (ariaLabel ?? labels.servings) || void 0,
+        value: servings,
+        "data-recipe-servings-select": "",
+        ref,
+        onChange: composeEventHandlers(onChange, (event) => {
+          setServings(Number(event.target.value));
+        }),
+        children: choices.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: choice, children: optionText(choice, recipe, base, labels, locale) }, choice))
+      }
+    );
+  }
+);
+var ServingsInput = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function ServingsInput2({
+    min = 1,
+    max,
+    step,
+    inputMode,
+    "aria-label": ariaLabel,
+    onChange,
+    onBlur,
+    ...props
+  }, ref) {
+    const { recipe, labels } = useRecipeData("Recipe.ServingsInput");
+    const { servings, setServings } = usePartState("Recipe.ServingsInput");
+    const base = servingsBase(recipe);
+    const [draft, setDraft] = (0, import_react17.useState)({ text: String(servings), servings });
+    if (draft.servings !== servings) {
+      setDraft({
+        text: Number(draft.text) === servings ? draft.text : String(servings),
+        servings
+      });
+    }
+    const whole = Number.isInteger(min) && Number.isInteger(step ?? 1);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        autoComplete: "off",
+        ...props,
+        type: "number",
+        inputMode: inputMode ?? (whole ? "numeric" : "decimal"),
+        "aria-label": (ariaLabel ?? labels.servings) || void 0,
+        min,
+        max,
+        step,
+        value: draft.text,
+        "data-recipe-servings-input": "",
+        ref,
+        onChange: composeEventHandlers(onChange, (event) => {
+          const text = event.target.value;
+          const next = Number(text);
+          setDraft({ text, servings });
+          if (isServingsFor(next, base) && next >= min && (max === void 0 || next <= max)) {
+            const steps = step === "any" ? 0 : (next - min) / (step && step > 0 ? step : 1);
+            if (Math.abs(steps - Math.round(steps)) <= (Math.round(steps) && 1e-15 * (steps + steps / (1 - min / next)))) {
+              setServings(next);
+            }
+          }
+        }),
+        onBlur: composeEventHandlers(onBlur, () => {
+          setDraft({ text: String(servings), servings });
+        })
+      }
+    );
+  }
+);
+function optionText(choice, { servings, yield: makes }, base, labels, locale) {
+  const format = {
+    locale,
+    rounding: Number.isInteger(choice * 4) ? "kitchen" : "none"
+  };
+  if (base === servings?.amount) {
+    return (0, import_core5.formatYield)(
+      {
+        amount: choice,
+        unit: labels.servingUnit.one,
+        plural: labels.servingUnit.other
+      },
+      format
+    );
+  }
+  if (base === makes?.amount) {
+    return (0, import_core5.formatYield)(
+      { amount: choice, unit: makes.unit, plural: makes.plural },
+      format
+    );
+  }
+  return `${(0, import_core5.formatServings)({ amount: choice }, format)}\xD7`;
+}
+
+// src/parts/step-text.tsx
+var import_core6 = require("@recipe-book/core");
+var import_react20 = require("react");
+
+// src/parts/steps.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Steps = /* @__PURE__ */ (0, import_react.forwardRef)(function Steps2({ headingLevel = 3, children, ...props }, ref) {
+  const { steps } = useRecipeData("Recipe.Steps");
+  const renderSection = children ?? ((section) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SectionBlock,
+    {
+      kind: "step",
+      title: section.title,
+      headingLevel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StepList, { section })
+    }
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...props, "data-recipe-steps": "", ref, children: renderKeyed(steps, renderSection) });
+});
+var StepList = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function StepList2({ section, children = (step) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Step, { item: step }), start, ...props }, ref) {
+    const { steps } = useRecipeData("Recipe.StepList");
+    const items = section?.items ?? steps.flatMap((s) => s.items);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "ol",
+      {
+        ...props,
+        start: start ?? items[0]?.number,
+        "data-recipe-step-list": "",
+        ref,
+        children: renderKeyed(items, children)
+      }
+    );
+  }
+);
+var StepContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var Step = /* @__PURE__ */ (0, import_react.forwardRef)(function Step2({ item, asChild = false, children, ...props }, ref) {
+  useRecipeData("Recipe.Step");
+  const [Comp, content] = resolveAsChild(
+    "Recipe.Step",
+    "li",
+    asChild,
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StepName, {}),
+      item.name !== void 0 && " ",
+      item.text
+    ] })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StepContext.Provider, { value: item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { ...props, "data-recipe-step": "", ref, children: content }) });
+});
+var StepName = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function StepName2(props, ref) {
+    const step = useRequired(
+      StepContext,
+      "<Recipe.StepName> must be rendered inside <Recipe.Step>."
+    );
+    return step.name === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("b", { ...props, "data-recipe-name": "", ref, children: step.name });
+  }
+);
+
+// src/parts/step-text.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var StepText = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function StepText2(props, ref) {
+    const step = useRequired(
+      StepContext,
+      "<Recipe.StepText> must be rendered inside <Recipe.Step>."
+    );
+    const segments = (0, import_react20.useMemo)(() => (0, import_core6.segmentStepText)(step.text), [step.text]);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...props, "data-recipe-step-text": "", ref, children: segments.map(
+      (segment, index) => segment.type === "temperature" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Temperature, { segment }, index) : (
+        // Core may add segment types in a minor release; show those as authored.
+        segment.text
+      )
+    ) });
+  }
+);
+function Temperature({ segment }) {
+  const { labels, locale, reportTemperature } = useRecipeData("Recipe.StepText");
+  const unit = usePartState("Recipe.StepText").system === "us" ? "F" : "C";
+  const readings = [segment, ...segment.alternatives];
+  (0, import_react20.useEffect)(reportTemperature, [reportTemperature]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-recipe-temperature": "", children: [false, true].map((fan) => {
+    const kind = readings.filter((reading2) => reading2.fan === fan);
+    const reading = kind.find((each) => each.temperature.unit === unit) ?? kind[0];
+    return reading && (0, import_core6.formatTemperature)((0, import_core6.convertTemperature)(reading.temperature, unit), {
+      locale,
+      rounding: reading.temperature.unit === unit ? "none" : void 0
+    }) + (fan && labels.fan ? ` ${labels.fan}` : "");
+  }).filter(Boolean).join(" / ") });
+}
+
+// src/parts/system-toggle.tsx
+var import_react22 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ToggleContext = /* @__PURE__ */ (0, import_react.createContext)(
+  null
+);
+var SystemToggle = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function SystemToggle2({ asChild = false, "aria-label": ariaLabel, children, ...props }, ref) {
+    const { labels } = useRecipeData("Recipe.SystemToggle");
+    const { system, setSystem, canConvert } = usePartState(
+      "Recipe.SystemToggle"
+    );
+    const disabled = !canConvert;
+    const [offers, setOffers] = (0, import_react22.useState)([]);
+    const [chosen, choose] = (0, import_react22.useState)();
+    const offer = (0, import_react22.useCallback)((id, value) => {
+      const entry = { id, value };
+      setOffers((current) => [...current, entry]);
+      return () => setOffers((current) => current.filter((other) => other !== entry));
+    }, []);
+    const tabStop = (offers.find((entry) => entry.value === system && entry.id === chosen) ?? offers.find((entry) => entry.value === system) ?? offers[0])?.id;
+    const context = (0, import_react22.useMemo)(
+      () => ({ system, setSystem, disabled, tabStop, offer, choose }),
+      [system, setSystem, disabled, tabStop, offer]
+    );
+    const [Comp, content] = resolveAsChild(
+      "Recipe.SystemToggle",
+      "div",
+      asChild,
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SystemOption, { value: "metric" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SystemOption, { value: "us" })
+      ] })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToggleContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Comp,
+      {
+        ...props,
+        "aria-label": ariaLabel ?? (props["aria-labelledby"] === void 0 ? labels.system : void 0),
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        "data-recipe-system-toggle": "",
+        "data-disabled": disabled ? "" : void 0,
+        ref,
+        children: content
+      }
+    ) });
+  }
+);
+var SystemOption = /* @__PURE__ */ (0, import_react.forwardRef)(
+  function SystemOption2({
+    value,
+    asChild = false,
+    type,
+    disabled: ownDisabled = false,
+    children,
+    onClick,
+    onKeyDown,
+    ...props
+  }, ref) {
+    const {
+      system,
+      setSystem,
+      disabled: groupDisabled,
+      tabStop,
+      offer,
+      choose
+    } = useRequired(
+      ToggleContext,
+      "<Recipe.SystemOption> must be rendered inside <Recipe.SystemToggle>."
+    );
+    const { labels } = useRecipeData("Recipe.SystemOption");
+    const id = (0, import_react22.useId)();
+    const disabled = groupDisabled || ownDisabled;
+    const checked = value === system;
+    (0, import_react22.useEffect)(
+      () => disabled ? void 0 : offer(id, value),
+      [disabled, offer, id, value]
+    );
+    const tabbable = !disabled && (tabStop === void 0 ? checked : tabStop === id);
+    const [Comp, content] = resolveAsChild(
+      "Recipe.SystemOption",
+      "button",
+      asChild,
+      children,
+      labels[value]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Comp,
+      {
+        autoComplete: "off",
+        ...props,
+        type: type ?? "button",
+        role: "radio",
+        "aria-checked": checked,
+        tabIndex: tabbable ? 0 : -1,
+        disabled,
+        "data-recipe-system-option": "",
+        "data-state": checked ? "checked" : "unchecked",
+        "data-disabled": disabled ? "" : void 0,
+        ref,
+        onClick: composeEventHandlers(onClick, () => {
+          if (!disabled) {
+            setSystem(value);
+            choose(id);
+          }
+        }),
+        onKeyDown: composeEventHandlers(onKeyDown, moveOnArrowKey),
+        children: content
+      }
+    );
+  }
+);
+function moveOnArrowKey(event) {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+    return;
+  }
+  const { key } = event;
+  let step;
+  if (key === "ArrowDown") {
+    step = 1;
+  } else if (key === "ArrowUp") {
+    step = -1;
+  } else if (key === "ArrowRight") {
+    step = isRtl(event.currentTarget) ? -1 : 1;
+  } else if (key === "ArrowLeft") {
+    step = isRtl(event.currentTarget) ? 1 : -1;
+  } else {
+    return;
+  }
+  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
+  const options = Array.from(
+    group?.querySelectorAll(
+      "[data-recipe-system-option]:not([data-disabled])"
+    ) ?? []
+  );
+  const index = options.indexOf(event.currentTarget);
+  if (index === -1) {
+    return;
+  }
+  event.preventDefault();
+  const next = options[(index + step + options.length) % options.length];
+  next?.focus();
+  next?.click();
+}
+function isRtl(element) {
+  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image,
+  Ingredient,
+  IngredientList,
+  IngredientName,
+  IngredientNote,
+  IngredientOptional,
+  IngredientQuantity,
+  Ingredients,
+  JsonLd,
+  RecipeBookProvider,
+  RecipeImage,
+  RecipeIngredient,
+  RecipeIngredientList,
+  RecipeIngredientName,
+  RecipeIngredientNote,
+  RecipeIngredientOptional,
+  RecipeIngredientQuantity,
+  RecipeIngredients,
+  RecipeJsonLd,
+  RecipeRoot,
+  RecipeServingsInput,
+  RecipeServingsSelect,
+  RecipeStep,
+  RecipeStepList,
+  RecipeStepName,
+  RecipeStepText,
+  RecipeSteps,
+  RecipeSystemOption,
+  RecipeSystemToggle,
+  Root,
+  ServingsInput,
+  ServingsSelect,
+  Step,
+  StepList,
+  StepName,
+  StepText,
+  Steps,
+  SystemOption,
+  SystemToggle,
+  useFormatIngredient,
+  useRecipe,
+  useRecipeState
+});
+//# sourceMappingURL=index.cjs.map