@shopify/hydrogen 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# Hydrogen
+
+Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
+
+[Check out the docs](https://shopify.dev/beta/hydrogen)
+
+## Getting started
+
+**Requirements:**
+
+- Node v14+
+- Yarn
+
+```bash
+yarn
+yarn dev
+```
+
+## Building for production
+
+```bash
+yarn build
+```
+
+Then, you can run a local `server.js` using the production build with:
+
+```bash
+yarn serve
+```

package/client.d.ts

@@ -0,0 +1 @@
+export * from './dist/esnext/client';

package/client.js

@@ -0,0 +1 @@
+export * from './dist/esnext/client';

package/dist/esnext/client.d.ts

@@ -0,0 +1,7 @@
+export * from './components';
+export * from './hooks';
+export * from './foundation/ShopifyProvider';
+export { useServerResponse } from './foundation/Hydration/Cache.client';
+export * from './foundation/ServerStateProvider';
+export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
+export { Helmet } from 'react-helmet-async';

package/dist/esnext/client.js

@@ -0,0 +1,7 @@
+export * from './components';
+export * from './hooks';
+export * from './foundation/ShopifyProvider';
+export { useServerResponse } from './foundation/Hydration/Cache.client';
+export * from './foundation/ServerStateProvider';
+export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
+export { Helmet } from 'react-helmet-async';

package/dist/esnext/components/AddToCartButton/AddToCartButton.client.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { Props } from '../types';
+export interface AddToCartButtonProps {
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+    variantID: string;
+    quantity?: number;
+    children: ReactNode;
+    accessibleAddingToCartLabel?: string;
+}
+declare type PropsWeControl = 'onClick';
+export declare function AddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & AddToCartButtonProps): JSX.Element;
+export {};

package/dist/esnext/components/AddToCartButton/AddToCartButton.client.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { useCartLinesAddCallback, useCart, useCartCreateCallback, } from '../CartProvider';
+import { useCartUI } from '../CartUIProvider';
+export function AddToCartButton(props) {
+    const cartUI = useCartUI();
+    const [addingItem, setAddingItem] = useState(false);
+    const { variantID, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { status, id } = useCart();
+    const createCart = useCartCreateCallback();
+    const addLines = useCartLinesAddCallback();
+    useEffect(() => {
+        if (addingItem && status === 'idle') {
+            setAddingItem(false);
+            cartUI === null || cartUI === void 0 ? void 0 : cartUI.openCart();
+        }
+    }, [status, addingItem, cartUI]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { ...passthroughProps, disabled: addingItem || passthroughProps.disabled, onClick: () => {
+                setAddingItem(true);
+                if (!id) {
+                    createCart({
+                        lines: [
+                            {
+                                quantity: quantity,
+                                merchandiseId: variantID,
+                                attributes: attributes,
+                            },
+                        ],
+                    });
+                }
+                else {
+                    addLines([
+                        {
+                            quantity: quantity,
+                            merchandiseId: variantID,
+                            attributes: attributes,
+                        },
+                    ]);
+                }
+            } }, children),
+        React.createElement("p", { className: "sr-only", role: "alert", "aria-live": "assertive" }, addingItem
+            ? accessibleAddingToCartLabel !== null && accessibleAddingToCartLabel !== void 0 ? accessibleAddingToCartLabel : 'Adding product to your cart'
+            : null)));
+}

package/dist/esnext/components/AddToCartButton/index.d.ts

@@ -0,0 +1 @@
+export { AddToCartButton, AddToCartButtonProps } from './AddToCartButton.client';

package/dist/esnext/components/AddToCartButton/index.js

@@ -0,0 +1 @@
+export { AddToCartButton } from './AddToCartButton.client';

package/dist/esnext/components/BuyNowButton/BuyNowButton.d.ts

