@recipe-book/react 0.0.1

package/README.md

@@ -0,0 +1,23 @@
+# @recipe-book/react
+
+Unstyled, accessible, compound React components for displaying recipes
+
+## Core concepts
+
+### Compound structure
+
+Recipe components are designed to be used as building blocks for displaying recipes. They are unstyled, and can be composed together to create a custom recipe interface.
+
+```jsx
+function MyRecipeComponent() {
+  <Recipe.Root>
+    <Recipe.Thumbnail />
+    <h3>Ingredients</h3>
+    <Recipe.Ingredients />
+    <h3>Instructions</h3>
+    <Recipe.Instructions renderer={(instruction) => <MyInstructionComponent {...instruction}>} />
+    <hr />
+    <RecipeNotes />
+  </Recipe.Root>
+}
+```

package/dist/chunk-32VQC2BE.mjs

@@ -0,0 +1 @@
+import{createContext as n,useContext as i}from"react";import{jsx as r}from"react/jsx-runtime";var t=n({});function x(){let e=i(t);if(!e)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return e}function R({children:e,config:o}){return r(t.Provider,{value:{config:o},children:e})}export{x as a,R as b};

package/dist/chunk-6MAELCYD.mjs

@@ -0,0 +1 @@
+import{b as n}from"./chunk-QOCKR2HO.mjs";import{b as t}from"./chunk-32VQC2BE.mjs";import{useMemo as e}from"react";import{jsx as f}from"react/jsx-runtime";function C(o){let{config:i}=n(),r=e(()=>({...i,...o.config}),[i,o.config]);return f(t,{config:r,children:o.children})}export{C as a};

package/dist/chunk-CB36WMX5.mjs

@@ -0,0 +1,24 @@
+// src/recipe-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var RecipeContext = createContext(
+  {}
+);
+function useRecipeContext() {
+  const ctx = useContext(RecipeContext);
+  if (!ctx) {
+    throw new Error("Missing recipe context. Are you using <Recipe.Root />?");
+  }
+  return ctx;
+}
+function RecipeContextProvider({
+  children,
+  config
+}) {
+  return /* @__PURE__ */ jsx(RecipeContext.Provider, { value: { config }, children });
+}
+
+export {
+  useRecipeContext,
+  RecipeContextProvider
+};

package/dist/chunk-FPLGEKN7.mjs

@@ -0,0 +1,24 @@
+import {
+  useGlobalContext
+} from "./chunk-M5D3UUZF.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/root.tsx
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const { config: globalConfig } = useGlobalContext();
+  const finalConfig = useMemo(() => {
+    return {
+      ...globalConfig,
+      ...props.config
+    };
+  }, [globalConfig, props.config]);
+  return /* @__PURE__ */ jsx(RecipeContextProvider, { config: finalConfig, children: props.children });
+}
+
+export {
+  Root
+};

package/dist/chunk-GPTC24DR.mjs

@@ -0,0 +1 @@
+import{a as t}from"./chunk-32VQC2BE.mjs";import{jsx as n}from"react/jsx-runtime";function r(){let{config:o}=t();return n("ul",{"recipe-instruction-list":"",children:o.instructions.map((c,i)=>n("li",{"recipe-instruction":i+1,children:c},i))})}export{r as a};

package/dist/chunk-J5PZAYLW.mjs

@@ -0,0 +1,45 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/thumbnail.tsx
+import { AspectRatio } from "@radix-ui/react-aspect-ratio";
+import { jsx } from "react/jsx-runtime";
+function Thumbnail(props) {
+  var _a, _b;
+  const { config } = useRecipeContext();
+  if (!config.thumbnail) {
+    throw new Error("Missing thumbnail image. Did you forget to set one?");
+  }
+  const propStyle = (_a = props.style) != null ? _a : {};
+  return /* @__PURE__ */ jsx(
+    AspectRatio,
+    {
+      "recipe-thumbnail": "",
+      ref,
+      className: props.className,
+      style: {
+        width: "100%",
+        ...propStyle
+      },
+      ratio: props.aspectRatio || 1,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          "recipe-thumbnail-image": "",
+          style: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%"
+          },
+          src: config.thumbnail,
+          alt: (_b = props.alt) != null ? _b : config.name
+        }
+      )
+    }
+  );
+}
+
+export {
+  Thumbnail
+};

