@luxfi/ui 8.1.0 → 8.2.1

package/dist/site/components/commerce/drawer/index.cjs

@@ -0,0 +1,361 @@
+'use strict';
+
+var navigation = require('next/navigation');
+var mobxReactLite = require('mobx-react-lite');
+var commerce = require('@hanzo/commerce');
+var react = require('react');
+require('usehooks-ts');
+var jsxRuntime = require('react/jsx-runtime');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var mobx = require('mobx');
+
+mobxReactLite.enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = react.createContext(void 0);
+var useCommerceDrawer = () => {
+  return react.useContext(CommerceUIContext);
+};
+var useSelectAndBuy = () => {
+  return react.useContext(CommerceUIContext);
+};
+var CommerceDrawer = mobxReactLite.observer(({
+  children,
+  handleHandleClicked,
+  drawerClx = "",
+  ...rest
+}) => {
+  const drawer = useCommerceDrawer();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    primitives.Drawer,
+    {
+      open: drawer.open,
+      onOpenChange: () => {
+      },
+      modal: drawer.modal,
+      snapPoints: drawer.points,
+      activeSnapPoint: drawer.activePoint,
+      setActiveSnapPoint: drawer.onActivePointChanged.bind(drawer),
+      fastDragSkipsToEnd: false,
+      dragHandleOnly: true,
+      handleHandleClicked,
+      extendHandleDragRegion: false,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        primitives.DrawerContent,
+        {
+          defaultHandle: false,
+          className: ui.cn(
+            "border-0",
+            drawer.isMobile ? "pt-5" : "pt-6",
+            "w-full h-full"
+          ),
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              primitives.DrawerHandle,
+              {
+                className: ui.cn(
+                  "absolute top-0 left-0 right-0 mx-auto z-10",
+                  "flex justify-center items-start",
+                  "border-t rounded-t-lg border-muted-3",
+                  drawer.isMobile ? "h-5 touch-pan-y" : "h-6"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: ui.cn(
+                  // pseudo-handle
+                  "rounded-[3px] bg-level-3",
+                  drawer.isMobile ? "w-[155px] mt-[5px] h-1.5" : "w-[180px] mt-[3px] h-2.5 hover:bg-level-4",
+                  !drawer.isMobile ? "cursor-grab active:cursor-grabbing" : ""
+                ) })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+});
+var shell_default = CommerceDrawer;
+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 IconAndQuantity = mobxReactLite.observer(({
+  animateOnQuantityChange = false,
+  showArrow = true,
+  showQuantity = true,
+  clx = "",
+  iconClx = "",
+  digitClx = ""
+}) => {
+  const cmmc = commerce.useCommerce();
+  const wiggleRef = react.useRef(mobx.observable.box("none"));
+  react.useEffect(() => (
+    // return IReactionDisposer
+    animateOnQuantityChange ? mobx.reaction(
+      () => cmmc.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
+  ), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("flex items-center justify-center", clx), children: [
+    showQuantity && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
+      "relative flex items-center justify-center mr-1",
+      wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : ""
+    ), children: [
+      cmmc.cartQuantity > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: ui.cn(
+        "z-above-content flex flex-col justify-center items-center",
+        "absolute left-0 right-0 top-0 bottom-0",
+        digitClx
+      ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        /* color: 'white'  tailwind bug? ,*/
+        fontSize: "11px",
+        position: "relative",
+        top: "1px"
+      }, children: cmmc.cartQuantity }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(bag_icon_default, { width: "19", height: "24", className: ui.cn("relative -top-[3px] opacity-70", iconClx), "aria-hidden": "true" })
+    ] }),
+    showArrow && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "17px" }, children: "\u203A" })
+  ] });
+});
+var CheckoutButton = ({
+  handleCheckout,
+  variant = "primary",
+  rounded = "lg",
+  className,
+  showQuantity = true,
+  showArrow = true,
+  animateOnQuantityChange = true,
+  centerText = true,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    primitives.Button,
+    {
+      ...rest,
+      onClick: handleCheckout,
+      variant,
+      className: ui.cn(`rounded-${rounded}`, ui.cn(
+        "flex justify-between items-stretch group",
+        showQuantity ? centerText ? "px-1.5" : "pl-2.5 pr-1.5" : "",
+        className
+      )),
+      children: [
+        centerText && // must scale this one too, as it effects layout
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconAndQuantity,
+          {
+            showArrow,
+            showQuantity,
+            clx: "invisible group-hover:scale-105 transition-scale transition-duration-300"
+          }
+        ),
+        children ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center", children: "Checkout" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconAndQuantity,
+          {
+            clx: "group-hover:scale-105 transition-scale transition-duration-300",
+            animateOnQuantityChange,
+            showArrow,
+            showQuantity,
+            iconClx: "fill-background",
+            digitClx: "text-foreground group-hover:opacity-80 leading-none font-bold font-sans"
+          }
+        )
+      ]
+    }
+  );
+};
+var checkout_button_default = CheckoutButton;
+var CN = {
+  // h: mind padding!
+  mobile: { w: 36, h: 32 },
+  sm: { w: 60, h: 34 },
+  desktop: { w: 60, h: 32 }
+};
+var Info = ({
+  item,
+  clx = ""
+}) => {
+  const cmmc = commerce.useCommerce();
+  const family = cmmc.getFamilyById(item.familyId);
+  let topLine = family.title;
+  if (item.sku.startsWith("LXM-AG") || item.sku.startsWith("LXM-AU")) {
+    topLine = family.parentTitle + ", " + family.title;
+  }
+  const optionLabel = item.optionLabelShort ?? item.optionLabel;
+  const priceStr = commerce.formatCurrencyValue(item.price);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ", clx), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-left text-xs", children: topLine }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xxs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: optionLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2.5", children: priceStr })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs", clx), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-left", children: topLine }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: optionLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2.5", children: priceStr })
+      ] })
+    ] })
+  ] });
+};
+var PROMPT_COMMON_CLX = "block absolute top-0 left-0 bg-transparent duration-400 transition-opacity";
+var Micro = mobxReactLite.observer(({
+  clx = "",
+  handleCheckout,
+  handleItemClicked
+}) => {
+  const drawer = useCommerceDrawer();
+  const cmmc = commerce.useCommerce();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
+    drawer.showRecent ? "grid grid-cols-2" : "flex justify-center items-center ",
+    drawer.showRecent ? drawer.isMobile ? "-mt-3" : "-mt-3" : "",
+    "gap-2 md:gap-3 relative",
+    clx
+  ), children: [
+    drawer.showRecent && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex flex-col items-stretch " + (drawer.isMobile ? "justify-start" : "group"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { tag: "p", className: "relative text-muted text-xxs md:text-xs leading-none pl-1 self-start " + (drawer.isMobile ? "top-[3px]" : "top-[1px]"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "invisible", children: "scrictly for layout" }),
+        drawer.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: PROMPT_COMMON_CLX, children: "tap for options:" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: PROMPT_COMMON_CLX + " group-hover:opacity-0", children: "recent item:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: PROMPT_COMMON_CLX + " opacity-0 group-hover:opacity-100", children: "view options:" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        primitives.Button,
+        {
+          variant: "ghost",
+          className: ui.cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, ui.cn(
+            "box-content",
+            "flex flex-row justify-between items-center gap-1",
+            "-ml-1.5",
+            "overflow-hidden ",
+            "px-1 md:px-2 py-[2px]",
+            "border border-transparent group-hover:border-muted-3",
+            "group-hover:!bg-transparent",
+            "!min-w-0"
+          )),
+          size: drawer.isMobile ? "sm" : "default",
+          onClick: handleItemClicked,
+          children: [
+            cmmc.recentItem?.item.img && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.mobile, className: "sm:hidden grow-0 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.sm, className: "hidden sm:block md:hidden grow-0 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.desktop, className: "hidden md:block grow-0 shrink-0" })
+            ] }),
+            cmmc.recentItem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grow w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Info, { item: cmmc.recentItem.item, clx: "w-full" }) })
+          ]
+        }
+      )
+    ] }),
+    drawer.showCheckout && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
+      "flex flex-col w-full",
+      drawer.showRecent ? "items-stretch" : "items-center",
+      drawer.isMobile ? "justify-start" : "justify-center"
+    ), children: [
+      drawer.showRecent && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start", children: "for layout" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        checkout_button_default,
+        {
+          handleCheckout,
+          variant: "primary",
+          size: drawer.isMobile ? "sm" : "lg",
+          className: ui.cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, ui.cn(
+            drawer.isMobile ? drawer.showRecent ? "pl-3.5 pr-2.5" : "min-w-[320px]" : drawer.showRecent ? "" : "w-[320px]",
+            "text-sm font-semibold"
+          )),
+          centerText: drawer.isMobile ? !drawer.showRecent : true
+        }
+      )
+    ] })
+  ] });
+});
+var micro_default = Micro;
+var CommerceUIComponent = mobxReactLite.observer(() => {
+  const buy = useSelectAndBuy();
+  const drawer = useCommerceDrawer();
+  const router = navigation.useRouter();
+  const handleCheckout = () => {
+    router.push("/checkout");
+  };
+  const handleHandleClicked = () => {
+    if (drawer.state === "full") {
+      buy.hideVariants();
+    } else if (drawer.state === "micro") {
+      buy.showRecentVariants();
+    }
+  };
+  const handleItemClicked = () => {
+    buy.showRecentVariants();
+  };
+  const handleCloseGesture = () => {
+    if (drawer.state === "full") {
+      buy.hideVariants();
+      return true;
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    shell_default,
+    {
+      handleHandleClicked,
+      handleCloseGesture,
+      drawerClx: "flex flex-col",
+      children: [
+        drawer.state === "full" && /* The actual drawer is larger than the visible area (due to awkward
+        vaul impl.  So we have to ask the drawer for its currect snappoint 
+        and constrain layout to that.  
+        */
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          height: drawer.snapPointPx - 24
+          /* fudge factor for handle area */
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          commerce.CarouselBuyCard,
+          {
+            skuPath: buy.currentSkuPath,
+            checkoutButton: /* @__PURE__ */ jsxRuntime.jsx(
+              checkout_button_default,
+              {
+                handleCheckout,
+                className: "w-full min-w-[160px] sm:max-w-[320px]"
+              }
+            ),
+            clx: "justify-between h-full pb-3 gap-8",
+            addBtnClx: "w-full min-w-[160px] sm:max-w-[320px]",
+            buttonsAreaClx: "grow-0 shrink-0 mt-0",
+            selectorClx: "max-w-[475px] justify-between grow"
+          }
+        ) }),
+        drawer.state === "micro" && /* @__PURE__ */ jsxRuntime.jsx(
+          micro_default,
+          {
+            handleCheckout,
+            handleItemClicked,
+            clx: "w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]"
+          }
+        )
+      ]
+    }
+  );
+});
+var drawer_default = CommerceUIComponent;
+
+module.exports = drawer_default;

