@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/auth/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../../src/site/components/auth/widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAQzC,UAAU,KAAK;IACX;gEAC4D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAChB;uBACmB;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAyDD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAE/B,CAAA;eAEc,UAAU"}

package/dist/site/components/auth/widget.js

@@ -0,0 +1,61 @@
+import { useContext } from 'react';
+import { Button, Popover, PopoverTrigger, PopoverContent, Separator } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui';
+import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/site/components/auth/resume.ts
+var KEY = "lux-auth-resume";
+var remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search);
+};
+var Widget = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+  const { isAuthenticated, isLoading, login, logout } = useIam();
+  const identity = useIamIdentity();
+  if (isLoading) {
+    return null;
+  }
+  if (!isAuthenticated) {
+    return noLogin ? null : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        className: cn("h-8 w-fit !min-w-0", className),
+        onClick: handleLogin ?? (() => {
+          remember();
+          void login();
+        }),
+        children: "Login"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: cn("rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8", className),
+        children: identity?.initials
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "bg-level-0", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 truncate", children: [
+        /* @__PURE__ */ jsx("h4", { className: "font-medium leading-none truncate", children: identity?.name }),
+        identity?.email && identity.email !== identity.name && /* @__PURE__ */ jsx("p", { className: "text-sm opacity-50 truncate", children: identity.email })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => {
+        logout();
+      }, children: "Logout" })
+    ] }) })
+  ] });
+};
+var AuthWidget = (props) => useContext(IamContext) ? /* @__PURE__ */ jsx(Widget, { ...props }) : null;
+var widget_default = AuthWidget;
+
+export { widget_default as default };

package/dist/site/components/back-button.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var navigation = require('next/navigation');
+var lucideReact = require('lucide-react');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var BackButton = ({
+  variant = "ghost",
+  size = "default",
+  clx = "",
+  iconClx = "",
+  onBack
+}) => {
+  const router = navigation.useRouter();
+  const back = () => {
+    if (onBack) {
+      onBack();
+    }
+    router.back();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    primitives.Button,
+    {
+      variant,
+      size,
+      onClick: back,
+      className: clx,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { style: ui.css(iconClx) })
+    }
+  );
+};
+var back_button_default = BackButton;
+
+module.exports = back_button_default;

package/dist/site/components/back-button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type ButtonSize, type ButtonVariant } from '@hanzo/ui';
+declare const BackButton: React.FC<{
+    variant?: {
+        variant?: ButtonVariant | null;
+        size?: ButtonSize | null;
+    }['variant'];
+    size?: {
+        variant?: ButtonVariant | null;
+        size?: ButtonSize | null;
+    }['size'];
+    onBack?: () => void;
+    clx?: string;
+    iconClx?: string;
+}>;
+export default BackButton;
+//# sourceMappingURL=back-button.d.ts.map

package/dist/site/components/back-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-button.d.ts","sourceRoot":"","sources":["../../../src/site/components/back-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAO,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAA;AACpE,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC,SAAS,CAAC,CAAA;IACjF,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC,MAAM,CAAC,CAAA;IAC3E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CA0BA,CAAA;eAEc,UAAU"}

package/dist/site/components/back-button.js

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/navigation';
+import { ChevronLeft } from 'lucide-react';
+import { Button } from '@hanzo/ui/primitives';
+import { css } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+var BackButton = ({
+  variant = "ghost",
+  size = "default",
+  clx = "",
+  iconClx = "",
+  onBack
+}) => {
+  const router = useRouter();
+  const back = () => {
+    if (onBack) {
+      onBack();
+    }
+    router.back();
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      size,
+      onClick: back,
+      className: clx,
+      children: /* @__PURE__ */ jsx(ChevronLeft, { style: css(iconClx) })
+    }
+  );
+};
+var back_button_default = BackButton;
+
+export { back_button_default as default };