package/dist/chunk-JTZVD7JV.mjs

@@ -0,0 +1,20 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/ingredients/ingredients-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function IngredientList() {
+  const { config } = useRecipeContext();
+  return /* @__PURE__ */ jsx("ul", { "recipe-ingredient-list": "", children: config.ingredients.map((ingredient, i) => /* @__PURE__ */ jsxs("li", { "recipe-ingredient": "", children: [
+    ingredient.name,
+    " \u2014 ",
+    ingredient.amount.value,
+    " ",
+    ingredient.amount.unit
+  ] }, i)) });
+}
+
+export {
+  IngredientList
+};

package/dist/chunk-KYWBOSOP.mjs

@@ -0,0 +1,14 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/instructions/instruction-list.tsx
+import { jsx } from "react/jsx-runtime";
+function InstructionList() {
+  const { config } = useRecipeContext();
+  return /* @__PURE__ */ jsx("ul", { "recipe-instruction-list": "", children: config.instructions.map((instruction, i) => /* @__PURE__ */ jsx("li", { "recipe-instruction": i + 1, children: instruction }, i)) });
+}
+
+export {
+  InstructionList
+};

package/dist/chunk-M5D3UUZF.mjs

@@ -0,0 +1,19 @@
+// src/global-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var GlobalContext = createContext({});
+function useGlobalContext() {
+  return useContext(GlobalContext);
+}
+function GlobalContextProvider({
+  children,
+  config
+}) {
+  return /* @__PURE__ */ jsx(GlobalContext.Provider, { value: { config }, children });
+}
+
+export {
+  GlobalContext,
+  useGlobalContext,
+  GlobalContextProvider
+};

package/dist/chunk-MBR257HS.mjs

