@shopify/hydrogen-react 0.0.0-next-81b4528 → 0.0.0-next-a09da91

package/dist/dev/AddToCartButton.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const CartProvider = require("./CartProvider.js");
+const ProductProvider = require("./ProductProvider.js");
+const BaseButton = require("./BaseButton.js");
+const jsxRuntime = require("react/jsx-runtime");
+function AddToCartButton(props) {
+  var _a;
+  const [addingItem, setAddingItem] = react.useState(false);
+  const {
+    variantId: explicitVariantId,
+    quantity = 1,
+    attributes,
+    sellingPlanId,
+    onClick,
+    children,
+    accessibleAddingToCartLabel,
+    ...passthroughProps
+  } = props;
+  const {
+    status,
+    linesAdd
+  } = CartProvider.useCart();
+  const {
+    selectedVariant
+  } = ProductProvider.useProduct();
+  const variantId = (_a = explicitVariantId != null ? explicitVariantId : selectedVariant == null ? void 0 : selectedVariant.id) != null ? _a : "";
+  const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+  react.useEffect(() => {
+    if (addingItem && status === "idle") {
+      setAddingItem(false);
+    }
+  }, [status, addingItem]);
+  const handleAddItem = react.useCallback(() => {
+    setAddingItem(true);
+    linesAdd([{
+      quantity,
+      merchandiseId: variantId || "",
+      attributes,
+      sellingPlanId
+    }]);
+  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(BaseButton.BaseButton, {
+      ...passthroughProps,
+      disabled,
+      onClick,
+      defaultOnClick: handleAddItem,
+      children
+    }), accessibleAddingToCartLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      },
+      role: "alert",
+      "aria-live": "assertive",
+      children: addingItem ? accessibleAddingToCartLabel : null
+    }) : null]
+  });
+}
+exports.AddToCartButton = AddToCartButton;
+//# sourceMappingURL=AddToCartButton.js.map

package/dist/dev/AddToCartButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","BaseButton","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,eAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,QAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAACC,uBAAD;AAAA,MAAA,GACMd;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLE,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGlC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;;"}

package/dist/dev/AddToCartButton.mjs

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { useProduct } from "./ProductProvider.mjs";
+import { BaseButton } from "./BaseButton.mjs";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+function AddToCartButton(props) {
+  var _a;
+  const [addingItem, setAddingItem] = useState(false);
+  const {
+    variantId: explicitVariantId,
+    quantity = 1,
+    attributes,
+    sellingPlanId,
+    onClick,
+    children,
+    accessibleAddingToCartLabel,
+    ...passthroughProps
+  } = props;
+  const {
+    status,
+    linesAdd
+  } = useCart();
+  const {
+    selectedVariant
+  } = useProduct();
+  const variantId = (_a = explicitVariantId != null ? explicitVariantId : selectedVariant == null ? void 0 : selectedVariant.id) != null ? _a : "";
+  const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+  useEffect(() => {
+    if (addingItem && status === "idle") {
+      setAddingItem(false);
+    }
+  }, [status, addingItem]);
+  const handleAddItem = useCallback(() => {
+    setAddingItem(true);
+    linesAdd([{
+      quantity,
+      merchandiseId: variantId || "",
+      attributes,
+      sellingPlanId
+    }]);
+  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(BaseButton, {
+      ...passthroughProps,
+      disabled,
+      onClick,
+      defaultOnClick: handleAddItem,
+      children
+    }), accessibleAddingToCartLabel ? /* @__PURE__ */ jsx("p", {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      },
+      role: "alert",
+      "aria-live": "assertive",
+      children: addingItem ? accessibleAddingToCartLabel : null
+    }) : null]
+  });
+}
+export {
+  AddToCartButton
+};
+//# sourceMappingURL=AddToCartButton.mjs.map

package/dist/dev/AddToCartButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}

package/dist/dev/BaseButton.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+function BaseButton(props) {
+  const {
+    as,
+    onClick,
+    defaultOnClick,
+    children,
+    buttonRef,
+    ...passthroughProps
+  } = props;
+  const handleOnClick = react.useCallback((event) => {
+    if (onClick) {
+      const clickShouldContinue = onClick(event);
+      if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+        return;
+    }
+    defaultOnClick == null ? void 0 : defaultOnClick(event);
+  }, [defaultOnClick, onClick]);
+  const Component = as || "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    ref: buttonRef,
+    onClick: handleOnClick,
+    ...passthroughProps,
+    children
+  });
+}
+exports.BaseButton = BaseButton;
+//# sourceMappingURL=BaseButton.js.map

package/dist/dev/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A default onClick behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A ref to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    Omit<\n      React.ComponentPropsWithoutRef<AsType>,\n      keyof CustomBaseButtonProps<AsType>\n    >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>\n) {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick]\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,kBACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,wCACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;;"}