@@ -0,0 +1,12 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface BuyNowButtonProps {
+    quantity?: number;
+    variantId: string;
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+}
+export declare type BuyNowButtonPropsWeControl = 'onClick';
+export declare function BuyNowButton<TTag extends ElementType = 'button'>(props: Props<TTag, BuyNowButtonPropsWeControl> & BuyNowButtonProps): JSX.Element;

package/dist/esnext/components/BuyNowButton/BuyNowButton.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import { CartProvider, useCartCheckoutUrl, useCartCreateCallback, } from '../CartProvider';
+export function BuyNowButton(props) {
+    return (React.createElement(CartProvider, null,
+        React.createElement(Button, { ...props })));
+}
+function Button(props) {
+    const createCart = useCartCreateCallback();
+    const checkoutUrl = useCartCheckoutUrl();
+    const [loading, setLoading] = useState(false);
+    const { quantity, variantId, attributes, children, ...passthroughProps } = props;
+    useEffect(() => {
+        if (checkoutUrl) {
+            window.location.href = checkoutUrl;
+        }
+    }, [checkoutUrl]);
+    return (React.createElement("button", { disabled: loading !== null && loading !== void 0 ? loading : passthroughProps.disabled, ...passthroughProps, onClick: () => {
+            setLoading(true);
+            createCart({
+                lines: [
+                    {
+                        quantity: quantity !== null && quantity !== void 0 ? quantity : 1,
+                        merchandiseId: variantId,
+                        attributes,
+                    },
+                ],
+            });
+        } }, children));
+}

package/dist/esnext/components/BuyNowButton/index.d.ts

@@ -0,0 +1 @@
+export { BuyNowButton, BuyNowButtonProps, BuyNowButtonPropsWeControl, } from './BuyNowButton';

package/dist/esnext/components/BuyNowButton/index.js

@@ -0,0 +1 @@
+export { BuyNowButton, } from './BuyNowButton';

package/dist/esnext/components/CartCheckoutButton/CartCheckoutButton.client.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { Props } from '../types';
+declare type PropsWeControl = 'onClick';
+export declare function CartCheckoutButton<TTag extends React.ElementType = 'a'>(props: Props<TTag, PropsWeControl> & {
+    children: ReactNode;
+}): JSX.Element;
+export {};

package/dist/esnext/components/CartCheckoutButton/CartCheckoutButton.client.js

@@ -0,0 +1,14 @@
+import React, { useEffect, useState } from 'react';
+import { useCart, useCartCheckoutUrl } from '../CartProvider';
+export function CartCheckoutButton(props) {
+    const [requestedCheckout, setRequestedCheckout] = useState(false);
+    const { status } = useCart();
+    const url = useCartCheckoutUrl();
+    const { children, ...passthroughProps } = props;
+    useEffect(() => {
+        if (requestedCheckout && url && status === 'idle') {
+            window.location.href = url;
+        }
+    }, [requestedCheckout, status, url]);
+    return (React.createElement("button", { ...passthroughProps, disabled: requestedCheckout || passthroughProps.disabled, onClick: () => setRequestedCheckout(true) }, children));
+}

package/dist/esnext/components/CartCheckoutButton/index.d.ts

@@ -0,0 +1 @@
+export { CartCheckoutButton } from './CartCheckoutButton.client';

package/dist/esnext/components/CartCheckoutButton/index.js

@@ -0,0 +1 @@
+export { CartCheckoutButton } from './CartCheckoutButton.client';

package/dist/esnext/components/CartContainer/CartContainer.client.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { Props } from '../types';
+export interface CartContainerProps {
+    children: ReactNode;
+    id: string;
+}
+declare type PropsWeControl = 'ref' | 'id' | 'tabIndex' | 'aria-hidden';
+export declare function CartContainer<TTag extends React.ElementType = 'aside'>(props: Props<TTag, PropsWeControl> & CartContainerProps): JSX.Element;
+export {};