@@ -0,0 +1,48 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/thumbnail.tsx
+import { AspectRatio } from "@radix-ui/react-aspect-ratio";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Thumbnail = forwardRef(
+  (props, ref) => {
+    var _a, _b;
+    const { config } = useRecipeContext();
+    if (!config.thumbnail) {
+      throw new Error("Missing thumbnail image. Did you forget to set one?");
+    }
+    const propStyle = (_a = props.style) != null ? _a : {};
+    return /* @__PURE__ */ jsx(
+      AspectRatio,
+      {
+        "recipe-thumbnail": true,
+        ref,
+        className: props.className,
+        style: {
+          width: "100%",
+          ...propStyle
+        },
+        ratio: props.aspectRatio || 1,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            "recipe-thumbnail-image": true,
+            style: {
+              objectFit: "cover",
+              width: "100%",
+              height: "100%"
+            },
+            src: config.thumbnail,
+            alt: (_b = props.alt) != null ? _b : config.name
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  Thumbnail
+};

package/dist/chunk-PLID2R4K.mjs

@@ -0,0 +1,48 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/thumbnail.tsx
+import { AspectRatio } from "@radix-ui/react-aspect-ratio";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Thumbnail = forwardRef(
+  (props, ref) => {
+    var _a, _b;
+    const { config } = useRecipeContext();
+    if (!config.thumbnail) {
+      throw new Error("Missing thumbnail image. Did you forget to set one?");
+    }
+    const propStyle = (_a = props.style) != null ? _a : {};
+    return /* @__PURE__ */ jsx(
+      AspectRatio,
+      {
+        "recipe-thumbnail": "",
+        ref,
+        className: props.className,
+        style: {
+          width: "100%",
+          ...propStyle
+        },
+        ratio: props.aspectRatio || 1,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            "recipe-thumbnail-image": true,
+            style: {
+              objectFit: "cover",
+              width: "100%",
+              height: "100%"
+            },
+            src: config.thumbnail,
+            alt: (_b = props.alt) != null ? _b : config.name
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  Thumbnail
+};

package/dist/chunk-PYOGNEQ3.mjs

@@ -0,0 +1,48 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/thumbnail.tsx
+import { AspectRatio } from "@radix-ui/react-aspect-ratio";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Thumbnail = forwardRef(
+  (props, ref) => {
+    var _a, _b;
+    const { config } = useRecipeContext();
+    if (!config.thumbnail) {
+      throw new Error("Missing thumbnail image. Did you forget to set one?");
+    }
+    const propStyle = (_a = props.style) != null ? _a : {};
+    return /* @__PURE__ */ jsx(
+      AspectRatio,
+      {
+        "recipe-thumbnail": "",
+        ref,
+        className: props.className,
+        style: {
+          width: "100%",
+          ...propStyle
+        },
+        ratio: props.aspectRatio || 1,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            "recipe-thumbnail-image": "",
+            style: {
+              objectFit: "cover",
+              width: "100%",
+              height: "100%"
+            },
+            src: config.thumbnail,
+            alt: (_b = props.alt) != null ? _b : config.name
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  Thumbnail
+};

package/dist/chunk-QOCKR2HO.mjs

@@ -0,0 +1 @@
+import{createContext as l,useContext as n}from"react";import{jsx as r}from"react/jsx-runtime";var o=l({});function C(){return n(o)}function x({children:e,config:t}){return r(o.Provider,{value:{config:t},children:e})}export{o as a,C as b,x as c};

package/dist/chunk-RZGBB6SL.mjs

@@ -0,0 +1 @@
+import{a as o}from"./chunk-32VQC2BE.mjs";import{AspectRatio as m}from"@radix-ui/react-aspect-ratio";import{jsx as r}from"react/jsx-runtime";function c(t){var i,a;let{config:e}=o();if(!e.thumbnail)throw new Error("Missing thumbnail image. Did you forget to set one?");let s=(i=t.style)!=null?i:{};return r(m,{"recipe-thumbnail":"",className:t.className,style:{width:"100%",...s},ratio:t.aspectRatio||1,children:r("img",{"recipe-thumbnail-image":"",style:{objectFit:"cover",width:"100%",height:"100%"},src:e.thumbnail,alt:(a=t.alt)!=null?a:e.name})})}export{c as a};

package/dist/chunk-T6BBQT4K.mjs

@@ -0,0 +1,44 @@
+import {
+  useRecipeContext
+} from "./chunk-CB36WMX5.mjs";
+
+// src/components/thumbnail.tsx
+import { AspectRatio } from "@radix-ui/react-aspect-ratio";
+import { jsx } from "react/jsx-runtime";
+function Thumbnail(props) {
+  var _a, _b;
+  const { config } = useRecipeContext();
+  if (!config.thumbnail) {
+    throw new Error("Missing thumbnail image. Did you forget to set one?");
+  }
+  const propStyle = (_a = props.style) != null ? _a : {};
+  return /* @__PURE__ */ jsx(
+    AspectRatio,
+    {
+      "recipe-thumbnail": "",
+      className: props.className,
+      style: {
+        width: "100%",
+        ...propStyle
+      },
+      ratio: props.aspectRatio || 1,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          "recipe-thumbnail-image": "",
+          style: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%"
+          },
+          src: config.thumbnail,
+          alt: (_b = props.alt) != null ? _b : config.name
+        }
+      )
+    }
+  );
+}
+
+export {
+  Thumbnail
+};

package/dist/chunk-U7TL6PST.mjs

@@ -0,0 +1 @@
+import{a as i}from"./chunk-32VQC2BE.mjs";import{jsx as u,jsxs as o}from"react/jsx-runtime";function l(){let{config:n}=i();return u("ul",{"recipe-ingredient-list":"",children:n.ingredients.map((e,t)=>o("li",{"recipe-ingredient":"",children:[e.name," \u2014 ",e.amount.value," ",e.amount.unit]},t))})}export{l as a};

package/dist/components/ingredients/ingredients-list.d.mts

@@ -0,0 +1,10 @@
+/**
+ * Renders a list of ingredients from the recipe context.
+ *
+ * Stylable with the HTML attributes:
+ * - `recipe-ingredient-list` (wrapper element)
+ * - `recipe-ingredient` (ingredient elements)
+ */
+declare function IngredientList(): JSX.Element;
+
+export { IngredientList };

package/dist/components/ingredients/ingredients-list.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Renders a list of ingredients from the recipe context.
+ *
+ * Stylable with the HTML attributes:
+ * - `recipe-ingredient-list` (wrapper element)
+ * - `recipe-ingredient` (ingredient elements)
+ */
+declare function IngredientList(): JSX.Element;
+
+export { IngredientList };

package/dist/components/ingredients/ingredients-list.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var C=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},d=(t,e,o,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of R(e))!u.call(t,n)&&n!==o&&c(t,n,{get:()=>e[n],enumerable:!(p=x(e,n))||p.enumerable});return t};var f=t=>d(c({},"__esModule",{value:!0}),t);var l={};C(l,{IngredientList:()=>m});module.exports=f(l);var i=require("react"),a=require("react/jsx-runtime"),g=(0,i.createContext)({});function s(){let t=(0,i.useContext)(g);if(!t)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return t}var r=require("react/jsx-runtime");function m(){let{config:t}=s();return(0,r.jsx)("ul",{"recipe-ingredient-list":"",children:t.ingredients.map((e,o)=>(0,r.jsxs)("li",{"recipe-ingredient":"",children:[e.name," \u2014 ",e.amount.value," ",e.amount.unit]},o))})}0&&(module.exports={IngredientList});

package/dist/components/ingredients/ingredients-list.mjs

@@ -0,0 +1 @@
+import{a}from"../../chunk-U7TL6PST.mjs";import"../../chunk-32VQC2BE.mjs";export{a as IngredientList};

package/dist/components/instructions/instruction-list.d.mts

@@ -0,0 +1,10 @@
+/**
+ * Renders a list of instructions from the recipe context.
+ *
+ * Stylable with the HTML attributes:
+ * - `recipe-instruction-list` (wrapper element)
+ * - `recipe-instruction` (instruction elements, value is the instruction number)
+ */
+declare function InstructionList(): JSX.Element;
+
+export { InstructionList };

package/dist/components/instructions/instruction-list.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Renders a list of instructions from the recipe context.
+ *
+ * Stylable with the HTML attributes:
+ * - `recipe-instruction-list` (wrapper element)
+ * - `recipe-instruction` (instruction elements, value is the instruction number)
+ */
+declare function InstructionList(): JSX.Element;
+
+export { InstructionList };

package/dist/components/instructions/instruction-list.js

@@ -0,0 +1 @@
+var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of R(t))!u.call(e,i)&&i!==o&&r(e,i,{get:()=>t[i],enumerable:!(p=x(t,i))||p.enumerable});return e};var d=e=>f(r({},"__esModule",{value:!0}),e);var P={};C(P,{InstructionList:()=>l});module.exports=d(P);var n=require("react"),a=require("react/jsx-runtime"),g=(0,n.createContext)({});function s(){let e=(0,n.useContext)(g);if(!e)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return e}var c=require("react/jsx-runtime");function l(){let{config:e}=s();return(0,c.jsx)("ul",{"recipe-instruction-list":"",children:e.instructions.map((t,o)=>(0,c.jsx)("li",{"recipe-instruction":o+1,children:t},o))})}0&&(module.exports={InstructionList});

package/dist/components/instructions/instruction-list.mjs

@@ -0,0 +1 @@
+import{a}from"../../chunk-GPTC24DR.mjs";import"../../chunk-32VQC2BE.mjs";export{a as InstructionList};

package/dist/components/layouts/layout-default.d.mts

@@ -0,0 +1,7 @@
+import { LayoutProps } from './layout-types.mjs';
+import 'react';
+import 'recipe-core';
+
+declare function DefaultLayout({ children }: LayoutProps): JSX.Element;
+
+export { DefaultLayout };

package/dist/components/layouts/layout-default.d.ts

@@ -0,0 +1,7 @@
+import { LayoutProps } from './layout-types.js';
+import 'react';
+import 'recipe-core';
+
+declare function DefaultLayout({ children }: LayoutProps): JSX.Element;
+
+export { DefaultLayout };

package/dist/components/layouts/layout-default.js

@@ -0,0 +1 @@
+var l=Object.defineProperty;var e=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var r=(a,o)=>{for(var u in o)l(a,u,{get:o[u],enumerable:!0})},s=(a,o,u,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of f(o))!n.call(a,t)&&t!==u&&l(a,t,{get:()=>o[t],enumerable:!(m=e(o,t))||m.enumerable});return a};var y=a=>s(l({},"__esModule",{value:!0}),a);var p={};r(p,{DefaultLayout:()=>d});module.exports=y(p);var i=require("react/jsx-runtime");function d({children:a}){return(0,i.jsx)("div",{className:"default-layout",children:(0,i.jsx)("main",{className:"default-layout__main",children:a})})}0&&(module.exports={DefaultLayout});

package/dist/components/layouts/layout-default.mjs

@@ -0,0 +1 @@
+import{jsx as a}from"react/jsx-runtime";function t({children:o}){return a("div",{className:"default-layout",children:a("main",{className:"default-layout__main",children:o})})}export{t as DefaultLayout};

package/dist/components/layouts/layout-types.d.mts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { Recipe } from 'recipe-core';
+
+type LayoutProps = PropsWithChildren & {
+    recipe: Recipe<any>;
+};
+
+export type { LayoutProps };

package/dist/components/layouts/layout-types.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { Recipe } from 'recipe-core';
+
+type LayoutProps = PropsWithChildren & {
+    recipe: Recipe<any>;
+};
+
+export type { LayoutProps };

package/dist/components/layouts/layout-types.js

@@ -0,0 +1 @@
+var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var n=(e,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of m(r))!c.call(e,p)&&p!==t&&o(e,p,{get:()=>r[p],enumerable:!(i=h(r,p))||i.enumerable});return e};var s=e=>n(o({},"__esModule",{value:!0}),e);var y={};module.exports=s(y);