package/dist/site/components/chat-widget.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var logo = require('@luxfi/logo');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var ChatWidget = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions,
+  buttonClx = ""
+}) => {
+  const [showChatbot, setShowChatbot] = React__default.default.useState(false);
+  const onClick = () => {
+    setShowChatbot(!showChatbot);
+  };
+  const searchParams = new URLSearchParams();
+  if (question) {
+    searchParams.append("question", question);
+  }
+  if (suggestedQuestions) {
+    searchParams.append("sQuestions", suggestedQuestions.map(({ message }) => message).join(","));
+    searchParams.append("sHeadings", suggestedQuestions.map(({ heading }) => heading).join(","));
+    searchParams.append("sIcons", suggestedQuestions.map(({ icon }) => icon).join(","));
+  }
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "fixed bottom-0 sm:bottom-16 right-0 w-full h-full sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating " + (showChatbot ? "flex" : "hidden"), children: /* @__PURE__ */ jsxRuntime.jsxs(primitives.Card, { className: "flex flex-col h-full w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex px-4 py-2 h-12 bg-level-0 items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "font-semibold font-heading", children: [
+          title,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(primitives.Button, { onClick, variant: "link", size: "icon", className: "w-fit sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(logo.LuxLogo, { variant: "white", size: 24 }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: iframeSrc, className: "h-full" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        tag: "span",
+        onClick,
+        className: ui.cn(
+          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
+          "fixed bottom-5 right-[24px] md:z-floating z-16 cursor-pointer",
+          "hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]",
+          "transition-transform",
+          showChatbot ? "rotate-180" : "",
+          buttonClx
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(logo.LuxLogo, { variant: "white", size: 28 })
+      }
+    )
+  ] });
+};
+var chat_widget_default = ChatWidget;
+
+module.exports = chat_widget_default;

package/dist/site/components/chat-widget.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ChatbotSuggestedQuestion } from '../types';
+declare const ChatWidget: React.FC<{
+    title: string;
+    chatbotUrl: string;
+    subtitle?: string;
+    question?: string;
+    buttonClx?: string;
+    suggestedQuestions?: ChatbotSuggestedQuestion[];
+}>;
+export default ChatWidget;
+//# sourceMappingURL=chat-widget.d.ts.map

package/dist/site/components/chat-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-widget.d.ts","sourceRoot":"","sources":["../../../src/site/components/chat-widget.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAExD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAUlB,kBAAkB,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAChD,CAwDA,CAAA;eAEc,UAAU"}

package/dist/site/components/chat-widget.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card, Button } from '@hanzo/ui/primitives';
+import { Box, cn } from '@hanzo/ui';
+import { LuxLogo } from '@luxfi/logo';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var ChatWidget = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions,
+  buttonClx = ""
+}) => {
+  const [showChatbot, setShowChatbot] = React.useState(false);
+  const onClick = () => {
+    setShowChatbot(!showChatbot);
+  };
+  const searchParams = new URLSearchParams();
+  if (question) {
+    searchParams.append("question", question);
+  }
+  if (suggestedQuestions) {
+    searchParams.append("sQuestions", suggestedQuestions.map(({ message }) => message).join(","));
+    searchParams.append("sHeadings", suggestedQuestions.map(({ heading }) => heading).join(","));
+    searchParams.append("sIcons", suggestedQuestions.map(({ icon }) => icon).join(","));
+  }
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { className: "fixed bottom-0 sm:bottom-16 right-0 w-full h-full sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating " + (showChatbot ? "flex" : "hidden"), children: /* @__PURE__ */ jsxs(Card, { className: "flex flex-col h-full w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex px-4 py-2 h-12 bg-level-0 items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "font-semibold font-heading", children: [
+          title,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "opacity-60", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick, variant: "link", size: "icon", className: "w-fit sm:hidden", children: /* @__PURE__ */ jsx(LuxLogo, { variant: "white", size: 24 }) })
+      ] }),
+      /* @__PURE__ */ jsx("iframe", { src: iframeSrc, className: "h-full" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        tag: "span",
+        onClick,
+        className: cn(
+          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
+          "fixed bottom-5 right-[24px] md:z-floating z-16 cursor-pointer",
+          "hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]",
+          "transition-transform",
+          showChatbot ? "rotate-180" : "",
+          buttonClx
+        ),
+        children: /* @__PURE__ */ jsx(LuxLogo, { variant: "white", size: 28 })
+      }
+    )
+  ] });
+};
+var chat_widget_default = ChatWidget;
+
+export { chat_widget_default as default };

