@shopify/hydrogen-react 0.0.0-next-781568d → 0.0.0-next-60821c3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/browser-dev/CartLineProvider.mjs.map +1 -1
  2. package/dist/browser-dev/CartLineQuantity.mjs +12 -0
  3. package/dist/browser-dev/CartLineQuantity.mjs.map +1 -0
  4. package/dist/browser-dev/CartLineQuantityAdjustButton.mjs +48 -0
  5. package/dist/browser-dev/CartLineQuantityAdjustButton.mjs.map +1 -0
  6. package/dist/browser-dev/index.mjs +4 -0
  7. package/dist/browser-dev/index.mjs.map +1 -1
  8. package/dist/browser-prod/CartLineProvider.mjs.map +1 -1
  9. package/dist/browser-prod/CartLineQuantity.mjs +12 -0
  10. package/dist/browser-prod/CartLineQuantity.mjs.map +1 -0
  11. package/dist/browser-prod/CartLineQuantityAdjustButton.mjs +48 -0
  12. package/dist/browser-prod/CartLineQuantityAdjustButton.mjs.map +1 -0
  13. package/dist/browser-prod/index.mjs +4 -0
  14. package/dist/browser-prod/index.mjs.map +1 -1
  15. package/dist/node-dev/CartLineProvider.js.map +1 -1
  16. package/dist/node-dev/CartLineProvider.mjs.map +1 -1
  17. package/dist/node-dev/CartLineQuantity.js +12 -0
  18. package/dist/node-dev/CartLineQuantity.js.map +1 -0
  19. package/dist/node-dev/CartLineQuantity.mjs +12 -0
  20. package/dist/node-dev/CartLineQuantity.mjs.map +1 -0
  21. package/dist/node-dev/CartLineQuantityAdjustButton.js +48 -0
  22. package/dist/node-dev/CartLineQuantityAdjustButton.js.map +1 -0
  23. package/dist/node-dev/CartLineQuantityAdjustButton.mjs +48 -0
  24. package/dist/node-dev/CartLineQuantityAdjustButton.mjs.map +1 -0
  25. package/dist/node-dev/index.js +4 -0
  26. package/dist/node-dev/index.js.map +1 -1
  27. package/dist/node-dev/index.mjs +4 -0
  28. package/dist/node-dev/index.mjs.map +1 -1
  29. package/dist/node-prod/CartLineProvider.js.map +1 -1
  30. package/dist/node-prod/CartLineProvider.mjs.map +1 -1
  31. package/dist/node-prod/CartLineQuantity.js +12 -0
  32. package/dist/node-prod/CartLineQuantity.js.map +1 -0
  33. package/dist/node-prod/CartLineQuantity.mjs +12 -0
  34. package/dist/node-prod/CartLineQuantity.mjs.map +1 -0
  35. package/dist/node-prod/CartLineQuantityAdjustButton.js +48 -0
  36. package/dist/node-prod/CartLineQuantityAdjustButton.js.map +1 -0
  37. package/dist/node-prod/CartLineQuantityAdjustButton.mjs +48 -0
  38. package/dist/node-prod/CartLineQuantityAdjustButton.mjs.map +1 -0
  39. package/dist/node-prod/index.js +4 -0
  40. package/dist/node-prod/index.js.map +1 -1
  41. package/dist/node-prod/index.mjs +4 -0
  42. package/dist/node-prod/index.mjs.map +1 -1
  43. package/dist/types/CartLineProvider.d.ts +9 -3
  44. package/dist/types/CartLineQuantity.d.ts +13 -0
  45. package/dist/types/CartLineQuantityAdjustButton.d.ts +13 -0
  46. package/dist/types/index.d.cts +2 -0
  47. package/dist/types/index.d.ts +2 -0
  48. package/dist/types/storefront-api-response.types.d.ts +1 -1
  49. package/dist/umd/hydrogen-react.dev.js +47 -0
  50. package/dist/umd/hydrogen-react.dev.js.map +1 -1
  51. package/dist/umd/hydrogen-react.prod.js +16 -16
  52. package/dist/umd/hydrogen-react.prod.js.map +1 -1
  53. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\n\nexport const CartLineContext = createContext<CartLine | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLine {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLine;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAGa,MAAA,kBAAkB,cAA+B,IAAI;AAK3D,SAAS,cAAwB;AAChC,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
1
+ {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAMa,MAAA,kBAAkB,cAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
@@ -0,0 +1,12 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCartLine } from "./CartLineProvider.mjs";
3
+ function CartLineQuantity(props) {
4
+ const cartLine = useCartLine();
5
+ const { as, ...passthroughProps } = props;
6
+ const Wrapper = as ? as : "span";
7
+ return /* @__PURE__ */ jsx(Wrapper, { ...passthroughProps, children: cartLine.quantity });
8
+ }
9
+ export {
10
+ CartLineQuantity
11
+ };
12
+ //# sourceMappingURL=CartLineQuantity.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantity.mjs","sources":["../../src/CartLineQuantity.tsx"],"sourcesContent":["import type {ComponentPropsWithoutRef, ElementType} from 'react';\nimport {useCartLine} from './CartLineProvider.js';\n\ninterface CartLineQuantityBaseProps<\n ComponentGeneric extends ElementType = 'span'\n> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */\n as?: ComponentGeneric;\n}\n\nexport type CartLineQuantityProps<ComponentGeneric extends ElementType> =\n CartLineQuantityBaseProps<ComponentGeneric> &\n Omit<\n ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CartLineQuantityBaseProps<ComponentGeneric>\n >;\n\n/**\n * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.\n *\n * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.\n */\nexport function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(\n props: CartLineQuantityProps<ComponentGeneric>\n): JSX.Element {\n const cartLine = useCartLine();\n const {as, ...passthroughProps} = props;\n\n const Wrapper = as ? as : 'span';\n\n return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;\n}\n"],"names":[],"mappings":";;AAsBO,SAAS,iBACd,OACa;AACb,QAAM,WAAW;AACjB,QAAM,EAAC,IAAI,GAAG,iBAAA,IAAoB;AAE5B,QAAA,UAAU,KAAK,KAAK;AAE1B,SAAQ,oBAAA,SAAA,EAAS,GAAG,kBAAmB,mBAAS,SAAS,CAAA;AAC3D;"}
@@ -0,0 +1,48 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import { useCart } from "./CartProvider.mjs";
4
+ import { useCartLine } from "./CartLineProvider.mjs";
5
+ import { BaseButton } from "./BaseButton.mjs";
6
+ function CartLineQuantityAdjustButton(props) {
7
+ const { status, linesRemove, linesUpdate } = useCart();
8
+ const cartLine = useCartLine();
9
+ const { children, adjust, onClick, ...passthroughProps } = props;
10
+ const handleAdjust = useCallback(() => {
11
+ if (adjust === "remove") {
12
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
13
+ return;
14
+ }
15
+ const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
16
+ if (quantity <= 0) {
17
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
18
+ return;
19
+ }
20
+ const lineUpdate = {
21
+ id: (cartLine == null ? void 0 : cartLine.id) ?? "",
22
+ quantity,
23
+ attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
24
+ };
25
+ linesUpdate([lineUpdate]);
26
+ }, [
27
+ adjust,
28
+ cartLine == null ? void 0 : cartLine.attributes,
29
+ cartLine == null ? void 0 : cartLine.id,
30
+ cartLine == null ? void 0 : cartLine.quantity,
31
+ linesRemove,
32
+ linesUpdate
33
+ ]);
34
+ return /* @__PURE__ */ jsx(
35
+ BaseButton,
36
+ {
37
+ onClick,
38
+ defaultOnClick: handleAdjust,
39
+ disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
40
+ ...passthroughProps,
41
+ children
42
+ }
43
+ );
44
+ }
45
+ export {
46
+ CartLineQuantityAdjustButton
47
+ };
48
+ //# sourceMappingURL=CartLineQuantityAdjustButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantityAdjustButton.mjs","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button'\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button'\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n {...passthroughProps}\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":[],"mappings":";;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAe,QAAQ;AACnD,QAAM,WAAW;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAe,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAEhB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -6,6 +6,8 @@ import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
6
6
  import { CartCost } from "./CartCost.mjs";
7
7
  import { CartLinePrice } from "./CartLinePrice.mjs";
8
8
  import { CartLineProvider, useCartLine } from "./CartLineProvider.mjs";
9
+ import { CartLineQuantity } from "./CartLineQuantity.mjs";
10
+ import { CartLineQuantityAdjustButton } from "./CartLineQuantityAdjustButton.mjs";
9
11
  import { CartProvider, useCart } from "./CartProvider.mjs";
10
12
  import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
11
13
  import { getShopifyCookies } from "./cookies-utils.mjs";
@@ -33,6 +35,8 @@ export {
33
35
  CartCost,
34
36
  CartLinePrice,
35
37
  CartLineProvider,
38
+ CartLineQuantity,
39
+ CartLineQuantityAdjustButton,
36
40
  CartProvider,
37
41
  ExternalVideo,
38
42
  Image,
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\n\nexport const CartLineContext = createContext<CartLine | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLine {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLine;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAGa,MAAA,kBAAkB,cAA+B,IAAI;AAK3D,SAAS,cAAwB;AAChC,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
1
+ {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAMa,MAAA,kBAAkB,cAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
@@ -0,0 +1,12 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCartLine } from "./CartLineProvider.mjs";
3
+ function CartLineQuantity(props) {
4
+ const cartLine = useCartLine();
5
+ const { as, ...passthroughProps } = props;
6
+ const Wrapper = as ? as : "span";
7
+ return /* @__PURE__ */ jsx(Wrapper, { ...passthroughProps, children: cartLine.quantity });
8
+ }
9
+ export {
10
+ CartLineQuantity
11
+ };
12
+ //# sourceMappingURL=CartLineQuantity.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantity.mjs","sources":["../../src/CartLineQuantity.tsx"],"sourcesContent":["import type {ComponentPropsWithoutRef, ElementType} from 'react';\nimport {useCartLine} from './CartLineProvider.js';\n\ninterface CartLineQuantityBaseProps<\n ComponentGeneric extends ElementType = 'span'\n> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */\n as?: ComponentGeneric;\n}\n\nexport type CartLineQuantityProps<ComponentGeneric extends ElementType> =\n CartLineQuantityBaseProps<ComponentGeneric> &\n Omit<\n ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CartLineQuantityBaseProps<ComponentGeneric>\n >;\n\n/**\n * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.\n *\n * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.\n */\nexport function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(\n props: CartLineQuantityProps<ComponentGeneric>\n): JSX.Element {\n const cartLine = useCartLine();\n const {as, ...passthroughProps} = props;\n\n const Wrapper = as ? as : 'span';\n\n return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;\n}\n"],"names":[],"mappings":";;AAsBO,SAAS,iBACd,OACa;AACb,QAAM,WAAW;AACjB,QAAM,EAAC,IAAI,GAAG,iBAAA,IAAoB;AAE5B,QAAA,UAAU,KAAK,KAAK;AAE1B,SAAQ,oBAAA,SAAA,EAAS,GAAG,kBAAmB,mBAAS,SAAS,CAAA;AAC3D;"}
@@ -0,0 +1,48 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import { useCart } from "./CartProvider.mjs";
4
+ import { useCartLine } from "./CartLineProvider.mjs";
5
+ import { BaseButton } from "./BaseButton.mjs";
6
+ function CartLineQuantityAdjustButton(props) {
7
+ const { status, linesRemove, linesUpdate } = useCart();
8
+ const cartLine = useCartLine();
9
+ const { children, adjust, onClick, ...passthroughProps } = props;
10
+ const handleAdjust = useCallback(() => {
11
+ if (adjust === "remove") {
12
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
13
+ return;
14
+ }
15
+ const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
16
+ if (quantity <= 0) {
17
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
18
+ return;
19
+ }
20
+ const lineUpdate = {
21
+ id: (cartLine == null ? void 0 : cartLine.id) ?? "",
22
+ quantity,
23
+ attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
24
+ };
25
+ linesUpdate([lineUpdate]);
26
+ }, [
27
+ adjust,
28
+ cartLine == null ? void 0 : cartLine.attributes,
29
+ cartLine == null ? void 0 : cartLine.id,
30
+ cartLine == null ? void 0 : cartLine.quantity,
31
+ linesRemove,
32
+ linesUpdate
33
+ ]);
34
+ return /* @__PURE__ */ jsx(
35
+ BaseButton,
36
+ {
37
+ onClick,
38
+ defaultOnClick: handleAdjust,
39
+ disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
40
+ ...passthroughProps,
41
+ children
42
+ }
43
+ );
44
+ }
45
+ export {
46
+ CartLineQuantityAdjustButton
47
+ };
48
+ //# sourceMappingURL=CartLineQuantityAdjustButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantityAdjustButton.mjs","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button'\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button'\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n {...passthroughProps}\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":[],"mappings":";;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAe,QAAQ;AACnD,QAAM,WAAW;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAe,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAEhB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -6,6 +6,8 @@ import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
6
6
  import { CartCost } from "./CartCost.mjs";
7
7
  import { CartLinePrice } from "./CartLinePrice.mjs";
8
8
  import { CartLineProvider, useCartLine } from "./CartLineProvider.mjs";
9
+ import { CartLineQuantity } from "./CartLineQuantity.mjs";
10
+ import { CartLineQuantityAdjustButton } from "./CartLineQuantityAdjustButton.mjs";
9
11
  import { CartProvider, useCart } from "./CartProvider.mjs";
10
12
  import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
11
13
  import { getShopifyCookies } from "./cookies-utils.mjs";
@@ -33,6 +35,8 @@ export {
33
35
  CartCost,
34
36
  CartLinePrice,
35
37
  CartLineProvider,
38
+ CartLineQuantity,
39
+ CartLineQuantityAdjustButton,
36
40
  CartProvider,
37
41
  ExternalVideo,
38
42
  Image,
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CartLineProvider.js","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\n\nexport const CartLineContext = createContext<CartLine | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLine {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLine;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAGa,MAAA,kBAAkBA,yBAA+B,IAAI;AAK3D,SAAS,cAAwB;AAChC,QAAA,UAAUC,sBAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,wCACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;;;;"}
1
+ {"version":3,"file":"CartLineProvider.js","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAMa,MAAA,kBAAkBA,yBAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAUC,sBAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,wCACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\n\nexport const CartLineContext = createContext<CartLine | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLine {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLine;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAGa,MAAA,kBAAkB,cAA+B,IAAI;AAK3D,SAAS,cAAwB;AAChC,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
1
+ {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAMa,MAAA,kBAAkB,cAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const CartLineProvider = require("./CartLineProvider.js");
5
+ function CartLineQuantity(props) {
6
+ const cartLine = CartLineProvider.useCartLine();
7
+ const { as, ...passthroughProps } = props;
8
+ const Wrapper = as ? as : "span";
9
+ return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...passthroughProps, children: cartLine.quantity });
10
+ }
11
+ exports.CartLineQuantity = CartLineQuantity;
12
+ //# sourceMappingURL=CartLineQuantity.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantity.js","sources":["../../src/CartLineQuantity.tsx"],"sourcesContent":["import type {ComponentPropsWithoutRef, ElementType} from 'react';\nimport {useCartLine} from './CartLineProvider.js';\n\ninterface CartLineQuantityBaseProps<\n ComponentGeneric extends ElementType = 'span'\n> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */\n as?: ComponentGeneric;\n}\n\nexport type CartLineQuantityProps<ComponentGeneric extends ElementType> =\n CartLineQuantityBaseProps<ComponentGeneric> &\n Omit<\n ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CartLineQuantityBaseProps<ComponentGeneric>\n >;\n\n/**\n * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.\n *\n * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.\n */\nexport function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(\n props: CartLineQuantityProps<ComponentGeneric>\n): JSX.Element {\n const cartLine = useCartLine();\n const {as, ...passthroughProps} = props;\n\n const Wrapper = as ? as : 'span';\n\n return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;\n}\n"],"names":["useCartLine","jsx"],"mappings":";;;;AAsBO,SAAS,iBACd,OACa;AACb,QAAM,WAAWA,iBAAAA;AACjB,QAAM,EAAC,IAAI,GAAG,iBAAA,IAAoB;AAE5B,QAAA,UAAU,KAAK,KAAK;AAE1B,SAAQC,2BAAA,IAAA,SAAA,EAAS,GAAG,kBAAmB,mBAAS,SAAS,CAAA;AAC3D;;"}
@@ -0,0 +1,12 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCartLine } from "./CartLineProvider.mjs";
3
+ function CartLineQuantity(props) {
4
+ const cartLine = useCartLine();
5
+ const { as, ...passthroughProps } = props;
6
+ const Wrapper = as ? as : "span";
7
+ return /* @__PURE__ */ jsx(Wrapper, { ...passthroughProps, children: cartLine.quantity });
8
+ }
9
+ export {
10
+ CartLineQuantity
11
+ };
12
+ //# sourceMappingURL=CartLineQuantity.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantity.mjs","sources":["../../src/CartLineQuantity.tsx"],"sourcesContent":["import type {ComponentPropsWithoutRef, ElementType} from 'react';\nimport {useCartLine} from './CartLineProvider.js';\n\ninterface CartLineQuantityBaseProps<\n ComponentGeneric extends ElementType = 'span'\n> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */\n as?: ComponentGeneric;\n}\n\nexport type CartLineQuantityProps<ComponentGeneric extends ElementType> =\n CartLineQuantityBaseProps<ComponentGeneric> &\n Omit<\n ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CartLineQuantityBaseProps<ComponentGeneric>\n >;\n\n/**\n * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.\n *\n * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.\n */\nexport function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(\n props: CartLineQuantityProps<ComponentGeneric>\n): JSX.Element {\n const cartLine = useCartLine();\n const {as, ...passthroughProps} = props;\n\n const Wrapper = as ? as : 'span';\n\n return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;\n}\n"],"names":[],"mappings":";;AAsBO,SAAS,iBACd,OACa;AACb,QAAM,WAAW;AACjB,QAAM,EAAC,IAAI,GAAG,iBAAA,IAAoB;AAE5B,QAAA,UAAU,KAAK,KAAK;AAE1B,SAAQ,oBAAA,SAAA,EAAS,GAAG,kBAAmB,mBAAS,SAAS,CAAA;AAC3D;"}
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const require$$0 = require("react");
5
+ const CartProvider = require("./CartProvider.js");
6
+ const CartLineProvider = require("./CartLineProvider.js");
7
+ const BaseButton = require("./BaseButton.js");
8
+ function CartLineQuantityAdjustButton(props) {
9
+ const { status, linesRemove, linesUpdate } = CartProvider.useCart();
10
+ const cartLine = CartLineProvider.useCartLine();
11
+ const { children, adjust, onClick, ...passthroughProps } = props;
12
+ const handleAdjust = require$$0.useCallback(() => {
13
+ if (adjust === "remove") {
14
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
15
+ return;
16
+ }
17
+ const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
18
+ if (quantity <= 0) {
19
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
20
+ return;
21
+ }
22
+ const lineUpdate = {
23
+ id: (cartLine == null ? void 0 : cartLine.id) ?? "",
24
+ quantity,
25
+ attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
26
+ };
27
+ linesUpdate([lineUpdate]);
28
+ }, [
29
+ adjust,
30
+ cartLine == null ? void 0 : cartLine.attributes,
31
+ cartLine == null ? void 0 : cartLine.id,
32
+ cartLine == null ? void 0 : cartLine.quantity,
33
+ linesRemove,
34
+ linesUpdate
35
+ ]);
36
+ return /* @__PURE__ */ jsxRuntime.jsx(
37
+ BaseButton.BaseButton,
38
+ {
39
+ onClick,
40
+ defaultOnClick: handleAdjust,
41
+ disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
42
+ ...passthroughProps,
43
+ children
44
+ }
45
+ );
46
+ }
47
+ exports.CartLineQuantityAdjustButton = CartLineQuantityAdjustButton;
48
+ //# sourceMappingURL=CartLineQuantityAdjustButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantityAdjustButton.js","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button'\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button'\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n {...passthroughProps}\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":["useCart","useCartLine","useCallback","jsx","BaseButton"],"mappings":";;;;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAeA,aAAQ,QAAA;AACnD,QAAM,WAAWC,iBAAAA;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAeC,WAAAA,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAEhB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
@@ -0,0 +1,48 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import { useCart } from "./CartProvider.mjs";
4
+ import { useCartLine } from "./CartLineProvider.mjs";
5
+ import { BaseButton } from "./BaseButton.mjs";
6
+ function CartLineQuantityAdjustButton(props) {
7
+ const { status, linesRemove, linesUpdate } = useCart();
8
+ const cartLine = useCartLine();
9
+ const { children, adjust, onClick, ...passthroughProps } = props;
10
+ const handleAdjust = useCallback(() => {
11
+ if (adjust === "remove") {
12
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
13
+ return;
14
+ }
15
+ const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
16
+ if (quantity <= 0) {
17
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
18
+ return;
19
+ }
20
+ const lineUpdate = {
21
+ id: (cartLine == null ? void 0 : cartLine.id) ?? "",
22
+ quantity,
23
+ attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
24
+ };
25
+ linesUpdate([lineUpdate]);
26
+ }, [
27
+ adjust,
28
+ cartLine == null ? void 0 : cartLine.attributes,
29
+ cartLine == null ? void 0 : cartLine.id,
30
+ cartLine == null ? void 0 : cartLine.quantity,
31
+ linesRemove,
32
+ linesUpdate
33
+ ]);
34
+ return /* @__PURE__ */ jsx(
35
+ BaseButton,
36
+ {
37
+ onClick,
38
+ defaultOnClick: handleAdjust,
39
+ disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
40
+ ...passthroughProps,
41
+ children
42
+ }
43
+ );
44
+ }
45
+ export {
46
+ CartLineQuantityAdjustButton
47
+ };
48
+ //# sourceMappingURL=CartLineQuantityAdjustButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantityAdjustButton.mjs","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button'\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button'\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n {...passthroughProps}\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":[],"mappings":";;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAe,QAAQ;AACnD,QAAM,WAAW;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAe,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAEhB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -8,6 +8,8 @@ const CartCheckoutButton = require("./CartCheckoutButton.js");
8
8
  const CartCost = require("./CartCost.js");
9
9
  const CartLinePrice = require("./CartLinePrice.js");
10
10
  const CartLineProvider = require("./CartLineProvider.js");
11
+ const CartLineQuantity = require("./CartLineQuantity.js");
12
+ const CartLineQuantityAdjustButton = require("./CartLineQuantityAdjustButton.js");
11
13
  const CartProvider = require("./CartProvider.js");
12
14
  const codegen_helpers = require("./codegen.helpers.js");
13
15
  const cookiesUtils = require("./cookies-utils.js");
@@ -38,6 +40,8 @@ exports.CartCost = CartCost.CartCost;
38
40
  exports.CartLinePrice = CartLinePrice.CartLinePrice;
39
41
  exports.CartLineProvider = CartLineProvider.CartLineProvider;
40
42
  exports.useCartLine = CartLineProvider.useCartLine;
43
+ exports.CartLineQuantity = CartLineQuantity.CartLineQuantity;
44
+ exports.CartLineQuantityAdjustButton = CartLineQuantityAdjustButton.CartLineQuantityAdjustButton;
41
45
  exports.CartProvider = CartProvider.CartProvider;
42
46
  exports.useCart = CartProvider.useCart;
43
47
  exports.storefrontApiCustomScalars = codegen_helpers.storefrontApiCustomScalars;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -6,6 +6,8 @@ import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
6
6
  import { CartCost } from "./CartCost.mjs";
7
7
  import { CartLinePrice } from "./CartLinePrice.mjs";
8
8
  import { CartLineProvider, useCartLine } from "./CartLineProvider.mjs";
9
+ import { CartLineQuantity } from "./CartLineQuantity.mjs";
10
+ import { CartLineQuantityAdjustButton } from "./CartLineQuantityAdjustButton.mjs";
9
11
  import { CartProvider, useCart } from "./CartProvider.mjs";
10
12
  import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
11
13
  import { getShopifyCookies } from "./cookies-utils.mjs";
@@ -33,6 +35,8 @@ export {
33
35
  CartCost,
34
36
  CartLinePrice,
35
37
  CartLineProvider,
38
+ CartLineQuantity,
39
+ CartLineQuantityAdjustButton,
36
40
  CartProvider,
37
41
  ExternalVideo,
38
42
  Image,
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CartLineProvider.js","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\n\nexport const CartLineContext = createContext<CartLine | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLine {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLine;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAGa,MAAA,kBAAkBA,yBAA+B,IAAI;AAK3D,SAAS,cAAwB;AAChC,QAAA,UAAUC,sBAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,wCACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;;;;"}
1
+ {"version":3,"file":"CartLineProvider.js","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAMa,MAAA,kBAAkBA,yBAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAUC,sBAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,wCACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\n\nexport const CartLineContext = createContext<CartLine | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLine {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLine;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAGa,MAAA,kBAAkB,cAA+B,IAAI;AAK3D,SAAS,cAAwB;AAChC,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
1
+ {"version":3,"file":"CartLineProvider.mjs","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":[],"mappings":";;AAMa,MAAA,kBAAkB,cAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAU,WAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;"}
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const CartLineProvider = require("./CartLineProvider.js");
5
+ function CartLineQuantity(props) {
6
+ const cartLine = CartLineProvider.useCartLine();
7
+ const { as, ...passthroughProps } = props;
8
+ const Wrapper = as ? as : "span";
9
+ return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...passthroughProps, children: cartLine.quantity });
10
+ }
11
+ exports.CartLineQuantity = CartLineQuantity;
12
+ //# sourceMappingURL=CartLineQuantity.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantity.js","sources":["../../src/CartLineQuantity.tsx"],"sourcesContent":["import type {ComponentPropsWithoutRef, ElementType} from 'react';\nimport {useCartLine} from './CartLineProvider.js';\n\ninterface CartLineQuantityBaseProps<\n ComponentGeneric extends ElementType = 'span'\n> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */\n as?: ComponentGeneric;\n}\n\nexport type CartLineQuantityProps<ComponentGeneric extends ElementType> =\n CartLineQuantityBaseProps<ComponentGeneric> &\n Omit<\n ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CartLineQuantityBaseProps<ComponentGeneric>\n >;\n\n/**\n * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.\n *\n * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.\n */\nexport function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(\n props: CartLineQuantityProps<ComponentGeneric>\n): JSX.Element {\n const cartLine = useCartLine();\n const {as, ...passthroughProps} = props;\n\n const Wrapper = as ? as : 'span';\n\n return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;\n}\n"],"names":["useCartLine","jsx"],"mappings":";;;;AAsBO,SAAS,iBACd,OACa;AACb,QAAM,WAAWA,iBAAAA;AACjB,QAAM,EAAC,IAAI,GAAG,iBAAA,IAAoB;AAE5B,QAAA,UAAU,KAAK,KAAK;AAE1B,SAAQC,2BAAA,IAAA,SAAA,EAAS,GAAG,kBAAmB,mBAAS,SAAS,CAAA;AAC3D;;"}
@@ -0,0 +1,12 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useCartLine } from "./CartLineProvider.mjs";
3
+ function CartLineQuantity(props) {
4
+ const cartLine = useCartLine();
5
+ const { as, ...passthroughProps } = props;
6
+ const Wrapper = as ? as : "span";
7
+ return /* @__PURE__ */ jsx(Wrapper, { ...passthroughProps, children: cartLine.quantity });
8
+ }
9
+ export {
10
+ CartLineQuantity
11
+ };
12
+ //# sourceMappingURL=CartLineQuantity.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantity.mjs","sources":["../../src/CartLineQuantity.tsx"],"sourcesContent":["import type {ComponentPropsWithoutRef, ElementType} from 'react';\nimport {useCartLine} from './CartLineProvider.js';\n\ninterface CartLineQuantityBaseProps<\n ComponentGeneric extends ElementType = 'span'\n> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */\n as?: ComponentGeneric;\n}\n\nexport type CartLineQuantityProps<ComponentGeneric extends ElementType> =\n CartLineQuantityBaseProps<ComponentGeneric> &\n Omit<\n ComponentPropsWithoutRef<ComponentGeneric>,\n keyof CartLineQuantityBaseProps<ComponentGeneric>\n >;\n\n/**\n * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.\n *\n * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.\n */\nexport function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(\n props: CartLineQuantityProps<ComponentGeneric>\n): JSX.Element {\n const cartLine = useCartLine();\n const {as, ...passthroughProps} = props;\n\n const Wrapper = as ? as : 'span';\n\n return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;\n}\n"],"names":[],"mappings":";;AAsBO,SAAS,iBACd,OACa;AACb,QAAM,WAAW;AACjB,QAAM,EAAC,IAAI,GAAG,iBAAA,IAAoB;AAE5B,QAAA,UAAU,KAAK,KAAK;AAE1B,SAAQ,oBAAA,SAAA,EAAS,GAAG,kBAAmB,mBAAS,SAAS,CAAA;AAC3D;"}
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const require$$0 = require("react");
5
+ const CartProvider = require("./CartProvider.js");
6
+ const CartLineProvider = require("./CartLineProvider.js");
7
+ const BaseButton = require("./BaseButton.js");
8
+ function CartLineQuantityAdjustButton(props) {
9
+ const { status, linesRemove, linesUpdate } = CartProvider.useCart();
10
+ const cartLine = CartLineProvider.useCartLine();
11
+ const { children, adjust, onClick, ...passthroughProps } = props;
12
+ const handleAdjust = require$$0.useCallback(() => {
13
+ if (adjust === "remove") {
14
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
15
+ return;
16
+ }
17
+ const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
18
+ if (quantity <= 0) {
19
+ linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
20
+ return;
21
+ }
22
+ const lineUpdate = {
23
+ id: (cartLine == null ? void 0 : cartLine.id) ?? "",
24
+ quantity,
25
+ attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
26
+ };
27
+ linesUpdate([lineUpdate]);
28
+ }, [
29
+ adjust,
30
+ cartLine == null ? void 0 : cartLine.attributes,
31
+ cartLine == null ? void 0 : cartLine.id,
32
+ cartLine == null ? void 0 : cartLine.quantity,
33
+ linesRemove,
34
+ linesUpdate
35
+ ]);
36
+ return /* @__PURE__ */ jsxRuntime.jsx(
37
+ BaseButton.BaseButton,
38
+ {
39
+ onClick,
40
+ defaultOnClick: handleAdjust,
41
+ disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
42
+ ...passthroughProps,
43
+ children
44
+ }
45
+ );
46
+ }
47
+ exports.CartLineQuantityAdjustButton = CartLineQuantityAdjustButton;
48
+ //# sourceMappingURL=CartLineQuantityAdjustButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartLineQuantityAdjustButton.js","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button'\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button'\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n {...passthroughProps}\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":["useCart","useCartLine","useCallback","jsx","BaseButton"],"mappings":";;;;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAeA,aAAQ,QAAA;AACnD,QAAM,WAAWC,iBAAAA;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAeC,WAAAA,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAEhB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}