package/dist/components/root.d.mts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+type RootProps = PropsWithChildren & {
+    config?: any;
+};
+/**
+ * Provides recipe data to children for rendering. Inherits configuration
+ * from the global recipe config if available.
+ */
+declare function Root(props: RootProps): JSX.Element;
+
+export { Root };

package/dist/components/root.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+type RootProps = PropsWithChildren & {
+    config?: any;
+};
+/**
+ * Provides recipe data to children for rendering. Inherits configuration
+ * from the global recipe config if available.
+ */
+declare function Root(props: RootProps): JSX.Element;
+
+export { Root };

package/dist/components/root.js

@@ -0,0 +1 @@
+var i=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var g=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},P=(o,e,t,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of s(e))!d.call(o,n)&&n!==t&&i(o,n,{get:()=>e[n],enumerable:!(p=R(e,n))||p.enumerable});return o};var u=o=>P(i({},"__esModule",{value:!0}),o);var y={};g(y,{Root:()=>m});module.exports=u(y);var f=require("react");var c=require("react"),C=require("react/jsx-runtime"),b=(0,c.createContext)({});function l({children:o,config:e}){return(0,C.jsx)(b.Provider,{value:{config:e},children:o})}var r=require("react"),G=require("react/jsx-runtime"),v=(0,r.createContext)({});function x(){return(0,r.useContext)(v)}var a=require("react/jsx-runtime");function m(o){let{config:e}=x(),t=(0,f.useMemo)(()=>({...e,...o.config}),[e,o.config]);return(0,a.jsx)(l,{config:t,children:o.children})}0&&(module.exports={Root});