package/dist/esnext/components/CartContainer/CartContainer.client.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react';
+import { useCartUI } from '../CartUIProvider/hooks';
+import FocusTrap from 'focus-trap-react';
+export function CartContainer(props) {
+    const cartUI = useCartUI();
+    if (props.id == null) {
+        console.warn('A CartContainer ID should be provided for accessibility purposes');
+    }
+    if (cartUI == null) {
+        throw new Error('CartContainer must be a descendent of CartUIProvider');
+    }
+    return React.createElement(Cart, { ...props });
+}
+function Cart(props) {
+    var _a;
+    const { children, id, ...passthroughProps } = props;
+    const { isCartOpen, setContainerID } = useCartUI();
+    const ref = useRef(null);
+    useEffect(() => {
+        setContainerID(id);
+    }, [id, setContainerID]);
+    return (React.createElement(FocusTrap, { active: isCartOpen, focusTrapOptions: { allowOutsideClick: true } },
+        React.createElement("aside", { ...passthroughProps, ref: ref, id: id, tabIndex: -1, "aria-hidden": !isCartOpen, "aria-label": (_a = passthroughProps['aria-label']) !== null && _a !== void 0 ? _a : 'Cart' }, children)));
+}

package/dist/esnext/components/CartContainer/index.d.ts

@@ -0,0 +1 @@
+export { CartContainer } from './CartContainer.client';

package/dist/esnext/components/CartContainer/index.js

@@ -0,0 +1 @@
+export { CartContainer } from './CartContainer.client';

package/dist/esnext/components/CartLineAttributes/CartLineAttributes.client.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement, ElementType } from 'react';
+import { Props } from '../types';
+interface AttributesRenderProps {
+    key: string;
+    value?: string | null;
+}
+export declare function CartLineAttributes<TTag extends ElementType>(props: Props<TTag> & {
+    children: (props: AttributesRenderProps) => ReactElement;
+}): JSX.Element;
+export {};

package/dist/esnext/components/CartLineAttributes/CartLineAttributes.client.js

@@ -0,0 +1,9 @@
+import React, { cloneElement, Fragment } from 'react';
+import { useCartLine } from '../CartLineProvider';
+export function CartLineAttributes(props) {
+    const cartLine = useCartLine();
+    const { as, children, ...passthroughProps } = props;
+    const Wrapper = as ? as : 'ul';
+    const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
+    return (React.createElement(Wrapper, { ...passthroughProps }, cartLine.attributes.map((attribute) => (React.createElement(ChildWrapper, { key: `${attribute.key}-${attribute.value}` }, cloneElement(children(attribute)))))));
+}

package/dist/esnext/components/CartLineAttributes/index.d.ts

@@ -0,0 +1 @@
+export { CartLineAttributes } from './CartLineAttributes.client';

package/dist/esnext/components/CartLineAttributes/index.js

@@ -0,0 +1 @@
+export { CartLineAttributes } from './CartLineAttributes.client';

package/dist/esnext/components/CartLineImage/CartLineImage.client.d.ts

@@ -0,0 +1,6 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+import { ImageSizeOptions } from '../../utilities';
+export declare function CartLineImage<TTag extends ElementType = 'img'>(props: Props<TTag> & {
+    options?: ImageSizeOptions;
+}): JSX.Element | null;

package/dist/esnext/components/CartLineImage/CartLineImage.client.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useCartLine } from '../CartLineProvider';
+import { Image as ImageComponent } from '../Image';
+export function CartLineImage(props) {
+    const cartLine = useCartLine();
+    const { options, ...passthroughProps } = props;
+    return cartLine.merchandise.image ? (React.createElement(ImageComponent, { ...passthroughProps, image: cartLine.merchandise.image, options: options })) : null;
+}

package/dist/esnext/components/CartLineImage/index.d.ts

@@ -0,0 +1 @@
+export { CartLineImage } from './CartLineImage.client';

package/dist/esnext/components/CartLineImage/index.js