package/dist/dev/BaseButton.mjs

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+function BaseButton(props) {
+  const {
+    as,
+    onClick,
+    defaultOnClick,
+    children,
+    buttonRef,
+    ...passthroughProps
+  } = props;
+  const handleOnClick = useCallback((event) => {
+    if (onClick) {
+      const clickShouldContinue = onClick(event);
+      if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+        return;
+    }
+    defaultOnClick == null ? void 0 : defaultOnClick(event);
+  }, [defaultOnClick, onClick]);
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx(Component, {
+    ref: buttonRef,
+    onClick: handleOnClick,
+    ...passthroughProps,
+    children
+  });
+}
+export {
+  BaseButton
+};
+//# sourceMappingURL=BaseButton.mjs.map

package/dist/dev/BaseButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.mjs","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A default onClick behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A ref to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    Omit<\n      React.ComponentPropsWithoutRef<AsType>,\n      keyof CustomBaseButtonProps<AsType>\n    >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>\n) {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick]\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,YACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}

package/dist/dev/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const AddToCartButton = require("./AddToCartButton.js");
 const CartProvider = require("./CartProvider.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
@@ -16,6 +17,7 @@ const ShopPayButton = require("./ShopPayButton.js");
 const storefrontClient = require("./storefront-client.js");
 const useMoney = require("./useMoney.js");
 const Video = require("./Video.js");
+exports.AddToCartButton = AddToCartButton.AddToCartButton;
 exports.CartProvider = CartProvider.CartProvider;
 exports.useCart = CartProvider.useCart;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;

package/dist/dev/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/dev/index.mjs

@@ -1,3 +1,4 @@
+import { AddToCartButton } from "./AddToCartButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
@@ -15,6 +16,7 @@ import { createStorefrontClient } from "./storefront-client.mjs";
 import { useMoney } from "./useMoney.mjs";
 import { Video } from "./Video.mjs";
 export {
+  AddToCartButton,
   CartProvider,
   ExternalVideo,
   Image,

package/dist/dev/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/prod/AddToCartButton.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const CartProvider = require("./CartProvider.js");
+const ProductProvider = require("./ProductProvider.js");
+const BaseButton = require("./BaseButton.js");
+const jsxRuntime = require("react/jsx-runtime");
+function AddToCartButton(props) {
+  var _a;
+  const [addingItem, setAddingItem] = react.useState(false);
+  const {
+    variantId: explicitVariantId,
+    quantity = 1,
+    attributes,
+    sellingPlanId,
+    onClick,
+    children,
+    accessibleAddingToCartLabel,
+    ...passthroughProps
+  } = props;
+  const {
+    status,
+    linesAdd
+  } = CartProvider.useCart();
+  const {
+    selectedVariant
+  } = ProductProvider.useProduct();
+  const variantId = (_a = explicitVariantId != null ? explicitVariantId : selectedVariant == null ? void 0 : selectedVariant.id) != null ? _a : "";
+  const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+  react.useEffect(() => {
+    if (addingItem && status === "idle") {
+      setAddingItem(false);
+    }
+  }, [status, addingItem]);
+  const handleAddItem = react.useCallback(() => {
+    setAddingItem(true);
+    linesAdd([{
+      quantity,
+      merchandiseId: variantId || "",
+      attributes,
+      sellingPlanId
+    }]);
+  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(BaseButton.BaseButton, {
+      ...passthroughProps,
+      disabled,
+      onClick,
+      defaultOnClick: handleAddItem,
+      children
+    }), accessibleAddingToCartLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      },
+      role: "alert",
+      "aria-live": "assertive",
+      children: addingItem ? accessibleAddingToCartLabel : null
+    }) : null]
+  });
+}
+exports.AddToCartButton = AddToCartButton;
+//# sourceMappingURL=AddToCartButton.js.map

package/dist/prod/AddToCartButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","BaseButton","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,eAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,QAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAACC,uBAAD;AAAA,MAAA,GACMd;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLE,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGlC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;;"}

package/dist/prod/AddToCartButton.mjs

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { useProduct } from "./ProductProvider.mjs";
+import { BaseButton } from "./BaseButton.mjs";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+function AddToCartButton(props) {
+  var _a;
+  const [addingItem, setAddingItem] = useState(false);
+  const {
+    variantId: explicitVariantId,
+    quantity = 1,
+    attributes,
+    sellingPlanId,
+    onClick,
+    children,
+    accessibleAddingToCartLabel,
+    ...passthroughProps
+  } = props;
+  const {
+    status,
+    linesAdd
+  } = useCart();
+  const {
+    selectedVariant
+  } = useProduct();
+  const variantId = (_a = explicitVariantId != null ? explicitVariantId : selectedVariant == null ? void 0 : selectedVariant.id) != null ? _a : "";
+  const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+  useEffect(() => {
+    if (addingItem && status === "idle") {
+      setAddingItem(false);
+    }
+  }, [status, addingItem]);
+  const handleAddItem = useCallback(() => {
+    setAddingItem(true);
+    linesAdd([{
+      quantity,
+      merchandiseId: variantId || "",
+      attributes,
+      sellingPlanId
+    }]);
+  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(BaseButton, {
+      ...passthroughProps,
+      disabled,
+      onClick,
+      defaultOnClick: handleAddItem,
+      children
+    }), accessibleAddingToCartLabel ? /* @__PURE__ */ jsx("p", {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      },
+      role: "alert",
+      "aria-live": "assertive",
+      children: addingItem ? accessibleAddingToCartLabel : null
+    }) : null]
+  });
+}
+export {
+  AddToCartButton
+};
+//# sourceMappingURL=AddToCartButton.mjs.map