package/dist/components/root.mjs

@@ -0,0 +1 @@
+import{a}from"../chunk-6MAELCYD.mjs";import"../chunk-QOCKR2HO.mjs";import"../chunk-32VQC2BE.mjs";export{a as Root};

package/dist/components/thumbnail.d.mts

@@ -0,0 +1,18 @@
+type ThumbnailProps = {
+    alt?: string;
+    aspectRatio?: number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Renders a thumbnail image from the recipe context. The image is
+ * automatically cropped to a square, but can be overridden with the
+ * `aspectRatio` prop.
+ *
+ * Stylable with the HTML attributes:
+ * - `recipe-thumbnail` (wrapper element)
+ * - `recipe-thumbnail-image` (<img /> element)
+ */
+declare function Thumbnail(props: ThumbnailProps): JSX.Element;
+
+export { Thumbnail };

package/dist/components/thumbnail.d.ts

@@ -0,0 +1,18 @@
+type ThumbnailProps = {
+    alt?: string;
+    aspectRatio?: number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Renders a thumbnail image from the recipe context. The image is
+ * automatically cropped to a square, but can be overridden with the
+ * `aspectRatio` prop.
+ *
+ * Stylable with the HTML attributes:
+ * - `recipe-thumbnail` (wrapper element)
+ * - `recipe-thumbnail-image` (<img /> element)
+ */
+declare function Thumbnail(props: ThumbnailProps): JSX.Element;
+
+export { Thumbnail };

package/dist/components/thumbnail.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var u=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of R(t))!l.call(e,i)&&i!==o&&c(e,i,{get:()=>t[i],enumerable:!(n=m(t,i))||n.enumerable});return e};var g=e=>f(c({},"__esModule",{value:!0}),e);var h={};u(h,{Thumbnail:()=>d});module.exports=g(h);var p=require("@radix-ui/react-aspect-ratio");var r=require("react"),C=require("react/jsx-runtime"),x=(0,r.createContext)({});function a(){let e=(0,r.useContext)(x);if(!e)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return e}var s=require("react/jsx-runtime");function d(e){var n,i;let{config:t}=a();if(!t.thumbnail)throw new Error("Missing thumbnail image. Did you forget to set one?");let o=(n=e.style)!=null?n:{};return(0,s.jsx)(p.AspectRatio,{"recipe-thumbnail":"",className:e.className,style:{width:"100%",...o},ratio:e.aspectRatio||1,children:(0,s.jsx)("img",{"recipe-thumbnail-image":"",style:{objectFit:"cover",width:"100%",height:"100%"},src:t.thumbnail,alt:(i=e.alt)!=null?i:t.name})})}0&&(module.exports={Thumbnail});

