@recipe-book/react 0.0.3 → 0.1.1

package/dist/index.js

@@ -1,2 +1,1207 @@
-var C=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var n in t)C(e,n,{get:t[n],enumerable:!0})},V=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of W(t))!D.call(e,r)&&r!==n&&C(e,r,{get:()=>t[r],enumerable:!(o=E(t,r))||o.enumerable});return e};var _=e=>V(C({},"__esModule",{value:!0}),e);var B={};F(B,{IngredientList:()=>A,InstructionList:()=>L,MeasurementSelect:()=>U,Provider:()=>h,RecipeIngredientList:()=>A,RecipeInstructionList:()=>L,RecipeMeasurementSelect:()=>U,RecipeRoot:()=>I,RecipeServingsSelect:()=>K,RecipeThumbnail:()=>k,Root:()=>I,ServingsSelect:()=>K,Thumbnail:()=>k,useRecipe:()=>s});module.exports=_(B);var N=require("@recipe-book/core"),l=require("react");var a=require("react"),x=require("react/jsx-runtime"),b=(0,a.createContext)({});function s(){let e=(0,a.useContext)(b);if(!e)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return e}function d({children:e,recipe:t,servings:n,setServings:o}){let[r,i]=(0,a.useState)(t.measurements),m=(0,a.useMemo)(()=>({...t,activeConversionKey:r,setConversionKey:c=>{i(c)},servings:n,setServings:o}),[t,r,i,n,o]);return(0,x.jsx)(b.Provider,{value:m,children:e})}var u=require("react"),S=require("react/jsx-runtime"),P=(0,u.createContext)({});function y(){let e=(0,u.useContext)(P);return e||{config:{}}}function h({children:e,config:t}){return(0,S.jsx)(P.Provider,{value:{config:t},children:e})}var G=require("react/jsx-runtime");function I(e){let[t,n]=(0,l.useState)(1),{config:o}=y(),r=(0,l.useMemo)(()=>{let i={...o,...e.recipe},m=N.RecipeUtils.create(i);return{...m,ingredients:m.ingredients.map(c=>({...c,amount:{...c.amount,value:c.amount.value*t},conversion:typeof c.conversion=="object"?{...c.conversion,[i.measurements]:c.amount.value*t}:c.conversion}))}},[o,e.recipe,t]);return(0,G.jsx)(d,{recipe:r,servings:t,setServings:n,children:e.children})}var T=require("@recipe-book/core");var w=require("react"),v=require("react/jsx-runtime");function $(e,t){var o;if(!t)return e.amount;let n=(o=e.conversion)==null?void 0:o[t];if(!n){console.warn(`No conversion found for ingredient "${e.name}" with key "${t}"
-Attempting conversion table lookup...`);let r=T.IngredientUtils.convert(e,t);return r?r.amount:e.amount}return n}function A(e){let{ingredients:t,activeConversionKey:n,measurements:o}=s(),r=(0,w.useMemo)(()=>n===o?t:t.map(i=>({...i,amount:$(i,n)})),[t,n,o]);return(0,v.jsx)("ul",{"recipe-ingredient-list":"",className:e.className,children:r.map((i,m)=>(0,v.jsxs)("li",{"recipe-ingredient":"",children:[i.name," \u2014 ",i.amount.value," ",i.amount.unit]},m))})}var g=require("react/jsx-runtime");function L(e){let{instructions:t}=s();return(0,g.jsx)("ol",{"recipe-instruction-list":"",className:e.className,children:t.map((n,o)=>(0,g.jsx)("li",{"recipe-instruction":o+1,children:n},o))})}var M=require("@radix-ui/react-aspect-ratio");var R=require("react/jsx-runtime");function k(e){var r,i;let{thumbnail:t,name:n}=s();if(!t)throw new Error("Missing thumbnail image. Did you forget to set one?");let o=(r=e.style)!=null?r:{};return(0,R.jsx)(M.AspectRatio,{"recipe-thumbnail":"",className:e.className,style:{width:"100%",...o},ratio:e.aspectRatio||1,children:(0,R.jsx)("img",{"recipe-thumbnail-image":"",style:{objectFit:"cover",width:"100%",height:"100%"},src:t,alt:(i=e.alt)!=null?i:n})})}var f=require("react/jsx-runtime"),q=[.5,1,2,3];function K(e){let{servings:t,setServings:n}=s();return(0,f.jsx)("select",{className:e.className,"recipe-servings-select":"",value:t,onChange:o=>{n(Number(o.target.value))},children:q.map(o=>(0,f.jsxs)("option",{value:o,children:[o," serving",o!==1?"s":""]},o))})}var p=require("react/jsx-runtime");function U(e){let{activeConversionKey:t,setConversionKey:n,measurements:o}=s();if(o===void 0)throw new Error("Cannot select measurement without base measurement");return(0,p.jsxs)("div",{"recipe-measurement-select":"",className:e.className,children:[(0,p.jsx)("button",{"recipe-measurement-option":"","data-active":t==="us-customary",onClick:()=>n("us-customary"),children:"US"}),(0,p.jsx)("button",{"recipe-measurement-option":"","data-active":t==="metric",onClick:()=>n("metric"),children:"Metric"})]})}0&&(module.exports={IngredientList,InstructionList,MeasurementSelect,Provider,RecipeIngredientList,RecipeInstructionList,RecipeMeasurementSelect,RecipeRoot,RecipeServingsSelect,RecipeThumbnail,Root,ServingsSelect,Thumbnail,useRecipe});
+"use client";
+
+// src/context.tsx
+import { RecipeBookError as RecipeBookError2 } from "@recipe-book/core";
+import {
+  useContext,
+  useMemo as useMemo2
+} from "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
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  Fragment,
+  isValidElement
+} from "react";
+
+// src/state/use-recipe-state.ts
+import {
+  resolveRecipe
+} from "@recipe-book/core";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+
+// src/is-parsed-recipe.ts
+import { RecipeBookError } from "@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 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
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useRef,
+  useState
+} from "react";
+function useControllableState(options) {
+  const { value, defaultValue, onChange, resetKey } = options;
+  const [internal, setInternal] = useState(defaultValue);
+  const [internalResetKey, setInternalResetKey] = 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 = useRef({ value, current, onChange });
+  useInsertionEffect(() => {
+    latest.current = { value, current, onChange };
+  });
+  const setValue = 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 = useRef(controlled);
+  const warned2 = useRef({ readOnly: false, modeSwitch: false });
+  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") {
+    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 = useCallback2(
+    (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 = useCallback2(
+    (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 = useMemo(() => resolveRecipe(recipe).steps, [recipe]);
+  const resolved = useMemo(
+    () => resolveRecipe(recipe, { servings, system }),
+    [recipe, servings, system]
+  );
+  return 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 = useRef2(false);
+  useEffect2(() => {
+    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
+import { jsx } from "react/jsx-runtime";
+var ConfigContext = /* @__PURE__ */ createContext({
+  locale: "en-US",
+  labels: defaultLabels
+});
+function RecipeBookProvider({
+  children,
+  ...config
+}) {
+  const { locale, labels, defaultSystem } = useConfig(config);
+  const value = useMemo2(
+    () => ({ locale, labels, defaultSystem }),
+    [locale, labels, defaultSystem]
+  );
+  return /* @__PURE__ */ jsx(ConfigContext.Provider, { value, children });
+}
+function useConfig({
+  locale,
+  labels,
+  defaultSystem
+}) {
+  const outer = useContext(ConfigContext);
+  return {
+    locale: locale ?? outer.locale,
+    labels: useMemo2(
+      () => ({
+        ...outer.labels,
+        ...Object.fromEntries(
+          Object.entries({ ...labels }).filter(
+            ([, value]) => value !== void 0
+          )
+        )
+      }),
+      [outer.labels, labels]
+    ),
+    defaultSystem: [defaultSystem, outer.defaultSystem].find(isSystem)
+  };
+}
+var RecipeDataContext = /* @__PURE__ */ createContext(null);
+var RecipeStateContext = /* @__PURE__ */ createContext(null);
+function useRequired(context, message) {
+  const value = useContext(context);
+  if (!value) {
+    throw new RecipeBookError2("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
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Image = /* @__PURE__ */ forwardRef(function Image2({
+  as: Comp = "img",
+  src,
+  alt,
+  ...props
+}, ref) {
+  const { recipe } = useRecipeData("Recipe.Image");
+  return recipe.image !== void 0 && /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      ...props,
+      src: src ?? recipe.image,
+      alt: alt ?? recipe.name,
+      "data-recipe-image": "",
+      ref
+    }
+  );
+});
+
+// src/parts/ingredients.tsx
+import {
+  useMemo as useMemo3
+} from "react";
+
+// src/slot.tsx
+import { useCallback as useCallback3 } from "react";
+function resolveAsChild(part, tag, asChild, children, defaults) {
+  if (asChild) {
+    if (isValidElement(children) && children.type !== Fragment) {
+      return [
+        Slot,
+        isEmpty(children.props.children) ? 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__ */ 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 = useCallback3(
+    (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 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 (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
+import {
+  formatIngredient,
+  formatQuantityToParts
+} from "@recipe-book/core";
+import { useCallback as useCallback4 } from "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 useCallback4(
+    (item) => formatLine(item, locale, optional),
+    [locale, optional]
+  );
+}
+function formatLine(item, locale, optional) {
+  const options = { locale };
+  const formatted = formatIngredient(item, options);
+  const quantity = lineQuantity(item);
+  return {
+    ...formatted,
+    quantityParts: quantity ? formatQuantityToParts(quantity, options) : [],
+    ...item.ingredient.optional && { optional }
+  };
+}
+function lineQuantity(item) {
+  return item.quantity ?? item.ingredient.quantity;
+}
+
+// src/parts/sections.tsx
+import { useId } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function renderKeyed(items, render) {
+  return items.map((item) => /* @__PURE__ */ jsx3(Fragment, { children: render(item) }, item.id));
+}
+function SectionBlock({
+  kind,
+  title,
+  headingLevel,
+  children
+}) {
+  const headingId = useId();
+  const marker = `data-recipe-${kind}-section`;
+  const Heading = `h${headingLevel}`;
+  return title ? /* @__PURE__ */ jsxs("section", { ...{ [marker]: "" }, "aria-labelledby": headingId, children: [
+    /* @__PURE__ */ jsx3(Heading, { id: headingId, children: title }),
+    children
+  ] }) : /* @__PURE__ */ jsx3("div", { ...{ [marker]: "" }, children });
+}
+
+// src/parts/ingredients.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Ingredients = /* @__PURE__ */ forwardRef(
+  function Ingredients2({ headingLevel = 3, children, ...props }, ref) {
+    const { ingredients } = usePartState("Recipe.Ingredients");
+    const renderSection = children ?? ((section) => /* @__PURE__ */ jsx4(
+      SectionBlock,
+      {
+        kind: "ingredient",
+        title: section.title,
+        headingLevel,
+        children: /* @__PURE__ */ jsx4(IngredientList, { section })
+      }
+    ));
+    return /* @__PURE__ */ jsx4("div", { ...props, "data-recipe-ingredients": "", ref, children: renderKeyed(ingredients, renderSection) });
+  }
+);
+var IngredientList = /* @__PURE__ */ forwardRef(
+  function IngredientList2({ section, children = (item) => /* @__PURE__ */ jsx4(Ingredient, { item }), ...props }, ref) {
+    const { ingredients } = usePartState("Recipe.IngredientList");
+    const items = section?.items ?? ingredients.flatMap((s) => s.items);
+    return /* @__PURE__ */ jsx4("ul", { ...props, "data-recipe-ingredient-list": "", ref, children: renderKeyed(items, children) });
+  }
+);
+var LineContext = /* @__PURE__ */ createContext(null);
+var Ingredient = /* @__PURE__ */ forwardRef(
+  function Ingredient2({ item, asChild = false, children, ...props }, ref) {
+    const {
+      labels: { optional, to },
+      locale
+    } = useRecipeData("Recipe.Ingredient");
+    const line = useMemo3(
+      () => ({ ...formatLine(item, locale, optional), to }),
+      [item, locale, optional, to]
+    );
+    const quantity = lineQuantity(item);
+    const [Comp, content] = resolveAsChild(
+      "Recipe.Ingredient",
+      "li",
+      asChild,
+      children,
+      /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx4(IngredientQuantity, {}),
+        quantity && (quantity.unit === void 0 ? "\xA0" : " "),
+        /* @__PURE__ */ jsx4(IngredientName, {}),
+        line.note !== void 0 && ", ",
+        /* @__PURE__ */ jsx4(IngredientNote, {}),
+        line.optional && " ",
+        /* @__PURE__ */ jsx4(IngredientOptional, {})
+      ] })
+    );
+    return /* @__PURE__ */ jsx4(LineContext.Provider, { value: line, children: /* @__PURE__ */ jsx4(
+      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__ */ jsx4(Comp, { ...props, ...{ [attribute]: "" }, ref, children: Comp === "span" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      children,
+      text
+    ] }) : cloneElement(child, void 0, child.props.children, text) });
+  }
+  if (process.env.NODE_ENV !== "production") {
+    Object.defineProperty(IngredientText, "name", { value: name });
+  }
+  return 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__ */ jsxs2(Fragment2, { children: [
+    join(parts.slice(0, dash)),
+    /* @__PURE__ */ jsx4("span", { "data-recipe-range-separator": "", "aria-hidden": "true", children: separator.value }),
+    /* @__PURE__ */ jsx4("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
+import { toJsonLd } from "@recipe-book/core/schema-org";
+import {
+  useEffect as useEffect3,
+  useMemo as useMemo4,
+  useRef as useRef3
+} from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var JsonLd = /* @__PURE__ */ 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 = useMemo4(
+      () => toJsonLd(recipe, { servings, system, url, extra }),
+      [recipe, servings, system, url, extra]
+    );
+    if (process.env.NODE_ENV !== "production") {
+      useWarningsReport(recipe.name, result.warnings);
+    }
+    return /* @__PURE__ */ jsx5(
+      "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 = useRef3(void 0);
+  useEffect3(() => {
+    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
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect4,
+  useMemo as useMemo5,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
+function Root({
+  recipe,
+  parse,
+  fallback = null,
+  children,
+  ...options
+}) {
+  const result = useMemo5(() => {
+    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__ */ jsx6(Fragment3, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx6(RecipeProvider, { ...options, recipe: result.data, children });
+}
+function RecipeProvider({ children, ...options }) {
+  const { locale, labels, defaultSystem } = useConfig(options);
+  const state = useRecipeState({ ...options, defaultSystem });
+  const [temperatures, setTemperatures] = useState2(0);
+  const reportTemperature = useCallback5(() => {
+    setTemperatures((count) => count + 1);
+    return () => setTemperatures((count) => count - 1);
+  }, []);
+  const canConvert = state.canConvert || temperatures > 0;
+  const value = useMemo5(() => ({ ...state, canConvert }), [state, canConvert]);
+  const { recipe, steps } = state;
+  const data = useMemo5(
+    () => ({ recipe, steps, labels, locale, reportTemperature }),
+    [recipe, steps, labels, locale, reportTemperature]
+  );
+  return /* @__PURE__ */ jsx6(RecipeDataContext.Provider, { value: data, children: /* @__PURE__ */ jsx6(RecipeStateContext.Provider, { value, children }) });
+}
+function useParseReport(result) {
+  const reported = useRef4(void 0);
+  useEffect4(() => {
+    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
+import {
+  formatServings,
+  formatYield
+} from "@recipe-book/core";
+import {
+  useState as useState3
+} from "react";
+
+// src/compose-event-handlers.ts
+function composeEventHandlers(theirs, ours) {
+  return (event) => {
+    theirs?.(event);
+    if (!event.defaultPrevented) {
+      ours(event);
+    }
+  };
+}
+
+// src/parts/servings.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ServingsSelect = /* @__PURE__ */ 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__ */ jsx7(
+      "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__ */ jsx7("option", { value: choice, children: optionText(choice, recipe, base, labels, locale) }, choice))
+      }
+    );
+  }
+);
+var ServingsInput = /* @__PURE__ */ 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] = useState3({ 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__ */ jsx7(
+      "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 formatYield(
+      {
+        amount: choice,
+        unit: labels.servingUnit.one,
+        plural: labels.servingUnit.other
+      },
+      format
+    );
+  }
+  if (base === makes?.amount) {
+    return formatYield(
+      { amount: choice, unit: makes.unit, plural: makes.plural },
+      format
+    );
+  }
+  return `${formatServings({ amount: choice }, format)}\xD7`;
+}
+
+// src/parts/step-text.tsx
+import {
+  convertTemperature,
+  formatTemperature,
+  segmentStepText
+} from "@recipe-book/core";
+import {
+  useEffect as useEffect5,
+  useMemo as useMemo6
+} from "react";
+
+// src/parts/steps.tsx
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Steps = /* @__PURE__ */ forwardRef(function Steps2({ headingLevel = 3, children, ...props }, ref) {
+  const { steps } = useRecipeData("Recipe.Steps");
+  const renderSection = children ?? ((section) => /* @__PURE__ */ jsx8(
+    SectionBlock,
+    {
+      kind: "step",
+      title: section.title,
+      headingLevel,
+      children: /* @__PURE__ */ jsx8(StepList, { section })
+    }
+  ));
+  return /* @__PURE__ */ jsx8("div", { ...props, "data-recipe-steps": "", ref, children: renderKeyed(steps, renderSection) });
+});
+var StepList = /* @__PURE__ */ forwardRef(
+  function StepList2({ section, children = (step) => /* @__PURE__ */ jsx8(Step, { item: step }), start, ...props }, ref) {
+    const { steps } = useRecipeData("Recipe.StepList");
+    const items = section?.items ?? steps.flatMap((s) => s.items);
+    return /* @__PURE__ */ jsx8(
+      "ol",
+      {
+        ...props,
+        start: start ?? items[0]?.number,
+        "data-recipe-step-list": "",
+        ref,
+        children: renderKeyed(items, children)
+      }
+    );
+  }
+);
+var StepContext = /* @__PURE__ */ createContext(null);
+var Step = /* @__PURE__ */ forwardRef(function Step2({ item, asChild = false, children, ...props }, ref) {
+  useRecipeData("Recipe.Step");
+  const [Comp, content] = resolveAsChild(
+    "Recipe.Step",
+    "li",
+    asChild,
+    children,
+    /* @__PURE__ */ jsxs3(Fragment4, { children: [
+      /* @__PURE__ */ jsx8(StepName, {}),
+      item.name !== void 0 && " ",
+      item.text
+    ] })
+  );
+  return /* @__PURE__ */ jsx8(StepContext.Provider, { value: item, children: /* @__PURE__ */ jsx8(Comp, { ...props, "data-recipe-step": "", ref, children: content }) });
+});
+var StepName = /* @__PURE__ */ forwardRef(
+  function StepName2(props, ref) {
+    const step = useRequired(
+      StepContext,
+      "<Recipe.StepName> must be rendered inside <Recipe.Step>."
+    );
+    return step.name === void 0 ? null : /* @__PURE__ */ jsx8("b", { ...props, "data-recipe-name": "", ref, children: step.name });
+  }
+);
+
+// src/parts/step-text.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var StepText = /* @__PURE__ */ forwardRef(
+  function StepText2(props, ref) {
+    const step = useRequired(
+      StepContext,
+      "<Recipe.StepText> must be rendered inside <Recipe.Step>."
+    );
+    const segments = useMemo6(() => segmentStepText(step.text), [step.text]);
+    return /* @__PURE__ */ jsx9("span", { ...props, "data-recipe-step-text": "", ref, children: segments.map(
+      (segment, index) => segment.type === "temperature" ? /* @__PURE__ */ jsx9(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];
+  useEffect5(reportTemperature, [reportTemperature]);
+  return /* @__PURE__ */ jsx9("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 && formatTemperature(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
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect6,
+  useId as useId2,
+  useMemo as useMemo7,
+  useState as useState4
+} from "react";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var ToggleContext = /* @__PURE__ */ createContext(
+  null
+);
+var SystemToggle = /* @__PURE__ */ 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] = useState4([]);
+    const [chosen, choose] = useState4();
+    const offer = useCallback6((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 = useMemo7(
+      () => ({ system, setSystem, disabled, tabStop, offer, choose }),
+      [system, setSystem, disabled, tabStop, offer]
+    );
+    const [Comp, content] = resolveAsChild(
+      "Recipe.SystemToggle",
+      "div",
+      asChild,
+      children,
+      /* @__PURE__ */ jsxs4(Fragment5, { children: [
+        /* @__PURE__ */ jsx10(SystemOption, { value: "metric" }),
+        /* @__PURE__ */ jsx10(SystemOption, { value: "us" })
+      ] })
+    );
+    return /* @__PURE__ */ jsx10(ToggleContext.Provider, { value: context, children: /* @__PURE__ */ jsx10(
+      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__ */ 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 = useId2();
+    const disabled = groupDisabled || ownDisabled;
+    const checked = value === system;
+    useEffect6(
+      () => 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__ */ jsx10(
+      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";
+}
+export {
+  Image,
+  Ingredient,
+  IngredientList,
+  IngredientName,
+  IngredientNote,
+  IngredientOptional,
+  IngredientQuantity,
+  Ingredients,
+  JsonLd,
+  RecipeBookProvider,
+  Image as RecipeImage,
+  Ingredient as RecipeIngredient,
+  IngredientList as RecipeIngredientList,
+  IngredientName as RecipeIngredientName,
+  IngredientNote as RecipeIngredientNote,
+  IngredientOptional as RecipeIngredientOptional,
+  IngredientQuantity as RecipeIngredientQuantity,
+  Ingredients as RecipeIngredients,
+  JsonLd as RecipeJsonLd,
+  Root as RecipeRoot,
+  ServingsInput as RecipeServingsInput,
+  ServingsSelect as RecipeServingsSelect,
+  Step as RecipeStep,
+  StepList as RecipeStepList,
+  StepName as RecipeStepName,
+  StepText as RecipeStepText,
+  Steps as RecipeSteps,
+  SystemOption as RecipeSystemOption,
+  SystemToggle as RecipeSystemToggle,
+  Root,
+  ServingsInput,
+  ServingsSelect,
+  Step,
+  StepList,
+  StepName,
+  StepText,
+  Steps,
+  SystemOption,
+  SystemToggle,
+  useFormatIngredient,
+  useRecipe,
+  useRecipeState
+};
+//# sourceMappingURL=index.js.map