@@ -0,0 +1 @@
+export { CartLineImage } from './CartLineImage.client';

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.d.ts

@@ -0,0 +1,6 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface CartLinePriceProps {
+    priceType?: 'regular' | 'compareAt';
+}
+export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps): JSX.Element | null;

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCartLine } from '../CartLineProvider';
+import { Money } from '../Money';
+export function CartLinePrice(props) {
+    const cartLine = useCartLine();
+    const { priceType = 'regular', ...passthroughProps } = props;
+    const price = priceType === 'regular'
+        ? cartLine.merchandise.priceV2
+        : cartLine.merchandise.compareAtPriceV2;
+    if (price == null) {
+        return null;
+    }
+    return (React.createElement(Money, { ...passthroughProps, money: {
+            amount: price.amount * cartLine.quantity,
+            currencyCode: price.currencyCode,
+        } }, props.children));
+}

package/dist/esnext/components/CartLinePrice/index.d.ts

@@ -0,0 +1 @@
+export { CartLinePrice } from './CartLinePrice.client';

package/dist/esnext/components/CartLinePrice/index.js

@@ -0,0 +1 @@
+export { CartLinePrice } from './CartLinePrice.client';

package/dist/esnext/components/CartLineProductTitle/CartLineProductTitle.client.d.ts

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export declare function CartLineProductTitle<TTag extends ElementType>(props: Props<TTag>): JSX.Element;

package/dist/esnext/components/CartLineProductTitle/CartLineProductTitle.client.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useCartLine } from '../CartLineProvider';
+export function CartLineProductTitle(props) {
+    const cartLine = useCartLine();
+    const { as, ...passthroughProps } = props;
+    const Wrapper = as ? as : 'span';
+    return (React.createElement(Wrapper, { ...passthroughProps }, cartLine.merchandise.product.title));
+}

package/dist/esnext/components/CartLineProductTitle/index.d.ts

@@ -0,0 +1 @@
+export { CartLineProductTitle } from './CartLineProductTitle.client';

package/dist/esnext/components/CartLineProductTitle/index.js

@@ -0,0 +1 @@
+export { CartLineProductTitle } from './CartLineProductTitle.client';

package/dist/esnext/components/CartLineProvider/CartLineProvider.client.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { Cart } from '../CartProvider';
+export declare function CartLineProvider({ children, line, }: {
+    children: ReactNode;
+    line: Cart['lines'][1];
+}): JSX.Element;

package/dist/esnext/components/CartLineProvider/CartLineProvider.client.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CartLineContext } from './context';
+export function CartLineProvider({ children, line, }) {
+    return (React.createElement(CartLineContext.Provider, { value: line }, children));
+}

package/dist/esnext/components/CartLineProvider/context.d.ts