package/dist/components/thumbnail.mjs

@@ -0,0 +1 @@
+import{a}from"../chunk-RZGBB6SL.mjs";import"../chunk-32VQC2BE.mjs";export{a as Thumbnail};

package/dist/global-context.d.mts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { GlobalRecipeConfig } from 'recipe-core';
+
+type GlobalContext = {
+    config: GlobalRecipeConfig<any>;
+};
+declare const GlobalContext: react.Context<GlobalContext>;
+declare function useGlobalContext(): GlobalContext;
+interface GlobalContextProviderProps {
+    children: ReactNode;
+    config: GlobalRecipeConfig<any>;
+}
+declare function GlobalContextProvider({ children, config, }: GlobalContextProviderProps): JSX.Element;
+
+export { GlobalContext, GlobalContextProvider, useGlobalContext };

package/dist/global-context.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { GlobalRecipeConfig } from 'recipe-core';
+
+type GlobalContext = {
+    config: GlobalRecipeConfig<any>;
+};
+declare const GlobalContext: react.Context<GlobalContext>;
+declare function useGlobalContext(): GlobalContext;
+interface GlobalContextProviderProps {
+    children: ReactNode;
+    config: GlobalRecipeConfig<any>;
+}
+declare function GlobalContextProvider({ children, config, }: GlobalContextProviderProps): JSX.Element;
+
+export { GlobalContext, GlobalContextProvider, useGlobalContext };

package/dist/global-context.js

