@fluid-app/cart-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,150 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let next_script = require("next/script");
+next_script = __toESM(next_script);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fluid_app_ui_primitives = require("@fluid-app/ui-primitives");
+let lucide_react = require("lucide-react");
+let react_dom = require("react-dom");
+//#region src/components/cart-script.tsx
+function CartScript({ subdomain, authJwt }) {
+	if (!subdomain) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_script.default, {
+		id: "fluid-cdn-script",
+		src: "https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js",
+		"data-fluid-shop": subdomain,
+		crossOrigin: "anonymous",
+		"data-auth-jwt": authJwt,
+		type: "module"
+	});
+}
+//#endregion
+//#region src/components/cart-widget.tsx
+function CartWidget() {
+	return react.default.createElement("fluid-cart-widget", {
+		"data-fluid-widget": "true",
+		"hide-widget": "true",
+		"is-primary": "true"
+	});
+}
+//#endregion
+//#region src/components/cart-button.tsx
+const MAX_SDK_POLL_ATTEMPTS = 50;
+function CartButton({ onCheckout }) {
+	const navigateToCheckout = (0, react.useCallback)(() => {
+		if (!window.FluidCommerceSDK) {
+			console.error("FluidCommerceSDK not available");
+			return;
+		}
+		try {
+			const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();
+			if (!checkoutUrl) {
+				console.error("No checkout URL available");
+				return;
+			}
+			onCheckout?.(checkoutUrl);
+		} catch (error) {
+			console.error("Error getting checkout URL:", error);
+		}
+	}, [onCheckout]);
+	(0, react.useEffect)(() => {
+		let timeoutId = null;
+		let attempts = 0;
+		let cancelled = false;
+		const setupSDK = () => {
+			if (cancelled) return;
+			if (window.FluidCommerceSDK) window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);
+			else if (attempts < MAX_SDK_POLL_ATTEMPTS) {
+				attempts++;
+				timeoutId = setTimeout(setupSDK, 100);
+			}
+		};
+		setupSDK();
+		return () => {
+			cancelled = true;
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	}, [navigateToCheckout]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_fluid_app_ui_primitives.Button, {
+		className: "bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5",
+		onClick: () => {
+			window.fluidCart?.open();
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShoppingCart, { className: "size-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: "fluid-cart-count",
+				className: "bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold",
+				children: "0"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "",
+			children: "Cart"
+		})]
+	});
+}
+//#endregion
+//#region src/components/shop-container.tsx
+function ShopContainer({ children, className = "", cartScript, cartWidget }) {
+	const containerRef = (0, react.useRef)(null);
+	const [portalContainer, setPortalContainer] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		const currentContainer = containerRef.current;
+		if (!currentContainer) return;
+		const reactContentWrapper = document.createElement("div");
+		reactContentWrapper.id = "react-content-wrapper";
+		reactContentWrapper.style.cssText = `
+      position: relative;
+    `;
+		reactContentWrapper.className = "min-h-full";
+		currentContainer.appendChild(reactContentWrapper);
+		setPortalContainer(reactContentWrapper);
+		return () => {
+			if (currentContainer && reactContentWrapper) try {
+				currentContainer.removeChild(reactContentWrapper);
+			} catch (e) {
+				console.warn("Failed to cleanup isolated container:", e);
+			}
+			setPortalContainer(null);
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		className: `isolated-shop-wrapper ${className} h-full`,
+		children: portalContainer && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			cartScript,
+			cartWidget,
+			children
+		] }), portalContainer)
+	}) });
+}
+//#endregion
+exports.CartButton = CartButton;
+exports.CartScript = CartScript;
+exports.CartWidget = CartWidget;
+exports.ShopContainer = ShopContainer;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Script","React","Button","ShoppingCart"],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport Script from \"next/script\";\n\ninterface CartScriptProps {\n  subdomain: string;\n  authJwt?: string;\n}\n\nexport default function CartScript({\n  subdomain,\n  authJwt,\n}: CartScriptProps): React.ReactNode {\n  if (!subdomain) {\n    return null;\n  }\n\n  return (\n    <Script\n      id=\"fluid-cdn-script\"\n      src=\"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\"\n      data-fluid-shop={subdomain}\n      crossOrigin=\"anonymous\"\n      data-auth-jwt={authJwt}\n      type=\"module\"\n    ></Script>\n  );\n}\n","import React from \"react\";\n\nexport default function CartWidget(): React.ReactNode {\n  return React.createElement(\"fluid-cart-widget\", {\n    \"data-fluid-widget\": \"true\",\n    \"hide-widget\": \"true\",\n    \"is-primary\": \"true\",\n  });\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback } from \"react\";\n\ninterface CartButtonProps {\n  onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n  const navigateToCheckout = useCallback(() => {\n    if (!window.FluidCommerceSDK) {\n      console.error(\"FluidCommerceSDK not available\");\n      return;\n    }\n\n    try {\n      const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n      if (!checkoutUrl) {\n        console.error(\"No checkout URL available\");\n        return;\n      }\n      onCheckout?.(checkoutUrl);\n    } catch (error) {\n      console.error(\"Error getting checkout URL:\", error);\n    }\n  }, [onCheckout]);\n\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | null = null;\n    let attempts = 0;\n    let cancelled = false;\n\n    const setupSDK = () => {\n      if (cancelled) return;\n      if (window.FluidCommerceSDK) {\n        window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n      } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n        attempts++;\n        timeoutId = setTimeout(setupSDK, 100);\n      }\n    };\n\n    setupSDK();\n    return () => {\n      cancelled = true;\n      if (timeoutId) clearTimeout(timeoutId);\n    };\n  }, [navigateToCheckout]);\n\n  return (\n    <Button\n      className=\"bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5\"\n      onClick={() => {\n        window.fluidCart?.open();\n      }}\n    >\n      <div className=\"relative\">\n        <ShoppingCart className=\"size-5\" />\n        <span\n          id=\"fluid-cart-count\"\n          className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold\"\n        >\n          0\n        </span>\n      </div>\n      <span className=\"\">Cart</span>\n    </Button>\n  );\n}\n","\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n  children: React.ReactNode;\n  className?: string;\n  cartScript?: React.ReactNode;\n  cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n  children,\n  className = \"\",\n  cartScript,\n  cartWidget,\n}: ShopContainerProps): React.ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const currentContainer = containerRef.current;\n    if (!currentContainer) return;\n\n    const reactContentWrapper = document.createElement(\"div\");\n    reactContentWrapper.id = \"react-content-wrapper\";\n    reactContentWrapper.style.cssText = `\n      position: relative;\n    `;\n    reactContentWrapper.className = \"min-h-full\";\n\n    currentContainer.appendChild(reactContentWrapper);\n\n    setPortalContainer(reactContentWrapper);\n\n    return () => {\n      if (currentContainer && reactContentWrapper) {\n        try {\n          currentContainer.removeChild(reactContentWrapper);\n        } catch (e) {\n          console.warn(\"Failed to cleanup isolated container:\", e);\n        }\n      }\n      setPortalContainer(null);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className={`isolated-shop-wrapper ${className} h-full`}\n      >\n        {portalContainer &&\n          createPortal(\n            <>\n              {cartScript}\n              {cartWidget}\n              {children}\n            </>,\n            portalContainer,\n          )}\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAwB,WAAW,EACjC,WACA,WACmC;AACnC,KAAI,CAAC,UACH,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,SAAD;EACE,IAAG;EACH,KAAI;EACJ,mBAAiB;EACjB,aAAY;EACZ,iBAAe;EACf,MAAK;EACG,CAAA;;;;ACxBd,SAAwB,aAA8B;AACpD,QAAOC,MAAAA,QAAM,cAAc,qBAAqB;EAC9C,qBAAqB;EACrB,eAAe;EACf,cAAc;EACf,CAAC;;;;ACGJ,MAAM,wBAAwB;AAE9B,SAAgB,WAAW,EAAE,cAAgD;CAC3E,MAAM,sBAAA,GAAA,MAAA,mBAAuC;AAC3C,MAAI,CAAC,OAAO,kBAAkB;AAC5B,WAAQ,MAAM,iCAAiC;AAC/C;;AAGF,MAAI;GACF,MAAM,cAAc,OAAO,iBAAiB,gBAAgB;AAC5D,OAAI,CAAC,aAAa;AAChB,YAAQ,MAAM,4BAA4B;AAC1C;;AAEF,gBAAa,YAAY;WAClB,OAAO;AACd,WAAQ,MAAM,+BAA+B,MAAM;;IAEpD,CAAC,WAAW,CAAC;AAEhB,EAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,YAAkD;EACtD,IAAI,WAAW;EACf,IAAI,YAAY;EAEhB,MAAM,iBAAiB;AACrB,OAAI,UAAW;AACf,OAAI,OAAO,iBACT,QAAO,iBAAiB,cAAc,mBAAmB;YAChD,WAAW,uBAAuB;AAC3C;AACA,gBAAY,WAAW,UAAU,IAAI;;;AAIzC,YAAU;AACV,eAAa;AACX,eAAY;AACZ,OAAI,UAAW,cAAa,UAAU;;IAEvC,CAAC,mBAAmB,CAAC;AAExB,QACE,iBAAA,GAAA,kBAAA,MAACC,yBAAAA,QAAD;EACE,WAAU;EACV,eAAe;AACb,UAAO,WAAW,MAAM;;YAH5B,CAME,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,cAAD,EAAc,WAAU,UAAW,CAAA,EACnC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,IAAG;IACH,WAAU;cACX;IAEM,CAAA,CACH;MACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAG;GAAW,CAAA,CACvB;;;;;AC1Db,SAAwB,cAAc,EACpC,UACA,YAAY,IACZ,YACA,cACsC;CACtC,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UACtB,KACD;AAED,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,mBAAmB,aAAa;AACtC,MAAI,CAAC,iBAAkB;EAEvB,MAAM,sBAAsB,SAAS,cAAc,MAAM;AACzD,sBAAoB,KAAK;AACzB,sBAAoB,MAAM,UAAU;;;AAGpC,sBAAoB,YAAY;AAEhC,mBAAiB,YAAY,oBAAoB;AAEjD,qBAAmB,oBAAoB;AAEvC,eAAa;AACX,OAAI,oBAAoB,oBACtB,KAAI;AACF,qBAAiB,YAAY,oBAAoB;YAC1C,GAAG;AACV,YAAQ,KAAK,yCAAyC,EAAE;;AAG5D,sBAAmB,KAAK;;IAEzB,EAAE,CAAC;AAEN,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACL,WAAW,yBAAyB,UAAU;YAE7C,oBAAA,GAAA,UAAA,cAEG,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG;GACA;GACA;GACA,EAAA,CAAA,EACH,gBACD;EACC,CAAA,EACL,CAAA"}