@@ -0,0 +1,26 @@
+export declare const CartLineContext: import("react").Context<({
+    __typename?: "CartLine" | undefined;
+} & Pick<import("../../graphql/types/types").CartLine, "id" | "quantity"> & {
+    attributes: ({
+        __typename?: "Attribute" | undefined;
+    } & Pick<import("../../graphql/types/types").Attribute, "key" | "value">)[];
+    merchandise: {
+        __typename?: "ProductVariant" | undefined;
+    } & Pick<import("../../graphql/types/types").ProductVariant, "title" | "id" | "availableForSale" | "requiresShipping"> & {
+        compareAtPriceV2?: import("../../graphql/types/types").Maybe<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        priceV2: {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "amount" | "currencyCode">;
+        image?: import("../../graphql/types/types").Maybe<{
+            __typename?: "Image" | undefined;
+        } & Pick<import("../../graphql/types/types").Image, "altText" | "originalSrc">> | undefined;
+        product: {
+            __typename?: "Product" | undefined;
+        } & Pick<import("../../graphql/types/types").Product, "title" | "handle">;
+        selectedOptions: ({
+            __typename?: "SelectedOption" | undefined;
+        } & Pick<import("../../graphql/types/types").SelectedOption, "value" | "name">)[];
+    };
+}) | null>;

package/dist/esnext/components/CartLineProvider/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const CartLineContext = createContext(null);

package/dist/esnext/components/CartLineProvider/hooks.d.ts

@@ -0,0 +1,26 @@
+export declare function useCartLine(): {
+    __typename?: "CartLine" | undefined;
+} & Pick<import("../../graphql/types/types").CartLine, "id" | "quantity"> & {
+    attributes: ({
+        __typename?: "Attribute" | undefined;
+    } & Pick<import("../../graphql/types/types").Attribute, "key" | "value">)[];
+    merchandise: {
+        __typename?: "ProductVariant" | undefined;
+    } & Pick<import("../../graphql/types/types").ProductVariant, "title" | "id" | "availableForSale" | "requiresShipping"> & {
+        compareAtPriceV2?: import("../../graphql/types/types").Maybe<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        priceV2: {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "amount" | "currencyCode">;
+        image?: import("../../graphql/types/types").Maybe<{
+            __typename?: "Image" | undefined;
+        } & Pick<import("../../graphql/types/types").Image, "altText" | "originalSrc">> | undefined;
+        product: {
+            __typename?: "Product" | undefined;
+        } & Pick<import("../../graphql/types/types").Product, "title" | "handle">;
+        selectedOptions: ({
+            __typename?: "SelectedOption" | undefined;
+        } & Pick<import("../../graphql/types/types").SelectedOption, "value" | "name">)[];
+    };
+};

package/dist/esnext/components/CartLineProvider/hooks.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { CartLineContext } from './context';
+export function useCartLine() {
+    const context = useContext(CartLineContext);
+    if (context == null) {
+        throw new Error('Expected a cart line context but none was found');
+    }
+    return context;
+}

package/dist/esnext/components/CartLineProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { CartLineProvider } from './CartLineProvider.client';
+export { useCartLine } from './hooks';

package/dist/esnext/components/CartLineProvider/index.js

@@ -0,0 +1,2 @@
+export { CartLineProvider } from './CartLineProvider.client';
+export { useCartLine } from './hooks';

package/dist/esnext/components/CartLineQuantity/CartLineQuantity.client.d.ts

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export declare function CartLineQuantity<TTag extends ElementType>(props: Props<TTag>): JSX.Element;

package/dist/esnext/components/CartLineQuantity/CartLineQuantity.client.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useCartLine } from '../CartLineProvider';
+export function CartLineQuantity(props) {
+    const cartLine = useCartLine();
+    const { as, ...passthroughProps } = props;
+    const Wrapper = as ? as : 'span';
+    return React.createElement(Wrapper, { ...passthroughProps }, cartLine.quantity);
+}

package/dist/esnext/components/CartLineQuantity/index.d.ts

@@ -0,0 +1 @@
+export { CartLineQuantity } from './CartLineQuantity.client';

package/dist/esnext/components/CartLineQuantity/index.js

@@ -0,0 +1 @@
+export { CartLineQuantity } from './CartLineQuantity.client';

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, ElementType } from 'react';
+import { Props } from '../types';
+declare type PropsWeControl = 'onClick' | 'adjust';
+export declare function CartLineQuantityAdjustButton<TTag extends ElementType = 'button'>(props: Props<TTag, PropsWeControl> & {
+    children: ReactNode;
+    adjust?: 'increase' | 'decrease' | 'remove';
+}): JSX.Element;
+export {};

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCartLinesRemoveCallback, useCartLinesUpdateCallback, } from '../CartProvider';
+import { useCartLine } from '../CartLineProvider';
+export function CartLineQuantityAdjustButton(props) {
+    const updateLines = useCartLinesUpdateCallback();
+    const removeLines = useCartLinesRemoveCallback();
+    const cartLine = useCartLine();
+    const { children, adjust, ...passthroughProps } = props;
+    return (React.createElement("button", { onClick: () => {
+            if (adjust === 'remove') {
+                removeLines([cartLine.id]);
+                return;
+            }
+            const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
+            updateLines([{ id: cartLine.id, quantity }]);
+        }, ...passthroughProps }, children));
+}