@@ -0,0 +1 @@
+var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var G=(e,o)=>{for(var l in o)r(e,l,{get:o[l],enumerable:!0})},p=(e,o,l,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of b(o))!c.call(e,t)&&t!==l&&r(e,t,{get:()=>o[t],enumerable:!(i=x(o,t))||i.enumerable});return e};var f=e=>p(r({},"__esModule",{value:!0}),e);var u={};G(u,{GlobalContext:()=>a,GlobalContextProvider:()=>P,useGlobalContext:()=>d});module.exports=f(u);var n=require("react"),C=require("react/jsx-runtime"),a=(0,n.createContext)({});function d(){return(0,n.useContext)(a)}function P({children:e,config:o}){return(0,C.jsx)(a.Provider,{value:{config:o},children:e})}0&&(module.exports={GlobalContext,GlobalContextProvider,useGlobalContext});

package/dist/global-context.mjs

@@ -0,0 +1 @@
+import{a,b,c}from"./chunk-QOCKR2HO.mjs";export{a as GlobalContext,c as GlobalContextProvider,b as useGlobalContext};

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+export { Root as RecipeRoot, Root } from './components/root.mjs';
+export { IngredientList, IngredientList as RecipeIngredientList } from './components/ingredients/ingredients-list.mjs';
+export { InstructionList, InstructionList as RecipeInstructionList } from './components/instructions/instruction-list.mjs';
+export { Thumbnail as RecipeThumbnail, Thumbnail } from './components/thumbnail.mjs';
+export { useRecipeContext as useRecipe } from './recipe-context.mjs';
+export { GlobalContextProvider as Provider } from './global-context.mjs';
+import 'react';
+import 'recipe-core';

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { Root as RecipeRoot, Root } from './components/root.js';
+export { IngredientList, IngredientList as RecipeIngredientList } from './components/ingredients/ingredients-list.js';
+export { InstructionList, InstructionList as RecipeInstructionList } from './components/instructions/instruction-list.js';
+export { Thumbnail as RecipeThumbnail, Thumbnail } from './components/thumbnail.js';
+export { useRecipeContext as useRecipe } from './recipe-context.js';
+export { GlobalContextProvider as Provider } from './global-context.js';
+import 'react';
+import 'recipe-core';

package/dist/index.js

@@ -0,0 +1 @@
+var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},A=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of L(t))!N.call(e,i)&&i!==o&&a(e,i,{get:()=>t[i],enumerable:!(r=w(t,i))||r.enumerable});return e};var M=e=>A(a({},"__esModule",{value:!0}),e);var S={};I(S,{IngredientList:()=>v,InstructionList:()=>y,Provider:()=>g,RecipeIngredientList:()=>v,RecipeInstructionList:()=>y,RecipeRoot:()=>P,RecipeThumbnail:()=>T,Root:()=>P,Thumbnail:()=>T,useRecipe:()=>n});module.exports=M(S);var b=require("react");var c=require("react"),R=require("react/jsx-runtime"),f=(0,c.createContext)({});function n(){let e=(0,c.useContext)(f);if(!e)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return e}function u({children:e,config:t}){return(0,R.jsx)(f.Provider,{value:{config:t},children:e})}var p=require("react"),d=require("react/jsx-runtime"),C=(0,p.createContext)({});function x(){return(0,p.useContext)(C)}function g({children:e,config:t}){return(0,d.jsx)(C.Provider,{value:{config:t},children:e})}var h=require("react/jsx-runtime");function P(e){let{config:t}=x(),o=(0,b.useMemo)(()=>({...t,...e.config}),[t,e.config]);return(0,h.jsx)(u,{config:o,children:e.children})}var s=require("react/jsx-runtime");function v(){let{config:e}=n();return(0,s.jsx)("ul",{"recipe-ingredient-list":"",children:e.ingredients.map((t,o)=>(0,s.jsxs)("li",{"recipe-ingredient":"",children:[t.name," \u2014 ",t.amount.value," ",t.amount.unit]},o))})}var l=require("react/jsx-runtime");function y(){let{config:e}=n();return(0,l.jsx)("ul",{"recipe-instruction-list":"",children:e.instructions.map((t,o)=>(0,l.jsx)("li",{"recipe-instruction":o+1,children:t},o))})}var G=require("@radix-ui/react-aspect-ratio");var m=require("react/jsx-runtime");function T(e){var r,i;let{config:t}=n();if(!t.thumbnail)throw new Error("Missing thumbnail image. Did you forget to set one?");let o=(r=e.style)!=null?r:{};return(0,m.jsx)(G.AspectRatio,{"recipe-thumbnail":"",className:e.className,style:{width:"100%",...o},ratio:e.aspectRatio||1,children:(0,m.jsx)("img",{"recipe-thumbnail-image":"",style:{objectFit:"cover",width:"100%",height:"100%"},src:t.thumbnail,alt:(i=e.alt)!=null?i:t.name})})}0&&(module.exports={IngredientList,InstructionList,Provider,RecipeIngredientList,RecipeInstructionList,RecipeRoot,RecipeThumbnail,Root,Thumbnail,useRecipe});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{a as t}from"./chunk-U7TL6PST.mjs";import{a as e}from"./chunk-6MAELCYD.mjs";import{c as i}from"./chunk-QOCKR2HO.mjs";import{a as m}from"./chunk-RZGBB6SL.mjs";import{a as r}from"./chunk-GPTC24DR.mjs";import{a as o}from"./chunk-32VQC2BE.mjs";export{t as IngredientList,r as InstructionList,i as Provider,t as RecipeIngredientList,r as RecipeInstructionList,e as RecipeRoot,m as RecipeThumbnail,e as Root,m as Thumbnail,o as useRecipe};