package/dist/index.d.cts

@@ -0,0 +1,39 @@
+import React from "react";
+
+//#region src/components/cart-script.d.ts
+interface CartScriptProps {
+  subdomain: string;
+  authJwt?: string;
+}
+declare function CartScript({
+  subdomain,
+  authJwt
+}: CartScriptProps): React.ReactNode;
+//#endregion
+//#region src/components/cart-widget.d.ts
+declare function CartWidget(): React.ReactNode;
+//#endregion
+//#region src/components/cart-button.d.ts
+interface CartButtonProps {
+  onCheckout?: (checkoutUrl: string) => void;
+}
+declare function CartButton({
+  onCheckout
+}: CartButtonProps): React.ReactNode;
+//#endregion
+//#region src/components/shop-container.d.ts
+interface ShopContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  cartScript?: React.ReactNode;
+  cartWidget?: React.ReactNode;
+}
+declare function ShopContainer({
+  children,
+  className,
+  cartScript,
+  cartWidget
+}: ShopContainerProps): React.ReactNode;
+//#endregion
+export { CartButton, CartScript, CartWidget, ShopContainer };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"mappings":";;;UAKU,eAAA;EACR,SAAA;EACA,OAAA;AAAA;AAAA,iBAGsB,UAAA,CAAA;EACtB,SAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,SAAA;;;iBCXH,UAAA,CAAA,GAAc,KAAA,CAAM,SAAA;;;UCIlC,eAAA;EACR,UAAA,IAAc,WAAA;AAAA;AAAA,iBAKA,UAAA,CAAA;EAAa;AAAA,GAAc,eAAA,GAAkB,KAAA,CAAM,SAAA;;;UCPzD,kBAAA;EACR,QAAA,EAAU,KAAA,CAAM,SAAA;EAChB,SAAA;EACA,UAAA,GAAa,KAAA,CAAM,SAAA;EACnB,UAAA,GAAa,KAAA,CAAM,SAAA;AAAA;AAAA,iBAGG,aAAA,CAAA;EACtB,QAAA;EACA,SAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAqB,KAAA,CAAM,SAAA"}

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import React from "react";
+
+//#region src/components/cart-script.d.ts
+interface CartScriptProps {
+  subdomain: string;
+  authJwt?: string;
+}
+declare function CartScript({
+  subdomain,
+  authJwt
+}: CartScriptProps): React.ReactNode;
+//#endregion
+//#region src/components/cart-widget.d.ts
+declare function CartWidget(): React.ReactNode;
+//#endregion
+//#region src/components/cart-button.d.ts
+interface CartButtonProps {
+  onCheckout?: (checkoutUrl: string) => void;
+}
+declare function CartButton({
+  onCheckout
+}: CartButtonProps): React.ReactNode;
+//#endregion
+//#region src/components/shop-container.d.ts
+interface ShopContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  cartScript?: React.ReactNode;
+  cartWidget?: React.ReactNode;
+}
+declare function ShopContainer({
+  children,
+  className,
+  cartScript,
+  cartWidget
+}: ShopContainerProps): React.ReactNode;
+//#endregion
+export { CartButton, CartScript, CartWidget, ShopContainer };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"mappings":";;;UAKU,eAAA;EACR,SAAA;EACA,OAAA;AAAA;AAAA,iBAGsB,UAAA,CAAA;EACtB,SAAA;EACA;AAAA,GACC,eAAA,GAAkB,KAAA,CAAM,SAAA;;;iBCXH,UAAA,CAAA,GAAc,KAAA,CAAM,SAAA;;;UCIlC,eAAA;EACR,UAAA,IAAc,WAAA;AAAA;AAAA,iBAKA,UAAA,CAAA;EAAa;AAAA,GAAc,eAAA,GAAkB,KAAA,CAAM,SAAA;;;UCPzD,kBAAA;EACR,QAAA,EAAU,KAAA,CAAM,SAAA;EAChB,SAAA;EACA,UAAA,GAAa,KAAA,CAAM,SAAA;EACnB,UAAA,GAAa,KAAA,CAAM,SAAA;AAAA;AAAA,iBAGG,aAAA,CAAA;EACtB,QAAA;EACA,SAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAqB,KAAA,CAAM,SAAA"}