package/dist/esnext/components/CartLineQuantityAdjustButton/index.d.ts

@@ -0,0 +1 @@
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';

package/dist/esnext/components/CartLineQuantityAdjustButton/index.js

@@ -0,0 +1 @@
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';

package/dist/esnext/components/CartLineSelectedOptions/CartLineSelectedOptions.client.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement, ElementType } from 'react';
+import { Props } from '../types';
+interface SelectedOptionsRenderProps {
+    name?: string;
+    value?: string;
+}
+export declare function CartLineSelectedOptions<TTag extends ElementType>(props: Props<TTag> & {
+    children: (props: SelectedOptionsRenderProps) => ReactElement;
+}): JSX.Element;
+export {};

package/dist/esnext/components/CartLineSelectedOptions/CartLineSelectedOptions.client.js

@@ -0,0 +1,9 @@
+import React, { cloneElement, Fragment } from 'react';
+import { useCartLine } from '../CartLineProvider';
+export function CartLineSelectedOptions(props) {
+    const cartLine = useCartLine();
+    const { as, children, ...passthroughProps } = props;
+    const Wrapper = as ? as : 'ul';
+    const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
+    return (React.createElement(Wrapper, { ...passthroughProps }, cartLine.merchandise.selectedOptions.map((option) => (React.createElement(ChildWrapper, { key: `${option.name}-${option.value}` }, cloneElement(children(option)))))));
+}

package/dist/esnext/components/CartLineSelectedOptions/index.d.ts

@@ -0,0 +1 @@
+export { CartLineSelectedOptions } from './CartLineSelectedOptions.client';

package/dist/esnext/components/CartLineSelectedOptions/index.js

@@ -0,0 +1 @@
+export { CartLineSelectedOptions } from './CartLineSelectedOptions.client';

package/dist/esnext/components/CartLines/CartLines.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, ElementType } from 'react';
+import { Cart } from '../CartProvider';
+import { Props } from '../types';
+export interface CartLinesProps {
+    children: ReactNode | ((line: Cart['lines'][1]) => ReactNode);
+}
+export declare function CartLines<TTag extends ElementType>(props: Props<TTag> & CartLinesProps): JSX.Element;

package/dist/esnext/components/CartLines/CartLines.js

@@ -0,0 +1,15 @@
+import React, { cloneElement, Fragment } from 'react';
+import { useCart } from '../CartProvider';
+import { CartLineProvider } from '../CartLineProvider';
+export function CartLines(props) {
+    const { lines } = useCart();
+    const { as, children, ...passthroughProps } = props;
+    const Wrapper = as !== null && as !== void 0 ? as : Fragment;
+    const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
+    return (React.createElement(Wrapper, { ...passthroughProps }, lines.map((line) => {
+        return (React.createElement(ChildWrapper, { key: line.id },
+            React.createElement(CartLineProvider, { line: line }, typeof children === 'function'
+                ? cloneElement(children(line))
+                : children)));
+    })));
+}

package/dist/esnext/components/CartLines/index.d.ts

@@ -0,0 +1 @@
+export { CartLines } from './CartLines';

package/dist/esnext/components/CartLines/index.js

@@ -0,0 +1 @@
+export { CartLines } from './CartLines';

package/dist/esnext/components/CartProvider/CartProvider.client.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { CartFragmentFragment } from './graphql/CartFragment';
+export declare function CartProvider({ children, cart, numCartLines, }: {
+    children: React.ReactNode;
+    cart?: CartFragmentFragment;
+    numCartLines?: number;
+}): JSX.Element;