package/dist/recipe-context.d.mts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { RecipeConfig } from 'recipe-core';
+
+type RecipeContext<T extends string> = {
+    config: RecipeConfig<T>;
+};
+declare function useRecipeContext(): RecipeContext<any>;
+interface RecipeContextProviderProps<T extends string> {
+    children: ReactNode;
+    config: RecipeConfig<T>;
+}
+declare function RecipeContextProvider<T extends string>({ children, config, }: RecipeContextProviderProps<T>): JSX.Element;
+
+export { type RecipeContext, RecipeContextProvider, useRecipeContext };

package/dist/recipe-context.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { RecipeConfig } from 'recipe-core';
+
+type RecipeContext<T extends string> = {
+    config: RecipeConfig<T>;
+};
+declare function useRecipeContext(): RecipeContext<any>;
+interface RecipeContextProviderProps<T extends string> {
+    children: ReactNode;
+    config: RecipeConfig<T>;
+}
+declare function RecipeContextProvider<T extends string>({ children, config, }: RecipeContextProviderProps<T>): JSX.Element;
+
+export { type RecipeContext, RecipeContextProvider, useRecipeContext };

package/dist/recipe-context.js

@@ -0,0 +1 @@
+var r=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var d=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},f=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of s(t))!C.call(e,o)&&o!==n&&r(e,o,{get:()=>t[o],enumerable:!(c=R(t,o))||c.enumerable});return e};var g=e=>f(r({},"__esModule",{value:!0}),e);var P={};d(P,{RecipeContextProvider:()=>a,useRecipeContext:()=>u});module.exports=g(P);var i=require("react"),x=require("react/jsx-runtime"),p=(0,i.createContext)({});function u(){let e=(0,i.useContext)(p);if(!e)throw new Error("Missing recipe context. Are you using <Recipe.Root />?");return e}function a({children:e,config:t}){return(0,x.jsx)(p.Provider,{value:{config:t},children:e})}0&&(module.exports={RecipeContextProvider,useRecipeContext});

package/dist/recipe-context.mjs

@@ -0,0 +1 @@
+import{a,b}from"./chunk-32VQC2BE.mjs";export{b as RecipeContextProvider,a as useRecipeContext};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@recipe-book/react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-aspect-ratio": "1.0.3",
+    "@radix-ui/react-avatar": "1.0.3",
+    "@radix-ui/react-accessible-icon": "1.0.3",
+    "recipe-core": "npm:@recipe-book/core@0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.15"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src",
+    "dev": "tsup src --watch"
+  }
+}