package/dist/site/components/commerce/bag-button.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+var react = require('react');
+var mobx = require('mobx');
+var mobxReactLite = require('mobx-react-lite');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var commerce = require('@hanzo/commerce');
+var jsxRuntime = require('react/jsx-runtime');
+
+var BagIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", viewBox: "0 0 1019 1281", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z", fill: "currentColor" }) });
+var bag_icon_default = BagIcon;
+var BagButton = mobxReactLite.observer(({
+  showIfEmpty = false,
+  animateOnHover = true,
+  animateOnQuantityChange = true,
+  size = "default",
+  className = "",
+  iconClx = "",
+  onClick
+}) => {
+  const c = commerce.useCommerce();
+  const wiggleRef = react.useRef(mobx.observable.box("none"));
+  react.useEffect(() => (
+    // return IReactionDisposer
+    animateOnQuantityChange && c ? mobx.reaction(
+      () => c.cartQuantity,
+      (curr, prev) => {
+        if (curr > prev) {
+          mobx.runInAction(() => {
+            wiggleRef.current.set("more");
+          });
+        } else {
+          mobx.runInAction(() => {
+            wiggleRef.current.set("less");
+          });
+        }
+        setTimeout(() => {
+          mobx.runInAction(() => {
+            wiggleRef.current.set("none");
+          });
+        }, 800);
+      }
+    ) : void 0
+  ), []);
+  if (!c || !showIfEmpty && c.cartEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Box,
+    {
+      "aria-label": "Bag",
+      role: "button",
+      onClick,
+      className: ui.cn(
+        primitives.buttonVariants({ variant: "ghost", size }),
+        "rounded-md",
+        // Overides the bg change on hover --not a "hover effect" 
+        "relative group p-0 aspect-square hover:bg-background",
+        wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : "",
+        className
+      ),
+      children: [
+        !c.cartEmpty && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "z-above-content flex flex-col justify-center items-center  absolute left-0 right-0 top-0 bottom-0 leading-none font-sans font-bold text-primary-fg text-xs ", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[3px] w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: c.cartQuantity })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(bag_icon_default, { width: "24", height: "28", className: ui.cn(
+          "relative -top-[3px] fill-primary",
+          iconClx,
+          animateOnHover ? "group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300" : ""
+        ), "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+var bag_button_default = BagButton;
+
+module.exports = bag_button_default;

package/dist/site/components/commerce/bag-button.css

@@ -0,0 +1,4 @@
+/* src/site/components/icons/social-svg.css */
+.social-icon svg {
+  transform: scale(1.25);
+}

package/dist/site/components/commerce/bag-button.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type ButtonSize, type ButtonVariant } from '@hanzo/ui';
+declare const BagButton: React.FC<{
+    showIfEmpty?: boolean;
+    animateOnHover?: boolean;
+    animateOnQuantityChange?: boolean;
+    size?: {
+        variant?: ButtonVariant | null;
+        size?: ButtonSize | null;
+    }['size'];
+    className?: string;
+    iconClx?: string;
+    onClick?: () => void;
+}>;
+export default BagButton;
+//# sourceMappingURL=bag-button.d.ts.map

package/dist/site/components/commerce/bag-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bag-button.d.ts","sourceRoot":"","sources":["../../../../src/site/components/commerce/bag-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAKhD,OAAO,EAAW,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAA;AAKxE,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC,MAAM,CAAC,CAAA;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CA6EC,CAAA;eAEa,SAAS"}

package/dist/site/components/commerce/bag-button.js

@@ -0,0 +1,77 @@
+import { useRef, useEffect } from 'react';
+import { observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { buttonVariants } from '@hanzo/ui/primitives';
+import { Box, cn } from '@hanzo/ui';
+import { useCommerce } from '@hanzo/commerce';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var BagIcon = (props) => /* @__PURE__ */ jsx("svg", { fill: "none", viewBox: "0 0 1019 1281", ...props, children: /* @__PURE__ */ jsx("path", { d: "m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z", fill: "currentColor" }) });
+var bag_icon_default = BagIcon;
+var BagButton = observer(({
+  showIfEmpty = false,
+  animateOnHover = true,
+  animateOnQuantityChange = true,
+  size = "default",
+  className = "",
+  iconClx = "",
+  onClick
+}) => {
+  const c = useCommerce();
+  const wiggleRef = useRef(observable.box("none"));
+  useEffect(() => (
+    // return IReactionDisposer
+    animateOnQuantityChange && c ? reaction(
+      () => c.cartQuantity,
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {
+            wiggleRef.current.set("more");
+          });
+        } else {
+          runInAction(() => {
+            wiggleRef.current.set("less");
+          });
+        }
+        setTimeout(() => {
+          runInAction(() => {
+            wiggleRef.current.set("none");
+          });
+        }, 800);
+      }
+    ) : void 0
+  ), []);
+  if (!c || !showIfEmpty && c.cartEmpty) {
+    return /* @__PURE__ */ jsx("div", {});
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "aria-label": "Bag",
+      role: "button",
+      onClick,
+      className: cn(
+        buttonVariants({ variant: "ghost", size }),
+        "rounded-md",
+        // Overides the bg change on hover --not a "hover effect" 
+        "relative group p-0 aspect-square hover:bg-background",
+        wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : "",
+        className
+      ),
+      children: [
+        !c.cartEmpty && /* @__PURE__ */ jsxs(Box, { className: "z-above-content flex flex-col justify-center items-center  absolute left-0 right-0 top-0 bottom-0 leading-none font-sans font-bold text-primary-fg text-xs ", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-[3px] w-full" }),
+          /* @__PURE__ */ jsx("div", { children: c.cartQuantity })
+        ] }),
+        /* @__PURE__ */ jsx(bag_icon_default, { width: "24", height: "28", className: cn(
+          "relative -top-[3px] fill-primary",
+          iconClx,
+          animateOnHover ? "group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300" : ""
+        ), "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+var bag_button_default = BagButton;
+
+export { bag_button_default as default };

package/dist/site/components/commerce/buy-button.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var react = require('react');
+var mobxReactLite = require('mobx-react-lite');
+require('next/navigation');
+require('usehooks-ts');
+require('@hanzo/commerce');
+var jsxRuntime = require('react/jsx-runtime');
+
+mobxReactLite.enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = react.createContext(void 0);
+var useSelectAndBuy = () => {
+  return react.useContext(CommerceUIContext);
+};
+var BuyButton = ({
+  skuPath,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const buyOptions = useSelectAndBuy();
+  const handleClick = () => {
+    buyOptions.showVariants(skuPath);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(primitives.Button, { onClick: handleClick, ...rest, className: ui.cn(className, ""), children });
+};
+var buy_button_default = BuyButton;
+
+module.exports = buy_button_default;

package/dist/site/components/commerce/buy-button.d.ts

@@ -0,0 +1,11 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ButtonSize, type ButtonVariant } from '@hanzo/ui';
+declare const BuyButton: React.FC<PropsWithChildren & {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+} & {
+    skuPath: string;
+    className?: string;
+}>;
+export default BuyButton;
+//# sourceMappingURL=buy-button.d.ts.map

package/dist/site/components/commerce/buy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buy-button.d.ts","sourceRoot":"","sources":["../../../../src/site/components/commerce/buy-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAInD,OAAO,EAAM,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAA;AAGnE,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CACvB,iBAAiB,GACjB;IAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CAAE,GAC5D;IACE,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAgBF,CAAA;eAEc,SAAS"}

package/dist/site/components/commerce/buy-button.js

@@ -0,0 +1,29 @@
+import { Button } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui';
+import { createContext, useContext } from 'react';
+import { enableStaticRendering } from 'mobx-react-lite';
+import 'next/navigation';
+import 'usehooks-ts';
+import '@hanzo/commerce';
+import { jsx } from 'react/jsx-runtime';
+
+enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = createContext(void 0);
+var useSelectAndBuy = () => {
+  return useContext(CommerceUIContext);
+};
+var BuyButton = ({
+  skuPath,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const buyOptions = useSelectAndBuy();
+  const handleClick = () => {
+    buyOptions.showVariants(skuPath);
+  };
+  return /* @__PURE__ */ jsx(Button, { onClick: handleClick, ...rest, className: cn(className, ""), children });
+};
+var buy_button_default = BuyButton;
+
+export { buy_button_default as default };