package/dist/prod/AddToCartButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}

package/dist/prod/BaseButton.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+function BaseButton(props) {
+  const {
+    as,
+    onClick,
+    defaultOnClick,
+    children,
+    buttonRef,
+    ...passthroughProps
+  } = props;
+  const handleOnClick = react.useCallback((event) => {
+    if (onClick) {
+      const clickShouldContinue = onClick(event);
+      if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+        return;
+    }
+    defaultOnClick == null ? void 0 : defaultOnClick(event);
+  }, [defaultOnClick, onClick]);
+  const Component = as || "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    ref: buttonRef,
+    onClick: handleOnClick,
+    ...passthroughProps,
+    children
+  });
+}
+exports.BaseButton = BaseButton;
+//# sourceMappingURL=BaseButton.js.map

package/dist/prod/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A default onClick behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A ref to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    Omit<\n      React.ComponentPropsWithoutRef<AsType>,\n      keyof CustomBaseButtonProps<AsType>\n    >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>\n) {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick]\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,kBACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,wCACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;;"}

package/dist/prod/BaseButton.mjs

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+function BaseButton(props) {
+  const {
+    as,
+    onClick,
+    defaultOnClick,
+    children,
+    buttonRef,
+    ...passthroughProps
+  } = props;
+  const handleOnClick = useCallback((event) => {
+    if (onClick) {
+      const clickShouldContinue = onClick(event);
+      if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+        return;
+    }
+    defaultOnClick == null ? void 0 : defaultOnClick(event);
+  }, [defaultOnClick, onClick]);
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx(Component, {
+    ref: buttonRef,
+    onClick: handleOnClick,
+    ...passthroughProps,
+    children
+  });
+}
+export {
+  BaseButton
+};
+//# sourceMappingURL=BaseButton.mjs.map

package/dist/prod/BaseButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.mjs","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A default onClick behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A ref to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    Omit<\n      React.ComponentPropsWithoutRef<AsType>,\n      keyof CustomBaseButtonProps<AsType>\n    >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>\n) {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick]\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,YACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}

package/dist/prod/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const AddToCartButton = require("./AddToCartButton.js");
 const CartProvider = require("./CartProvider.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
@@ -16,6 +17,7 @@ const ShopPayButton = require("./ShopPayButton.js");
 const storefrontClient = require("./storefront-client.js");
 const useMoney = require("./useMoney.js");
 const Video = require("./Video.js");
+exports.AddToCartButton = AddToCartButton.AddToCartButton;
 exports.CartProvider = CartProvider.CartProvider;
 exports.useCart = CartProvider.useCart;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;

package/dist/prod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prod/index.mjs

@@ -1,3 +1,4 @@
+import { AddToCartButton } from "./AddToCartButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
@@ -15,6 +16,7 @@ import { createStorefrontClient } from "./storefront-client.mjs";
 import { useMoney } from "./useMoney.mjs";
 import { Video } from "./Video.mjs";
 export {
+  AddToCartButton,
   CartProvider,
   ExternalVideo,
   Image,

package/dist/prod/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/types/AddToCartButton.d.ts

@@ -0,0 +1,22 @@
+import { BaseButtonProps } from './BaseButton.js';
+interface AddToCartButtonProps {
+    /** An array of cart line attributes that belong to the item being added to the cart. */
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+    /** The ID of the variant. */
+    variantId?: string | null;
+    /** The item quantity. */
+    quantity?: number;
+    /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */
+    accessibleAddingToCartLabel?: string;
+    /** The selling plan ID of the subscription variant */
+    sellingPlanId?: string;
+}
+/**
+ * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
+ * It must be a descendent of the `CartProvider` component.
+ */
+export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
+export {};

package/dist/types/BaseButton.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, Ref } from 'react';
+export interface CustomBaseButtonProps<AsType> {
+    /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */
+    as?: AsType;
+    /** Any ReactNode elements. */
+    children: ReactNode;
+    /** Click event handler. Default behaviour triggers unless prevented */
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A default onClick behavior */
+    defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A ref to the underlying button */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
+export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;

package/dist/types/index.d.cts

@@ -1,3 +1,4 @@
+export { AddToCartButton } from './AddToCartButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { ExternalVideo } from './ExternalVideo.js';

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+export { AddToCartButton } from './AddToCartButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { ExternalVideo } from './ExternalVideo.js';