package/dist/index.mjs

@@ -0,0 +1,122 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Script from "next/script";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@fluid-app/ui-primitives";
+import { ShoppingCart } from "lucide-react";
+import { createPortal } from "react-dom";
+//#region src/components/cart-script.tsx
+function CartScript({ subdomain, authJwt }) {
+	if (!subdomain) return null;
+	return /* @__PURE__ */ jsx(Script, {
+		id: "fluid-cdn-script",
+		src: "https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js",
+		"data-fluid-shop": subdomain,
+		crossOrigin: "anonymous",
+		"data-auth-jwt": authJwt,
+		type: "module"
+	});
+}
+//#endregion
+//#region src/components/cart-widget.tsx
+function CartWidget() {
+	return React.createElement("fluid-cart-widget", {
+		"data-fluid-widget": "true",
+		"hide-widget": "true",
+		"is-primary": "true"
+	});
+}
+//#endregion
+//#region src/components/cart-button.tsx
+const MAX_SDK_POLL_ATTEMPTS = 50;
+function CartButton({ onCheckout }) {
+	const navigateToCheckout = useCallback(() => {
+		if (!window.FluidCommerceSDK) {
+			console.error("FluidCommerceSDK not available");
+			return;
+		}
+		try {
+			const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();
+			if (!checkoutUrl) {
+				console.error("No checkout URL available");
+				return;
+			}
+			onCheckout?.(checkoutUrl);
+		} catch (error) {
+			console.error("Error getting checkout URL:", error);
+		}
+	}, [onCheckout]);
+	useEffect(() => {
+		let timeoutId = null;
+		let attempts = 0;
+		let cancelled = false;
+		const setupSDK = () => {
+			if (cancelled) return;
+			if (window.FluidCommerceSDK) window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);
+			else if (attempts < MAX_SDK_POLL_ATTEMPTS) {
+				attempts++;
+				timeoutId = setTimeout(setupSDK, 100);
+			}
+		};
+		setupSDK();
+		return () => {
+			cancelled = true;
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	}, [navigateToCheckout]);
+	return /* @__PURE__ */ jsxs(Button, {
+		className: "bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5",
+		onClick: () => {
+			window.fluidCart?.open();
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(ShoppingCart, { className: "size-5" }), /* @__PURE__ */ jsx("span", {
+				id: "fluid-cart-count",
+				className: "bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold",
+				children: "0"
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "",
+			children: "Cart"
+		})]
+	});
+}
+//#endregion
+//#region src/components/shop-container.tsx
+function ShopContainer({ children, className = "", cartScript, cartWidget }) {
+	const containerRef = useRef(null);
+	const [portalContainer, setPortalContainer] = useState(null);
+	useEffect(() => {
+		const currentContainer = containerRef.current;
+		if (!currentContainer) return;
+		const reactContentWrapper = document.createElement("div");
+		reactContentWrapper.id = "react-content-wrapper";
+		reactContentWrapper.style.cssText = `
+      position: relative;
+    `;
+		reactContentWrapper.className = "min-h-full";
+		currentContainer.appendChild(reactContentWrapper);
+		setPortalContainer(reactContentWrapper);
+		return () => {
+			if (currentContainer && reactContentWrapper) try {
+				currentContainer.removeChild(reactContentWrapper);
+			} catch (e) {
+				console.warn("Failed to cleanup isolated container:", e);
+			}
+			setPortalContainer(null);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: `isolated-shop-wrapper ${className} h-full`,
+		children: portalContainer && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+			cartScript,
+			cartWidget,
+			children
+		] }), portalContainer)
+	}) });
+}
+//#endregion
+export { CartButton, CartScript, CartWidget, ShopContainer };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/cart-script.tsx","../src/components/cart-widget.tsx","../src/components/cart-button.tsx","../src/components/shop-container.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport Script from \"next/script\";\n\ninterface CartScriptProps {\n  subdomain: string;\n  authJwt?: string;\n}\n\nexport default function CartScript({\n  subdomain,\n  authJwt,\n}: CartScriptProps): React.ReactNode {\n  if (!subdomain) {\n    return null;\n  }\n\n  return (\n    <Script\n      id=\"fluid-cdn-script\"\n      src=\"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\"\n      data-fluid-shop={subdomain}\n      crossOrigin=\"anonymous\"\n      data-auth-jwt={authJwt}\n      type=\"module\"\n    ></Script>\n  );\n}\n","import React from \"react\";\n\nexport default function CartWidget(): React.ReactNode {\n  return React.createElement(\"fluid-cart-widget\", {\n    \"data-fluid-widget\": \"true\",\n    \"hide-widget\": \"true\",\n    \"is-primary\": \"true\",\n  });\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback } from \"react\";\n\ninterface CartButtonProps {\n  onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n  const navigateToCheckout = useCallback(() => {\n    if (!window.FluidCommerceSDK) {\n      console.error(\"FluidCommerceSDK not available\");\n      return;\n    }\n\n    try {\n      const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n      if (!checkoutUrl) {\n        console.error(\"No checkout URL available\");\n        return;\n      }\n      onCheckout?.(checkoutUrl);\n    } catch (error) {\n      console.error(\"Error getting checkout URL:\", error);\n    }\n  }, [onCheckout]);\n\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | null = null;\n    let attempts = 0;\n    let cancelled = false;\n\n    const setupSDK = () => {\n      if (cancelled) return;\n      if (window.FluidCommerceSDK) {\n        window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n      } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n        attempts++;\n        timeoutId = setTimeout(setupSDK, 100);\n      }\n    };\n\n    setupSDK();\n    return () => {\n      cancelled = true;\n      if (timeoutId) clearTimeout(timeoutId);\n    };\n  }, [navigateToCheckout]);\n\n  return (\n    <Button\n      className=\"bg-primary text-primary-foreground hover:bg-primary-700 relative flex items-center gap-4 rounded-sm px-4 py-1.5\"\n      onClick={() => {\n        window.fluidCart?.open();\n      }}\n    >\n      <div className=\"relative\">\n        <ShoppingCart className=\"size-5\" />\n        <span\n          id=\"fluid-cart-count\"\n          className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-bold\"\n        >\n          0\n        </span>\n      </div>\n      <span className=\"\">Cart</span>\n    </Button>\n  );\n}\n","\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n  children: React.ReactNode;\n  className?: string;\n  cartScript?: React.ReactNode;\n  cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n  children,\n  className = \"\",\n  cartScript,\n  cartWidget,\n}: ShopContainerProps): React.ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const currentContainer = containerRef.current;\n    if (!currentContainer) return;\n\n    const reactContentWrapper = document.createElement(\"div\");\n    reactContentWrapper.id = \"react-content-wrapper\";\n    reactContentWrapper.style.cssText = `\n      position: relative;\n    `;\n    reactContentWrapper.className = \"min-h-full\";\n\n    currentContainer.appendChild(reactContentWrapper);\n\n    setPortalContainer(reactContentWrapper);\n\n    return () => {\n      if (currentContainer && reactContentWrapper) {\n        try {\n          currentContainer.removeChild(reactContentWrapper);\n        } catch (e) {\n          console.warn(\"Failed to cleanup isolated container:\", e);\n        }\n      }\n      setPortalContainer(null);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className={`isolated-shop-wrapper ${className} h-full`}\n      >\n        {portalContainer &&\n          createPortal(\n            <>\n              {cartScript}\n              {cartWidget}\n              {children}\n            </>,\n            portalContainer,\n          )}\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAwB,WAAW,EACjC,WACA,WACmC;AACnC,KAAI,CAAC,UACH,QAAO;AAGT,QACE,oBAAC,QAAD;EACE,IAAG;EACH,KAAI;EACJ,mBAAiB;EACjB,aAAY;EACZ,iBAAe;EACf,MAAK;EACG,CAAA;;;;ACxBd,SAAwB,aAA8B;AACpD,QAAO,MAAM,cAAc,qBAAqB;EAC9C,qBAAqB;EACrB,eAAe;EACf,cAAc;EACf,CAAC;;;;ACGJ,MAAM,wBAAwB;AAE9B,SAAgB,WAAW,EAAE,cAAgD;CAC3E,MAAM,qBAAqB,kBAAkB;AAC3C,MAAI,CAAC,OAAO,kBAAkB;AAC5B,WAAQ,MAAM,iCAAiC;AAC/C;;AAGF,MAAI;GACF,MAAM,cAAc,OAAO,iBAAiB,gBAAgB;AAC5D,OAAI,CAAC,aAAa;AAChB,YAAQ,MAAM,4BAA4B;AAC1C;;AAEF,gBAAa,YAAY;WAClB,OAAO;AACd,WAAQ,MAAM,+BAA+B,MAAM;;IAEpD,CAAC,WAAW,CAAC;AAEhB,iBAAgB;EACd,IAAI,YAAkD;EACtD,IAAI,WAAW;EACf,IAAI,YAAY;EAEhB,MAAM,iBAAiB;AACrB,OAAI,UAAW;AACf,OAAI,OAAO,iBACT,QAAO,iBAAiB,cAAc,mBAAmB;YAChD,WAAW,uBAAuB;AAC3C;AACA,gBAAY,WAAW,UAAU,IAAI;;;AAIzC,YAAU;AACV,eAAa;AACX,eAAY;AACZ,OAAI,UAAW,cAAa,UAAU;;IAEvC,CAAC,mBAAmB,CAAC;AAExB,QACE,qBAAC,QAAD;EACE,WAAU;EACV,eAAe;AACb,UAAO,WAAW,MAAM;;YAH5B,CAME,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,cAAD,EAAc,WAAU,UAAW,CAAA,EACnC,oBAAC,QAAD;IACE,IAAG;IACH,WAAU;cACX;IAEM,CAAA,CACH;MACN,oBAAC,QAAD;GAAM,WAAU;aAAG;GAAW,CAAA,CACvB;;;;;AC1Db,SAAwB,cAAc,EACpC,UACA,YAAY,IACZ,YACA,cACsC;CACtC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,KACD;AAED,iBAAgB;EACd,MAAM,mBAAmB,aAAa;AACtC,MAAI,CAAC,iBAAkB;EAEvB,MAAM,sBAAsB,SAAS,cAAc,MAAM;AACzD,sBAAoB,KAAK;AACzB,sBAAoB,MAAM,UAAU;;;AAGpC,sBAAoB,YAAY;AAEhC,mBAAiB,YAAY,oBAAoB;AAEjD,qBAAmB,oBAAoB;AAEvC,eAAa;AACX,OAAI,oBAAoB,oBACtB,KAAI;AACF,qBAAiB,YAAY,oBAAoB;YAC1C,GAAG;AACV,YAAQ,KAAK,yCAAyC,EAAE;;AAG5D,sBAAmB,KAAK;;IAEzB,EAAE,CAAC;AAEN,QACE,oBAAA,UAAA,EAAA,UACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,yBAAyB,UAAU;YAE7C,mBACC,aACE,qBAAA,UAAA,EAAA,UAAA;GACG;GACA;GACA;GACA,EAAA,CAAA,EACH,gBACD;EACC,CAAA,EACL,CAAA"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@fluid-app/cart-ui",
+  "version": "0.1.0",
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./styles/cart.css": "./src/styles/cart.css"
+  },
+  "devDependencies": {
+    "@types/node": "^24",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "lucide-react": "^0.575.0",
+    "tailwindcss": "^4.1.8",
+    "tsdown": "^0.21.0",
+    "typescript": "^5",
+    "@fluid-app/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "next": ">=15.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@fluid-app/ui-primitives": "^0.1.10"
+  },
+  "scripts": {
+    "transit": "tsgo --emitDeclarationOnly",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "oxlint --deny-warnings",
+    "lint:fix": "oxlint --fix --deny-warnings",
+    "typecheck": "tsgo --noEmit"
+  }
+}

package/src/styles/cart.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "@fluid-app/ui-primitives/styles/ui-primitives.css";
+@source "../**/*.{ts,tsx}";