@recipe-book/react 0.0.3 → 0.1.1

package/dist/index.d.cts

@@ -0,0 +1,1276 @@
+import { ElementType, ComponentPropsWithoutRef, Ref, ComponentRef, ReactNode, ForwardRefExoticComponent, RefAttributes, JSX } from 'react';
+import { ResolvedIngredient, Recipe, System, Step as Step$1, ParseResult, FormattedIngredient, QuantityPart } from '@recipe-book/core';
+import { ToJsonLdOptions } from '@recipe-book/core/schema-org';
+
+/** What `<Recipe.Image>` passes to `as`: a string `src` and `alt`. */
+type ImageAttributes = {
+    src: string;
+    alt: string;
+};
+/** The type error for an `as` component whose `src` and `alt` props don't take a string. */
+type NotAnImageComponent = 'Recipe.Image: as must be a component whose src and alt props take a string';
+/** `C` when its `src` and `alt` props take a string, else `NotAnImageComponent`. */
+type ImageComponent<C extends ElementType> = 'src' | 'alt' extends keyof ComponentPropsWithoutRef<C> ? ImageAttributes extends Pick<ComponentPropsWithoutRef<C>, 'src' | 'alt'> ? C : NotAnImageComponent : NotAnImageComponent;
+/**
+ * The props of `<Recipe.Image>`: those of `C` without its `ref`, with `src`
+ * and `alt` optional, plus `as`. `C` defaults to `'img'`. Use it to type a
+ * wrapper that takes what `<Recipe.Image as={C}>` takes.
+ *
+ * @example
+ * import NextImage from 'next/image'
+ *
+ * function Hero(props: Recipe.RecipeImageProps<typeof NextImage>) {
+ *   return <Recipe.Image {...props} as={NextImage} className="hero" />
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/image/#type-a-wrapper
+ */
+type RecipeImageProps<C extends ElementType = 'img'> = {
+    /**
+     * The component to render instead of `<img>`, such as `next/image`. It
+     * gets `src`, `alt`, `data-recipe-image` and the ref, and `Recipe.Image`
+     * takes its props. Its `src` and `alt` must take strings, and its other
+     * required props are required on `Recipe.Image`. From a Server Component,
+     * pass a Client Component: one whose module starts with `'use client'`, as
+     * `next/image`'s does.
+     *
+     * @defaultValue `'img'`
+     *
+     * @see https://recipe-book.siraj.page/reference/react/image/#render-another-component
+     */
+    as?: ImageComponent<C> | undefined;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'src' | 'alt'> & {
+    /**
+     * Replaces the recipe's `image`, such as with a CDN URL. Nothing renders
+     * when the recipe has no `image`, even with `src`. With `as`, it takes
+     * that component's `src` type, such as `string | StaticImport` for
+     * `next/image`.
+     *
+     * @defaultValue The recipe's `image`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/image/#image
+     */
+    src?: (ComponentPropsWithoutRef<C> extends {
+        src?: infer S;
+    } ? S : never) | undefined;
+    /**
+     * The alt text. Pass `''` for a decorative image.
+     *
+     * @defaultValue The recipe's `name`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/image/#decorative-images
+     */
+    alt?: string | undefined;
+};
+/**
+ * The recipe's image, as an `<img>` or the component passed to `as`, or
+ * nothing when the recipe has none. `src` defaults to the recipe's image and
+ * `alt` to its name; pass `alt=""` when the image is decorative. Other props
+ * pass through, and it always sets `data-recipe-image`.
+ *
+ * `Recipe.Image` takes `as`, not `asChild`, so a component such as
+ * `next/image` gets `src` and `alt` from the recipe and still has its
+ * required props checked.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @example
+ * import NextImage from 'next/image'
+ *
+ * function RecipeHero() {
+ *   return <Recipe.Image as={NextImage} width={1200} height={800} />
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/image/
+ */
+declare const Image: <C extends ElementType = "img">(props: RecipeImageProps<C> & {
+    /**
+     * Set to the `<img>`, or passed to the `as` component. Left unset when the recipe has no image.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/image/#image
+     */
+    ref?: Ref<ComponentRef<C>> | undefined;
+}) => ReactNode;
+
+/**
+ * What `useRecipeState()` takes. The state props of `<Recipe.Root>` are the
+ * same.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/hooks/#recipestateoptions
+ */
+type RecipeStateOptions = {
+    /** A parsed recipe, as returned by `parseRecipe` in `@recipe-book/react/core`. */
+    recipe: Recipe;
+    /**
+     * The number of servings to show. Passing it makes servings controlled. A
+     * number outside the servings window shows `defaultServings` instead, with a
+     * warning in development.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/root/#controlled-and-uncontrolled-state
+     */
+    servings?: number | undefined;
+    /**
+     * Starting servings when uncontrolled. A number outside the servings window
+     * falls back to the scaling base, with a warning in development.
+     *
+     * @defaultValue The recipe's scaling base: its servings, then its yield,
+     * then 1.
+     * @see https://recipe-book.siraj.page/reference/react/root/#scaling-base
+     */
+    defaultServings?: number | undefined;
+    /**
+     * Called when `setServings` accepts a number other than the current one,
+     * whether or not servings are controlled. While a controlled `servings` is
+     * outside the range `setServings` accepts, passing it the number shown calls
+     * this too.
+     */
+    onServingsChange?: ((servings: number) => void) | undefined;
+    /** The measurement system to show. Passing it makes the system controlled. */
+    system?: System | undefined;
+    /** Starting system when uncontrolled; defaults to the system the recipe was written in, then `'metric'`. */
+    defaultSystem?: System | undefined;
+    /**
+     * Called when `setSystem` accepts a system other than the current one,
+     * whether or not it's controlled. While a controlled `system` is neither
+     * `'metric'` nor `'us'`, passing `setSystem` the system shown calls this too.
+     */
+    onSystemChange?: ((system: System) => void) | undefined;
+};
+/**
+ * An ingredient scaled to the servings and expressed in the display
+ * system, unrounded and unformatted. Render its text with the ingredient
+ * sub-parts inside `<Recipe.Ingredient>`, or format it with
+ * `useFormatIngredient()`.
+ */
+type IngredientItem = ResolvedIngredient;
+/** A step with its position, counted from 1 across sections. */
+type StepItem = Step$1 & {
+    /** The step's position, counted from 1 across sections. */
+    number: number;
+};
+/**
+ * A section of a recipe's ingredients or steps. Untitled sections have no
+ * `title`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/hooks/#recipesection
+ */
+type RecipeSection<T> = {
+    /** The section's id from the recipe. */
+    id: string;
+    /** The section's title from the recipe. */
+    title?: string | undefined;
+    /** The ingredients or steps in the section. */
+    items: T[];
+};
+/**
+ * What `useRecipe()` and `useRecipeState()` return.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/hooks/#recipestate
+ */
+type RecipeState = {
+    /** The parsed recipe. */
+    recipe: Recipe;
+    /** The number of servings shown. For a recipe with a yield but no servings, it counts in the yield's unit. */
+    servings: number;
+    /**
+     * Calls `onServingsChange` with a number other than the current one, and
+     * changes the servings unless controlled. Ignores a number outside the
+     * servings window, from a millionth to a million times the scaling base
+     * including both ends, and warns about it in development. While a
+     * controlled `servings` is outside that window, passing the number shown
+     * calls `onServingsChange` too.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/root/#servings-window
+     */
+    setServings: (servings: number) => void;
+    /** From `resolveRecipe`: `servings` divided by the recipe's servings amount, else its yield amount, else 1. */
+    scale: number;
+    /** The display system. */
+    system: System;
+    /**
+     * Calls `onSystemChange` with a system other than the current one, and
+     * changes the system unless controlled; ignores anything but `'metric'` and
+     * `'us'`. While a controlled `system` is neither, passing the system shown
+     * calls `onSystemChange` too.
+     */
+    setSystem: (system: System) => void;
+    /**
+     * True when an ingredient's quantity has a unit that belongs to only one
+     * system. Under `<Recipe.Root>`, a `Recipe.StepText` that shows a
+     * temperature also counts once it mounts, which is after the server render.
+     * This hook alone reads ingredients only.
+     */
+    canConvert: boolean;
+    /** From `resolveRecipe`: each section's ingredients at `servings`, in `system`. */
+    ingredients: RecipeSection<IngredientItem>[];
+    /** The recipe's steps in their sections, numbered from 1 across sections. */
+    steps: RecipeSection<StepItem>[];
+};
+/**
+ * Headless recipe state: servings, the display system, and data derived from
+ * them. Needs no provider and renders nothing. `<Recipe.Root>` is built on it.
+ *
+ * Each piece of state is controlled when its value is defined (`servings`,
+ * `system`) and uncontrolled otherwise. Uncontrolled state resets when
+ * `recipe.id` changes.
+ *
+ * @throws {RecipeBookError} `invalid_argument` in development when `recipe`
+ *   isn't a parsed recipe.
+ *
+ * @param options - The recipe and its state.
+ * @returns The recipe, its servings and display system with their setters,
+ *   its ingredients at those settings, and its numbered steps.
+ *
+ * @example
+ * import type { Recipe as ParsedRecipe } from '@recipe-book/react/core'
+ * import * as Recipe from '@recipe-book/react'
+ *
+ * function ServingsSummary({ recipe }: { recipe: ParsedRecipe }) {
+ *   const { servings, scale } = Recipe.useRecipeState({
+ *     recipe,
+ *     defaultServings: 8,
+ *   })
+ *   return <p>{`Serves ${servings}, scaled ×${scale}`}</p>
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/hooks/#userecipestate
+ */
+declare function useRecipeState(options: RecipeStateOptions): RecipeState;
+
+/**
+ * The heading levels `<Recipe.Ingredients>` and `<Recipe.Steps>` take as
+ * `headingLevel` for section titles; level 1 belongs to the page's title.
+ * Both default to 3, for sections under an `<h2>` such as "Ingredients". Pass
+ * the level below your own heading to keep the outline in order.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#recipeheadinglevel
+ */
+type RecipeHeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+/**
+ * Attributes for the wrapping `<div>` other than `dangerouslySetInnerHTML`,
+ * plus `headingLevel`; `children` renders each section.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredients
+ */
+type RecipeIngredientsProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Heading level of section titles in the default rendering. Defaults to 3,
+     * for ingredients under an `<h2>` such as "Ingredients".
+     *
+     * @defaultValue `3`
+     * @see https://recipe-book.siraj.page/guides/make-a-recipe-accessible/#set-heading-levels
+     */
+    headingLevel?: RecipeHeadingLevel | undefined;
+    /**
+     * Renders each section instead of the default. Each result is keyed for
+     * you, so return one element or a fragment; an array's items need their own
+     * keys, as anywhere in React.
+     *
+     * @defaultValue A `<section>` named by the section's heading, or a `<div>`
+     * for an untitled section, around a `<Recipe.IngredientList>` of its
+     * ingredients.
+     * @see https://recipe-book.siraj.page/reference/react/ingredients/#render-your-own-sections
+     */
+    children?: ((section: RecipeSection<IngredientItem>) => ReactNode) | undefined;
+};
+/**
+ * The recipe's ingredients at the current servings and display system, one
+ * block per section. A titled section renders as a `<section>` named by its
+ * heading, then a `<Recipe.IngredientList>`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ * @throws {RecipeBookError} `invalid_argument` from the `<Recipe.Ingredient>`
+ *   it renders for each item by default, when Root's `locale` isn't a language
+ *   tag that `Intl` accepts, such as `'en_US'`.
+ *
+ * @example
+ * <Recipe.Root recipe={recipe}>
+ *   <h2>Ingredients</h2>
+ *   <Recipe.Ingredients />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredients
+ */
+declare const Ingredients: ForwardRefExoticComponent<RecipeIngredientsProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Attributes for the `<ul>` other than `dangerouslySetInnerHTML`, plus the
+ * `section` to list; `children` renders each ingredient.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredientlist
+ */
+type RecipeIngredientListProps = Omit<ComponentPropsWithoutRef<'ul'>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /** The section to list. Defaults to every ingredient in the recipe. */
+    section?: RecipeSection<IngredientItem> | undefined;
+    /**
+     * Renders each ingredient instead of `<Recipe.Ingredient>`. Each result is
+     * keyed for you, so return one element or a fragment; an array's items need
+     * their own keys, as anywhere in React.
+     *
+     * @defaultValue `(item) => <Recipe.Ingredient item={item} />`
+     * @see https://recipe-book.siraj.page/reference/react/ingredients/#render-your-own-ingredients
+     */
+    children?: ((item: IngredientItem) => ReactNode) | undefined;
+};
+/**
+ * An unordered list of ingredients, one `<Recipe.Ingredient>` each unless
+ * `children` renders them.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ * @throws {RecipeBookError} `invalid_argument` from the `<Recipe.Ingredient>`
+ *   it renders for each item by default, when Root's `locale` isn't a language
+ *   tag that `Intl` accepts, such as `'en_US'`.
+ *
+ * @example
+ * <Recipe.IngredientList>
+ *   {(item) => (
+ *     <Recipe.Ingredient item={item}>
+ *       <Recipe.IngredientName /> <Recipe.IngredientQuantity />
+ *     </Recipe.Ingredient>
+ *   )}
+ * </Recipe.IngredientList>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredientlist
+ */
+declare const IngredientList: ForwardRefExoticComponent<RecipeIngredientListProps & RefAttributes<HTMLUListElement>>;
+/**
+ * Attributes for the `<li>` other than `dangerouslySetInnerHTML`, plus the
+ * `item` to render and `asChild`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredient
+ */
+type RecipeIngredientProps = Omit<ComponentPropsWithoutRef<'li'>, 'dangerouslySetInnerHTML'> & {
+    /** The ingredient to render, such as one that `<Recipe.IngredientList>` passes to its `children`. */
+    item: IngredientItem;
+    /**
+     * Renders the line as its one element child, such as `<motion.li layout />`,
+     * instead of an `<li>`. A prop on the child wins, except that the line's
+     * `tabIndex` wins, `className`s join, `style` merges key by key with the
+     * child winning, both event handlers run (the child's first), and both refs
+     * are set. The child's own children replace the line's, so an empty child
+     * gets the default line. With anything but one element child, it renders
+     * its own `<li>`, with a warning in development.
+     *
+     * @defaultValue `false`
+     * @see https://recipe-book.siraj.page/reference/react/ingredients/#render-your-own-element
+     */
+    asChild?: boolean | undefined;
+};
+/**
+ * One ingredient line, formatted with the nearest Root's locale and labels.
+ * Default children are `<Recipe.IngredientQuantity>`,
+ * `<Recipe.IngredientName>`, and `<Recipe.IngredientNote>`, joined as in
+ * `formatIngredient`'s `text`, then `<Recipe.IngredientOptional>` after a
+ * space. Custom children can use the same sub-parts, which render this line's
+ * text.
+ *
+ * `data-origin` tells where the quantity comes from: `authored`, `equivalent`,
+ * or `converted` into the display system. Unquantified lines have
+ * `data-unquantified` instead. Optional ingredients have `data-optional`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ * @throws {RecipeBookError} `invalid_argument` when Root's `locale` isn't a
+ *   language tag that `Intl` accepts, such as `'en_US'`; when `item` isn't
+ *   `{ ingredient, quantity? }`, such as an authored ingredient; or when an
+ *   `item` you build has an amount that isn't a finite number greater than 0
+ *   or a range of them, or a range whose `min` isn't less than its `max`.
+ * @throws {RecipeBookError} `unknown_unit` when the item's unit isn't a unit
+ *   ID.
+ *
+ * @example
+ * <Recipe.Ingredient item={item} className="flex gap-2">
+ *   <Recipe.IngredientQuantity className="w-24 tabular-nums" />
+ *   <Recipe.IngredientName />
+ *   <Recipe.IngredientNote className="text-stone-500" />
+ * </Recipe.Ingredient>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredient
+ */
+declare const Ingredient: ForwardRefExoticComponent<RecipeIngredientProps & RefAttributes<HTMLLIElement>>;
+/** Attributes for an ingredient sub-part's `<span>`, plus `asChild`; `children` go before its text. */
+type IngredientTextProps = Omit<ComponentPropsWithoutRef<'span'>, 'dangerouslySetInnerHTML'> & {
+    /**
+     * Renders as its one element child, such as `<a href={url} />`, instead of a
+     * `<span>`, with the text after the child's own children. A prop on the
+     * child wins, except that the part's `tabIndex` wins, `className`s join,
+     * `style` merges key by key with the child winning, both event handlers run
+     * (the child's first), and both refs are set. With anything but one element
+     * child, it renders its own `<span>`, with a warning in development.
+     */
+    asChild?: boolean | undefined;
+};
+/** Attributes for the `<span>`, plus `asChild`; `children` go before the quantity. */
+type RecipeIngredientQuantityProps = IngredientTextProps;
+/**
+ * The nearest `<Recipe.Ingredient>`'s formatted quantity, or nothing for an
+ * unquantified line. A range's dash is hidden from screen readers, which hear
+ * `labels.to` instead: "2 to 3 tbsp". Children come before the quantity.
+ *
+ * @example
+ * <Recipe.IngredientQuantity>
+ *   {item.origin === 'converted' && '≈ '}
+ * </Recipe.IngredientQuantity>
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Ingredient>`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredientquantity
+ */
+declare const IngredientQuantity: ForwardRefExoticComponent<RecipeIngredientQuantityProps & RefAttributes<HTMLSpanElement>>;
+/** Attributes for the `<span>`, plus `asChild`; `children` go before the name. */
+type RecipeIngredientNameProps = IngredientTextProps;
+/**
+ * The nearest `<Recipe.Ingredient>`'s name, or its `plural` after a bare
+ * count that takes the plural, as in "2 eggs". Children come before the name.
+ *
+ * @example
+ * // The name goes inside the link.
+ * <Recipe.IngredientName asChild>
+ *   <a href={`/glossary/${item.id}`} />
+ * </Recipe.IngredientName>
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Ingredient>`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredientname
+ */
+declare const IngredientName: ForwardRefExoticComponent<RecipeIngredientNameProps & RefAttributes<HTMLSpanElement>>;
+/** Attributes for the `<span>`, plus `asChild`; `children` go before the note. */
+type RecipeIngredientNoteProps = IngredientTextProps;
+/**
+ * The nearest `<Recipe.Ingredient>`'s note, such as "sifted", or nothing when
+ * it has none. Children come before the note.
+ *
+ * @example
+ * <Recipe.IngredientNote className="text-stone-500" />
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Ingredient>`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredientnote
+ */
+declare const IngredientNote: ForwardRefExoticComponent<RecipeIngredientNoteProps & RefAttributes<HTMLSpanElement>>;
+/** Attributes for the `<span>`, plus `asChild`; `children` go before the label. */
+type RecipeIngredientOptionalProps = IngredientTextProps;
+/**
+ * `labels.optional`, "(optional)" by default, when the nearest
+ * `<Recipe.Ingredient>` is optional; nothing otherwise. It's text, so screen
+ * readers read it with the line. Children come before the label.
+ *
+ * @example
+ * <Recipe.IngredientOptional className="text-stone-500" />
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Ingredient>`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/ingredients/#ingredientoptional
+ */
+declare const IngredientOptional: ForwardRefExoticComponent<RecipeIngredientOptionalProps & RefAttributes<HTMLSpanElement>>;
+
+/**
+ * The props of `<Recipe.JsonLd>`: `toJsonLd`'s `servings`, `system`, `url`
+ * and `extra`, passed to it as they are, plus the `<script>`'s attributes but
+ * `type`, `src` and its content, which `<Recipe.JsonLd>` sets.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/json-ld/#jsonld
+ */
+type RecipeJsonLdProps = {
+    /**
+     * Writes the recipe at this many servings, as `resolveRecipe` scales it.
+     * The Root's servings don't change it.
+     *
+     * @defaultValue The recipe's own servings, unscaled.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/json-ld/#jsonld
+     */
+    servings?: ToJsonLdOptions['servings'];
+    /**
+     * Writes quantities in this measurement system. The Root's system doesn't
+     * change it.
+     *
+     * @defaultValue `recipe.system`, then `'metric'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/json-ld/#jsonld
+     */
+    system?: ToJsonLdOptions['system'];
+    /**
+     * The recipe page's URL. Each step gets it as `url`, with the step's id,
+     * percent-encoded, as the fragment; without it, steps have no `url`.
+     * `<Recipe.Step>` renders no `id`, so pass it the step's `id` for the
+     * fragment to point at it.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/json-ld/#step-ids
+     */
+    url?: ToJsonLdOptions['url'];
+    /**
+     * schema.org fields the recipe doesn't model, such as `author`,
+     * `datePublished`, or `keywords`, written as you pass them. A field
+     * `toJsonLd` writes from the recipe wins; `@context` and `@type` are always
+     * its own. A field that is `undefined` is left out, so
+     * `{ image: maybeImage }` adds an image only when there is one, and an
+     * `image` here stops the missing-image warning. A field `toJsonLd` writes
+     * from a recipe takes the type `SchemaOrgRecipe` gives it here too, so an
+     * `image` is a URL. Pass the `extra` that `fromJsonLd` returned to write them
+     * back.
+     *
+     * @example
+     * <Recipe.JsonLd
+     *   url="https://example.com/pancakes"
+     *   extra={{ author: { '@type': 'Person', name: 'Ada Lovelace' } }}
+     * />
+     *
+     * @see https://recipe-book.siraj.page/reference/react/json-ld/#jsonld
+     */
+    extra?: ToJsonLdOptions['extra'];
+} & Omit<ComponentPropsWithoutRef<'script'>, 'type' | 'children' | 'dangerouslySetInnerHTML' | 'src'>;
+/**
+ * The recipe as schema.org Recipe JSON-LD, for search engines' recipe results,
+ * in a `<script type="application/ld+json">` with `<` escaped as `\u003c`.
+ * Writes the recipe as authored: at its own servings and in `recipe.system`,
+ * else metric, unless `servings` or `system` say otherwise. Root's current
+ * servings and system don't change it. The text is in English. Other props
+ * pass to the `<script>`, and it always sets `data-recipe-json-ld`.
+ *
+ * In development, logs to the browser console the warnings that `toJsonLd`
+ * returns, such as for a missing `image`, unless the previous render had the
+ * same ones in the same order. Nothing logs where it renders only on the
+ * server, such as in an Astro page without a `client:` directive.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @example
+ * // app/pancakes/page.tsx, a Server Component: no 'use client' needed
+ * export default function Page() {
+ *   return (
+ *     <Recipe.Root recipe={recipe}>
+ *       <Recipe.JsonLd url="https://example.com/pancakes" />
+ *     </Recipe.Root>
+ *   )
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/json-ld/
+ */
+declare const JsonLd: ForwardRefExoticComponent<RecipeJsonLdProps & RefAttributes<HTMLScriptElement>>;
+
+/**
+ * Built-in text that parts render or announce. Override any of it with the
+ * `labels` prop on `<Recipe.Root>` or `<RecipeBookProvider>`.
+ *
+ * A new key is additive: labels that leave it out keep its English default,
+ * and a label pack checked with `satisfies RecipeLabels` gets a compile error
+ * naming the new key.
+ *
+ * @example
+ * const spanish = {
+ *   servings: 'Raciones',
+ *   servingUnit: { one: 'ración', other: 'raciones' },
+ *   system: 'Sistema de medida',
+ *   metric: 'Métrico',
+ *   us: 'EE. UU.',
+ *   fan: 'con ventilador',
+ *   optional: '(opcional)',
+ *   to: 'a',
+ * } satisfies Recipe.RecipeLabels
+ *
+ * <Recipe.RecipeBookProvider locale="es-ES" labels={spanish}>
+ *   {children}
+ * </Recipe.RecipeBookProvider>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/provider/
+ */
+type RecipeLabels = {
+    /**
+     * Accessible name of `<Recipe.ServingsSelect>` and `<Recipe.ServingsInput>`,
+     * unless they get an `aria-label` or `aria-labelledby`. Defaults to
+     * `'Servings'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    servings: string;
+    /**
+     * Unit for the servings count: "1 serving", "4 servings".
+     * `<Recipe.ServingsSelect>` words each option with it, for a recipe with
+     * `servings`. Defaults to `{ one: 'serving', other: 'servings' }`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    servingUnit: {
+        /** Follows 1 and a fraction below 1: "1 serving", "½ serving". */
+        one: string;
+        /** Follows decimals and any other number: "0.3 servings", "4 servings". */
+        other: string;
+    };
+    /**
+     * Accessible name of `<Recipe.SystemToggle>`, unless it gets an
+     * `aria-label` or `aria-labelledby`. Defaults to `'Measurement system'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    system: string;
+    /**
+     * Name of the metric system, shown by a `<Recipe.SystemOption>` for
+     * `'metric'` that has no children, or an empty `asChild` child. Defaults to
+     * `'Metric'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    metric: string;
+    /**
+     * Name of the US system, shown by a `<Recipe.SystemOption>` for `'us'` that
+     * has no children, or an empty `asChild` child. Defaults to `'US'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    us: string;
+    /**
+     * Marker after a fan-oven temperature in `<Recipe.StepText>`: "160 °C fan".
+     * An empty string leaves it out. Defaults to `'fan'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    fan: string;
+    /**
+     * Marker after an optional ingredient, shown as is, punctuation included.
+     * `<Recipe.IngredientOptional>` renders it, and the function from
+     * `useFormatIngredient()` returns it as `optional`. Defaults to
+     * `'(optional)'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    optional: string;
+    /**
+     * Spoken between the ends of a range, "2 to 3 tbsp". Screen readers only:
+     * `<Recipe.IngredientQuantity>` keeps the visible dash, "2–3 tbsp".
+     * Defaults to `'to'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     */
+    to: string;
+};
+
+/** The locale, labels, and starting system that `RecipeBookProvider` and `<Recipe.Root>` take. */
+type RecipeBookConfig = {
+    /**
+     * A language tag that `Intl` accepts, such as `'de-DE'`, for formatting
+     * numbers. With a tag it rejects, such as `'en_US'`, formatting a number
+     * throws `invalid_argument`.
+     *
+     * @defaultValue The outer provider's `locale`, then `'en-US'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/#recipebookprovider
+     * @see https://recipe-book.siraj.page/reference/react/root/#root
+     */
+    locale?: string | undefined;
+    /**
+     * Built-in text to override. A key you leave out keeps the outer provider's
+     * value, then its English default. Pass an object that keeps its identity
+     * between renders: an equal but new one re-renders most parts.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/
+     * @see https://recipe-book.siraj.page/reference/react/root/
+     */
+    labels?: RecipeLabelOverrides | undefined;
+    /**
+     * The measurement system a Root starts in, unless its `system` is
+     * controlled. Defaults to the outer provider's, then the system its recipe
+     * was written in, then `'metric'`. A value other than `'metric'` or `'us'`
+     * counts as missing.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/#recipebookprovider
+     * @see https://recipe-book.siraj.page/reference/react/root/#root
+     */
+    defaultSystem?: System | undefined;
+};
+/**
+ * Built-in text to override, for the `labels` prop of `RecipeBookProvider` and
+ * `<Recipe.Root>`.
+ *
+ * Any keys of `RecipeLabels`. A value replaces the whole key, so `servingUnit`
+ * needs both `one` and `other`.
+ *
+ * @example
+ * // At module scope, so it keeps its identity between renders.
+ * const labels = {
+ *   servings: 'Portions',
+ *   servingUnit: { one: 'portion', other: 'portions' },
+ * } satisfies Recipe.RecipeLabelOverrides
+ *
+ * <Recipe.Root recipe={recipe} labels={labels}>
+ *   <Recipe.ServingsSelect />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/provider/#recipelabeloverrides
+ */
+type RecipeLabelOverrides = {
+    [Key in keyof RecipeLabels]?: RecipeLabels[Key] | undefined;
+};
+/**
+ * Props of `RecipeBookProvider`: defaults for every Root below it, plus
+ * `children`.
+ *
+ * @example
+ * export function AppProvider(props: Recipe.RecipeBookProviderProps) {
+ *   return <Recipe.RecipeBookProvider locale="en-GB" {...props} />
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/provider/#recipebookprovider
+ */
+type RecipeBookProviderProps = RecipeBookConfig & {
+    /**
+     * The part of the app that uses these defaults.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/provider/#recipebookprovider
+     */
+    children?: ReactNode;
+};
+/**
+ * App-wide defaults for every `<Recipe.Root>` below it. Takes only data, so it
+ * can wrap a layout rendered as a Server Component. Nested providers override
+ * the outer one key by key.
+ *
+ * @example
+ * // app/layout.tsx
+ * <Recipe.RecipeBookProvider defaultSystem="metric">
+ *   {children}
+ * </Recipe.RecipeBookProvider>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/provider/#recipebookprovider
+ */
+declare function RecipeBookProvider({ children, ...config }: RecipeBookProviderProps): JSX.Element;
+/**
+ * The state of the nearest `<Recipe.Root>`: the recipe, servings, and
+ * measurement system, with their setters.
+ *
+ * @returns The Root's `RecipeState`: `recipe`, `servings`, `scale`, `system`,
+ * `canConvert`, `ingredients` and `steps` as the Root shows them, and the
+ * `setServings` and `setSystem` that change them.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a Root.
+ *
+ * @example
+ * function SystemSwitch() {
+ *   const { system, setSystem, canConvert } = Recipe.useRecipe()
+ *   if (!canConvert) return null
+ *   return (
+ *     <button onClick={() => setSystem(system === 'us' ? 'metric' : 'us')}>
+ *       {system === 'us' ? 'Show metric' : 'Show US'}
+ *     </button>
+ *   )
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/hooks/#userecipe
+ */
+declare function useRecipe(): RecipeState;
+
+/**
+ * The props of `<Recipe.Root>`, a union: a parsed `recipe`, or raw data with
+ * `parse`. To wrap `Root`, intersect (`RecipeRootProps & { … }`) or
+ * destructure it, rather than `Omit<RecipeRootProps, …>`, which doesn't
+ * type-check against a union.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/root/#root
+ * @see https://recipe-book.siraj.page/reference/react/root/#wrap-root
+ */
+type RecipeRootProps = RecipeBookConfig & Omit<RecipeStateOptions, 'recipe' | 'defaultSystem'> & {
+    /** The parts and components that read the recipe's state. */
+    children?: ReactNode;
+} & ({
+    /**
+     * A parsed recipe. Call `parseRecipe` from `@recipe-book/react/core`
+     * on the server, in a loader, or at build time, and pass
+     * `result.data`.
+     */
+    recipe: Recipe;
+    /** Only with recipe data to parse. A parsed recipe takes no `parse`. */
+    parse?: undefined;
+    /** Only with `parse`. A parsed recipe always renders. */
+    fallback?: undefined;
+} | {
+    /** Recipe data for `parse` to validate and normalize. */
+    recipe: unknown;
+    /**
+     * Parses `recipe` in the browser. Pass `parseRecipe` from
+     * `@recipe-book/react/core`; only apps that do download the parser.
+     *
+     * A function, so it can only be passed from a Client Component. Pass a
+     * stable function such as `parseRecipe` itself: an inline arrow
+     * parses again on every render.
+     */
+    parse: (input: unknown) => ParseResult<Recipe>;
+    /**
+     * Rendered instead of `children` when `parse` rejects `recipe`.
+     *
+     * @defaultValue `null`
+     * @see https://recipe-book.siraj.page/reference/react/root/#parse-in-the-browser
+     */
+    fallback?: ReactNode;
+});
+/**
+ * Provides a recipe's state to the parts inside. Renders no element of its own.
+ *
+ * Takes a parsed recipe. To parse recipe data in the browser instead, pass
+ * `parse={parseRecipe}`: an invalid recipe then renders `fallback`, and in
+ * development a result's validation error or warnings are logged to the
+ * browser console unless the previous result had the same ones in the same
+ * order.
+ *
+ * @throws {RecipeBookError} `invalid_argument` when `recipe` isn't a parsed
+ *   recipe and there is no `parse`.
+ *
+ * @example
+ * <Recipe.Root recipe={recipe} defaultServings={8}>
+ *   <Recipe.Image />
+ *   <Recipe.Ingredients />
+ *   <Recipe.Steps />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/root/
+ */
+declare function Root({ recipe, parse, fallback, children, ...options }: RecipeRootProps): JSX.Element;
+
+/**
+ * The props of `<Recipe.ServingsSelect>`: the `<select>`'s attributes, plus
+ * the `options` to offer. It sets the value and the options itself, so it
+ * doesn't take `value`, `defaultValue`, `multiple`, `children` or
+ * `dangerouslySetInnerHTML`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/servings/#servingsselect
+ */
+type RecipeServingsSelectProps = Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'defaultValue' | 'multiple' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Servings to offer, shown in ascending order. A number outside the
+     * servings window is left out.
+     *
+     * @defaultValue ½×, 1×, 2×, and 3× the recipe's scaling base (its servings
+     * amount, else its yield amount, else 1), each rounded to a whole number of
+     * at least 1.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/servings/#servingsselect
+     * @see https://recipe-book.siraj.page/reference/react/root/#servings-window
+     */
+    options?: readonly number[] | undefined;
+};
+/**
+ * A `<select>` of servings. Options read "4 servings" when the recipe has
+ * servings, "24 cookies" in the yield's word when it has only a yield, and
+ * "2×" when it has neither. Their values are always servings. The current
+ * servings are always an option, so a value set elsewhere still shows.
+ *
+ * Its accessible name defaults to the `servings` label. An `aria-label` you
+ * pass replaces it and `aria-labelledby` outranks it. To name the select with
+ * a `<label>`, pass `aria-label=""`.
+ *
+ * It sets `autoComplete="off"`, so when going back reloads the page, the
+ * browser doesn't restore an earlier choice over the Root's servings. An
+ * `autoComplete` you pass wins.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`, and
+ *   `invalid_argument` when the Root's `locale` isn't a language tag that
+ *   `Intl` accepts, such as `'en_US'`.
+ *
+ * @example
+ * <Recipe.Root recipe={recipe}>
+ *   <Recipe.ServingsSelect options={[2, 4, 6, 8]} />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/servings/#servingsselect
+ */
+declare const ServingsSelect: ForwardRefExoticComponent<RecipeServingsSelectProps & RefAttributes<HTMLSelectElement>>;
+/**
+ * The props of `<Recipe.ServingsInput>`: the `<input type="number">`'s
+ * attributes, with `min`, `max` and `step` as numbers. It sets the type and
+ * the value, which follows the Root's servings, so it doesn't take `type`,
+ * `value` or `defaultValue`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/servings/#servingsinput
+ */
+type RecipeServingsInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> & {
+    /**
+     * The fewest servings that can be entered, set as the `min` attribute. The
+     * `step` grid counts from it.
+     *
+     * @defaultValue `1`
+     *
+     * @see https://recipe-book.siraj.page/reference/react/servings/#servingsinput
+     */
+    min?: number | undefined;
+    /**
+     * The most servings that can be entered, set as the `max` attribute.
+     * Without it, there's no `max` attribute, and the input accepts numbers up
+     * to the top of the servings window.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/servings/#servingsinput
+     * @see https://recipe-book.siraj.page/reference/react/root/#servings-window
+     */
+    max?: number | undefined;
+    /**
+     * How far the arrows move the value, and the grid, counted from `min`, that
+     * an entered value must be on. `'any'` allows any value. A `step` that
+     * isn't a number above 0 counts as 1, as in the browser.
+     *
+     * @defaultValue `1`, the browser's step for an input without a `step`
+     * attribute
+     *
+     * @see https://recipe-book.siraj.page/reference/react/servings/#the-step-grid
+     */
+    step?: number | 'any' | undefined;
+};
+/**
+ * A number input for servings. Each valid value commits as it's typed. An
+ * empty or out-of-range entry, text that isn't a number yet, or a number off
+ * the `step` grid stays a draft, and leaving the input shows the current
+ * servings again. Servings the recipe can't be scaled to count as out of
+ * range, so typing them logs no warning.
+ *
+ * Its accessible name and `autoComplete` follow the same rules as
+ * `<Recipe.ServingsSelect>`. `inputMode` defaults to `'numeric'` when `min`
+ * and the step are whole numbers, as with the defaults of 1, and to
+ * `'decimal'` otherwise, including with `step="any"`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @example
+ * <Recipe.Root recipe={recipe}>
+ *   <Recipe.ServingsInput max={48} />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/servings/#servingsinput
+ */
+declare const ServingsInput: ForwardRefExoticComponent<RecipeServingsInputProps & RefAttributes<HTMLInputElement>>;
+
+/**
+ * Attributes for the `<span>`; it renders the step's text, so no `children` or
+ * `dangerouslySetInnerHTML`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#steptext
+ */
+type RecipeStepTextProps = Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'dangerouslySetInnerHTML'>;
+/**
+ * The nearest `<Recipe.Step>`'s text, with each temperature shown in Root's
+ * display system: °C for metric, °F for US. A reading the author wrote in that
+ * unit keeps its value as written, such as 56.5 °C. A converted one is in
+ * whole degrees, because step text doesn't say whether it's an oven setting or
+ * a food temperature. A setting the author already wrote in both units isn't
+ * converted again, and a fan-oven setting is followed by `labels.fan`. A gas
+ * mark that follows a temperature as another way to give the same setting, as
+ * in `190C/170C fan/gas 5` or `200°C (gas mark 6)`, is left out. Everything
+ * else, including a gas mark on its own or before a temperature, is shown as
+ * authored. Each temperature is a `<span data-recipe-temperature>`. When
+ * `segmentStepText` pairs a conventional setting with a fan one, the
+ * conventional one shows first and the fan one after a slash, as in
+ * `200 °C / 180 °C fan`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Step>`.
+ * @throws {RecipeBookError} `invalid_argument` for a step with a temperature
+ *   when Root's `locale` isn't a language tag that `Intl` accepts, such as
+ *   `'en_US'`.
+ *
+ * @example
+ * <Recipe.Step item={step}>
+ *   <Recipe.StepName /> <Recipe.StepText />
+ * </Recipe.Step>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#steptext
+ */
+declare const StepText: ForwardRefExoticComponent<RecipeStepTextProps & RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Attributes for the wrapping `<div>` other than `dangerouslySetInnerHTML`,
+ * plus `headingLevel`; `children` renders each section.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#steps
+ */
+type RecipeStepsProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Heading level of section titles in the default rendering. Defaults to 3,
+     * for steps under an `<h2>` such as "Method".
+     *
+     * @defaultValue `3`
+     * @see https://recipe-book.siraj.page/guides/make-a-recipe-accessible/#set-heading-levels
+     */
+    headingLevel?: RecipeHeadingLevel | undefined;
+    /**
+     * Renders each section instead of the default. Each result is keyed for
+     * you, so return one element or a fragment; an array's items need their own
+     * keys, as anywhere in React.
+     *
+     * @defaultValue A `<section>` named by the section's heading, or a `<div>`
+     * for an untitled section, around a `<Recipe.StepList>` of its steps.
+     * @see https://recipe-book.siraj.page/reference/react/steps/#render-your-own-sections
+     */
+    children?: ((section: RecipeSection<StepItem>) => ReactNode) | undefined;
+};
+/**
+ * The recipe's steps, one block per section. A titled section renders as a
+ * `<section>` named by its heading, then a `<Recipe.StepList>`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @example
+ * <Recipe.Root recipe={recipe}>
+ *   <h2>Method</h2>
+ *   <Recipe.Steps />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#steps
+ */
+declare const Steps: ForwardRefExoticComponent<RecipeStepsProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Attributes for the `<ol>` other than `dangerouslySetInnerHTML`, plus the
+ * `section` to list; `children` renders each step.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#steplist
+ */
+type RecipeStepListProps = Omit<ComponentPropsWithoutRef<'ol'>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /** The section to list. Defaults to every step in the recipe. */
+    section?: RecipeSection<StepItem> | undefined;
+    /**
+     * Renders each step instead of `<Recipe.Step>`. Each result is keyed for
+     * you, so return one element or a fragment; an array's items need their own
+     * keys, as anywhere in React.
+     *
+     * @defaultValue `(step) => <Recipe.Step item={step} />`
+     * @see https://recipe-book.siraj.page/reference/react/steps/#render-your-own-steps
+     */
+    children?: ((step: StepItem) => ReactNode) | undefined;
+};
+/**
+ * An ordered list of steps. `start` defaults to the first step's number, so
+ * numbering continues across sections.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @example
+ * <Recipe.StepList>
+ *   {(step) => (
+ *     <Recipe.Step item={step}>
+ *       <Recipe.StepName /> <Recipe.StepText />
+ *     </Recipe.Step>
+ *   )}
+ * </Recipe.StepList>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#steplist
+ */
+declare const StepList: ForwardRefExoticComponent<RecipeStepListProps & RefAttributes<HTMLOListElement>>;
+/**
+ * Attributes for the `<li>` other than `dangerouslySetInnerHTML`, plus the
+ * `item` to render and `asChild`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#step
+ */
+type RecipeStepProps = Omit<ComponentPropsWithoutRef<'li'>, 'dangerouslySetInnerHTML'> & {
+    /** The step to render, with its number. */
+    item: StepItem;
+    /**
+     * Renders the step as its one element child, such as `<motion.li layout />`,
+     * instead of an `<li>`. A prop on the child wins, except that the step's
+     * `tabIndex` wins, `className`s join, `style` merges key by key with the
+     * child winning, both event handlers run (the child's first), and both refs
+     * are set. The child's own children replace the step's, so an empty child
+     * gets the name and text. With anything but one element child, it renders
+     * its own `<li>`, with a warning in development.
+     *
+     * @defaultValue `false`
+     * @see https://recipe-book.siraj.page/reference/react/steps/#render-your-own-element
+     */
+    asChild?: boolean | undefined;
+};
+/**
+ * One step. Default children are `<Recipe.StepName>`, then a space if the
+ * step has a name, then its text as authored. Custom children can use
+ * `<Recipe.StepName>` and `<Recipe.StepText>` to read like the default, with
+ * temperatures in Root's display system.
+ *
+ * @example
+ * <Recipe.Step item={step}>
+ *   <Recipe.StepName /> <Recipe.StepText />
+ * </Recipe.Step>
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#step
+ */
+declare const Step: ForwardRefExoticComponent<RecipeStepProps & RefAttributes<HTMLLIElement>>;
+/**
+ * Attributes for the `<b>`; it renders the step's name, so no `children` or
+ * `dangerouslySetInnerHTML`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#stepname
+ */
+type RecipeStepNameProps = Omit<ComponentPropsWithoutRef<'b'>, 'children' | 'dangerouslySetInnerHTML'>;
+/**
+ * The nearest `<Recipe.Step>`'s name in a `<b data-recipe-name>`, or nothing
+ * when the step has none.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Step>`.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/steps/#stepname
+ */
+declare const StepName: ForwardRefExoticComponent<RecipeStepNameProps & RefAttributes<HTMLElement>>;
+
+/**
+ * The props of `<Recipe.SystemToggle>`: the radio group's `<div>` attributes,
+ * plus `asChild`. It sets `role` and renders its own content, so it doesn't
+ * take `role` or `dangerouslySetInnerHTML`.
+ *
+ * The group sets `aria-disabled` and its data attributes at runtime, over any
+ * you pass, so `aria-disabled` is there only while the toggle is disabled. An
+ * `asChild` child's own `role`, `aria-disabled` and data attributes still
+ * win.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/system-toggle/#systemtoggle
+ */
+type RecipeSystemToggleProps = Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Renders the radio group as its one element child, such as
+     * `<motion.div layout />`, instead of a `<div>`. A prop on the child wins,
+     * except that the group's `tabIndex` wins, `className`s join, `style` merges
+     * key by key with the child winning, both event handlers run (the child's
+     * first), and both refs are set. The child's own children replace the
+     * group's, so an empty child gets the metric and US options. With anything
+     * but one element child, it renders its own `<div>`, with a warning in
+     * development.
+     *
+     * @defaultValue `false`
+     *
+     * @see https://recipe-book.siraj.page/reference/react/system-toggle/#render-your-own-elements
+     */
+    asChild?: boolean | undefined;
+};
+/**
+ * Switches the Root's measurement system. A radio group whose default options
+ * are metric and US. Disabled when there's nothing to convert: no ingredient
+ * has a unit that belongs to only one system, and no `Recipe.StepText` in the
+ * Root shows a temperature. A `StepText` counts once it mounts, so for a
+ * recipe whose only temperatures are in its steps, the toggle enables after
+ * hydration.
+ *
+ * Its accessible name defaults to the `system` label, unless you pass
+ * `aria-label` or `aria-labelledby`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a `<Recipe.Root>`.
+ *
+ * @example
+ * <Recipe.Root recipe={recipe}>
+ *   <Recipe.SystemToggle className="units" />
+ * </Recipe.Root>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/system-toggle/#systemtoggle
+ */
+declare const SystemToggle: ForwardRefExoticComponent<RecipeSystemToggleProps & RefAttributes<HTMLDivElement>>;
+/**
+ * The props of `<Recipe.SystemOption>`: the radio's `<button>` attributes,
+ * with `value` the system it selects, plus `asChild`. It sets `role` and
+ * `tabIndex` and renders its own content, so it doesn't take them or
+ * `dangerouslySetInnerHTML`.
+ *
+ * The option sets `aria-checked` and its data attributes at runtime, over any
+ * you pass. An `asChild` child's own `role`, `aria-checked` and data
+ * attributes still win.
+ *
+ * @see https://recipe-book.siraj.page/reference/react/system-toggle/#systemoption
+ */
+type RecipeSystemOptionProps = Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'role' | 'tabIndex' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * The system this option selects: `'metric'` or `'us'`.
+     *
+     * @see https://recipe-book.siraj.page/reference/react/system-toggle/#systemoption
+     */
+    value: System;
+    /**
+     * The button's `autocomplete` attribute. Off by default, so when going back
+     * reloads the page, Firefox doesn't re-enable an option that the server
+     * rendered disabled and the page enabled later.
+     *
+     * @defaultValue `'off'`
+     *
+     * @see https://recipe-book.siraj.page/reference/react/system-toggle/#systemoption
+     */
+    autoComplete?: string | undefined;
+    /**
+     * Renders the radio as its one element child, such as
+     * `<motion.button layout />`, instead of a `<button>`. A prop on the child
+     * wins, except that the option's `tabIndex` wins, `className`s join, `style`
+     * merges key by key with the child winning, both event handlers run (the
+     * child's first), and both refs are set. The option sets `tabIndex` to keep
+     * one radio in the tab order once React hydrates the page; before that,
+     * every enabled checked option is in it. The child's own children replace
+     * the option's, so an empty child gets the system's label. With anything but
+     * one element child, it renders its own `<button>`, with a warning in
+     * development.
+     *
+     * @defaultValue `false`
+     *
+     * @see https://recipe-book.siraj.page/reference/react/system-toggle/#render-your-own-elements
+     */
+    asChild?: boolean | undefined;
+};
+/**
+ * One option of a `<Recipe.SystemToggle>`. Checked when its `value` is the
+ * Root's system; a click sets the Root's system to `value`. Children default
+ * to the system's label. Its `type` defaults to `'button'`, so it doesn't
+ * submit a form. It's disabled while the toggle is, even with
+ * `disabled={false}`.
+ *
+ * It sets `autoComplete="off"`, so when going back reloads the page, Firefox
+ * doesn't re-enable an option that the server rendered disabled and the page
+ * enabled later. An `autoComplete` you pass wins.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a
+ *   `<Recipe.SystemToggle>`.
+ *
+ * @example
+ * <Recipe.SystemToggle>
+ *   <Recipe.SystemOption value="us">Cups and spoons</Recipe.SystemOption>
+ *   <Recipe.SystemOption value="metric">
+ *     Grams and milliliters
+ *   </Recipe.SystemOption>
+ * </Recipe.SystemToggle>
+ *
+ * @see https://recipe-book.siraj.page/reference/react/system-toggle/#systemoption
+ */
+declare const SystemOption: ForwardRefExoticComponent<RecipeSystemOptionProps & RefAttributes<HTMLButtonElement>>;
+
+/** An ingredient formatted with the nearest Root's locale and labels. */
+type FormattedIngredientItem = FormattedIngredient & {
+    /** The quantity from `formatQuantityToParts`. Empty for an unquantified line. */
+    quantityParts: QuantityPart[];
+    /** `labels.optional`, set only for an optional ingredient. `text` never includes it. */
+    optional?: string | undefined;
+};
+/**
+ * Formats ingredient lines as `<Recipe.Ingredient>` does, with the nearest
+ * Root's locale and labels: for markup without the ingredient parts, and for
+ * renderers without a DOM. Returns the same function until the locale or
+ * `labels.optional` changes.
+ *
+ * Without a Root, call `formatIngredient` from `@recipe-book/react/core`.
+ *
+ * @throws {RecipeBookError} `missing_parent` outside a Root.
+ *
+ * @returns A function that formats one of the state's ingredient items into
+ *   the pieces `<Recipe.Ingredient>` renders. It throws `invalid_argument`
+ *   when Root's `locale` isn't a language tag that `Intl` accepts, such as
+ *   `'en_US'`, the item isn't `{ ingredient, quantity? }`, or it has an amount
+ *   that `formatQuantity` rejects, and `unknown_unit` when the item's unit
+ *   isn't a unit ID.
+ *
+ * @example
+ * function CopyIngredients() {
+ *   const { ingredients } = Recipe.useRecipe()
+ *   const format = Recipe.useFormatIngredient()
+ *   const lines = ingredients
+ *     .flatMap((section) => section.items)
+ *     .map((item) => {
+ *       const line = format(item)
+ *       return line.optional ? `${line.text} ${line.optional}` : line.text
+ *     })
+ *   return (
+ *     <button onClick={() => navigator.clipboard.writeText(lines.join('\n'))}>
+ *       Copy ingredients
+ *     </button>
+ *   )
+ * }
+ *
+ * @see https://recipe-book.siraj.page/reference/react/hooks/#useformatingredient
+ */
+declare function useFormatIngredient(): (item: IngredientItem) => FormattedIngredientItem;
+
+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 };
+export type { FormattedIngredientItem, IngredientItem, RecipeBookProviderProps, RecipeHeadingLevel, RecipeImageProps, RecipeIngredientListProps, RecipeIngredientNameProps, RecipeIngredientNoteProps, RecipeIngredientOptionalProps, RecipeIngredientProps, RecipeIngredientQuantityProps, RecipeIngredientsProps, RecipeJsonLdProps, RecipeLabelOverrides, RecipeLabels, RecipeRootProps, RecipeSection, RecipeServingsInputProps, RecipeServingsSelectProps, RecipeState, RecipeStateOptions, RecipeStepListProps, RecipeStepNameProps, RecipeStepProps, RecipeStepTextProps, RecipeStepsProps, RecipeSystemOptionProps, RecipeSystemToggleProps, StepItem };