package/dist/site/components/commerce/drawer/index.css

@@ -0,0 +1,132 @@
+/* src/site/style/drawer-handle-overrides.css */
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[vaul-drawer][vaul-drawer-direction=bottom] {
+  transform: translate3d(0, 100%, 0);
+}
+[vaul-drawer][vaul-drawer-direction=top] {
+  transform: translate3d(0, -100%, 0);
+}
+[vaul-drawer][vaul-drawer-direction=left] {
+  transform: translate3d(-100%, 0, 0);
+}
+[vaul-drawer][vaul-drawer-direction=right] {
+  transform: translate3d(100%, 0, 0);
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=top] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=bottom] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=left] {
+  overflow-x: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=right] {
+  overflow-x: hidden !important;
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=top] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=bottom] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=left] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=right] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[vaul-overlay][vaul-drawer-visible=true] {
+  opacity: 1;
+}
+[vaul-drawer]::after {
+  content: "";
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+[vaul-drawer][vaul-drawer-direction=top]::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=bottom]::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=left]::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=right]::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[vaul-handle] {
+  touch-action: pan-y;
+  cursor: grab;
+}
+[vaul-handle]:active {
+  opacity: 1;
+}
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+[vaul-handle]:focus-visible {
+  outline: none;
+}
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  touch-action: inherit;
+}
+[vaul-overlay][vaul-snap-points=true]:not([vaul-snap-points-overlay=true]):not([data-state=closed]) {
+  opacity: 0;
+}
+[vaul-overlay][vaul-snap-points-overlay=true]:not([vaul-drawer-visible=false]) {
+  opacity: 1;
+}
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+
+/* src/site/components/icons/social-svg.css */
+.social-icon svg {
+  transform: scale(1.25);
+}

package/dist/site/components/commerce/drawer/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const CommerceUIComponent: React.FC;
+export default CommerceUIComponent;
+//# sourceMappingURL=index.d.ts.map

package/dist/site/components/commerce/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/site/components/commerce/drawer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAqE/B,CAAA;eAEa,mBAAmB"}