@luxfi/ui 8.1.0 → 8.2.0

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

@@ -0,0 +1,116 @@
+'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 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;
+
+module.exports = checkout_button_default;

package/dist/site/components/commerce/checkout-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/checkout-button.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type ButtonProps } from '@hanzo/ui/primitives';
+declare const CheckoutButton: React.FC<ButtonProps & {
+    handleCheckout: () => void;
+    showQuantity?: boolean;
+    showArrow?: boolean;
+    animateOnQuantityChange?: boolean;
+    centerText?: boolean;
+    /** A corner off the radius scale. It was a Button variant in the 5.x line. */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}>;
+export default CheckoutButton;
+//# sourceMappingURL=checkout-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-button.d.ts","sourceRoot":"","sources":["../../../../src/site/components/commerce/checkout-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAwE/D,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;CAC9D,CA2CA,CAAA;eAEc,cAAc"}

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

@@ -0,0 +1,114 @@
+import { useRef, useEffect } from 'react';
+import { observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Button } from '@hanzo/ui/primitives';
+import { Box, cn } from '@hanzo/ui';
+import { useCommerce } from '@hanzo/commerce';
+import { jsxs, jsx } 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 IconAndQuantity = observer(({
+  animateOnQuantityChange = false,
+  showArrow = true,
+  showQuantity = true,
+  clx = "",
+  iconClx = "",
+  digitClx = ""
+}) => {
+  const cmmc = useCommerce();
+  const wiggleRef = useRef(observable.box("none"));
+  useEffect(() => (
+    // return IReactionDisposer
+    animateOnQuantityChange ? reaction(
+      () => cmmc.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
+  ), []);
+  return /* @__PURE__ */ jsxs(Box, { className: cn("flex items-center justify-center", clx), children: [
+    showQuantity && /* @__PURE__ */ jsxs(Box, { className: 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__ */ jsx(Box, { className: cn(
+        "z-above-content flex flex-col justify-center items-center",
+        "absolute left-0 right-0 top-0 bottom-0",
+        digitClx
+      ), children: /* @__PURE__ */ jsx("div", { style: {
+        /* color: 'white'  tailwind bug? ,*/
+        fontSize: "11px",
+        position: "relative",
+        top: "1px"
+      }, children: cmmc.cartQuantity }) }),
+      /* @__PURE__ */ jsx(bag_icon_default, { width: "19", height: "24", className: cn("relative -top-[3px] opacity-70", iconClx), "aria-hidden": "true" })
+    ] }),
+    showArrow && /* @__PURE__ */ 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__ */ jsxs(
+    Button,
+    {
+      ...rest,
+      onClick: handleCheckout,
+      variant,
+      className: cn(`rounded-${rounded}`, 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__ */ jsx(
+          IconAndQuantity,
+          {
+            showArrow,
+            showQuantity,
+            clx: "invisible group-hover:scale-105 transition-scale transition-duration-300"
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: "Checkout" }),
+        /* @__PURE__ */ 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;
+
+export { checkout_button_default as default };

package/dist/site/components/commerce/checkout-panel/cart-accordian.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var mobxReactLite = require('mobx-react-lite');
+var lucideReact = require('lucide-react');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var commerce = require('@hanzo/commerce');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CartAccordian = mobxReactLite.observer(({
+  icon,
+  clx = "",
+  panelClx = "",
+  triggerClx = "",
+  scrollAfter,
+  scrollHeightClx
+}) => {
+  const cmmc = commerce.useCommerce();
+  return /* @__PURE__ */ jsxRuntime.jsx(primitives.Accordion, { type: "single", collapsible: true, className: clx, children: /* @__PURE__ */ jsxRuntime.jsxs(primitives.AccordionItem, { value: "cart", className: "w-full border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(primitives.AccordionTrigger, { className: "!no-underline group flex justify-between ", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-0 items-center", children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-sm sm:text-xl grow", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "group-data-[state=open]:hidden", children: "Order Total:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "group-data-[state=closed]:hidden", children: "Your Order" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "text-sm sm:text-xl grow truncate", children: commerce.formatCurrencyValue(cmmc.promoAppliedCartTotal) }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { style: ui.css("h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.AccordionContent, { className: "data-[state=open]:mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      commerce.CartPanel,
+      {
+        className: ui.cn("w-full", panelClx),
+        scrollAfter,
+        scrollHeightClx,
+        listClx: "mt-0",
+        itemClx: "mt-0.5 mb-0",
+        totalClx: "sticky px-1 pr-2 border-t -bottom-[1px] bg-background",
+        showShipping: true,
+        showPromoCode: true
+      }
+    ) })
+  ] }) });
+});
+var cart_accordian_default = CartAccordian;
+
+module.exports = cart_accordian_default;

package/dist/site/components/commerce/checkout-panel/cart-accordian.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const CartAccordian: React.FC<{
+    icon?: React.ReactNode;
+    clx?: string;
+    triggerClx?: string;
+    panelClx?: string;
+    scrollAfter: number;
+    scrollHeightClx: string;
+}>;
+export default CartAccordian;
+//# sourceMappingURL=cart-accordian.d.ts.map

package/dist/site/components/commerce/checkout-panel/cart-accordian.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-accordian.d.ts","sourceRoot":"","sources":["../../../../../src/site/components/commerce/checkout-panel/cart-accordian.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAO,OAAO,CAAA;AAc1B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;CACxB,CAwCC,CAAA;eAEa,aAAa"}

package/dist/site/components/commerce/checkout-panel/cart-accordian.js

@@ -0,0 +1,48 @@
+import { observer } from 'mobx-react-lite';
+import { ChevronRight } from 'lucide-react';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives';
+import { css, cn } from '@hanzo/ui';
+import { useCommerce, formatCurrencyValue, CartPanel } from '@hanzo/commerce';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CartAccordian = observer(({
+  icon,
+  clx = "",
+  panelClx = "",
+  triggerClx = "",
+  scrollAfter,
+  scrollHeightClx
+}) => {
+  const cmmc = useCommerce();
+  return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: clx, children: /* @__PURE__ */ jsxs(AccordionItem, { value: "cart", className: "w-full border-b-0", children: [
+    /* @__PURE__ */ jsxs(AccordionTrigger, { className: "!no-underline group flex justify-between ", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-0 items-center", children: [
+        icon,
+        /* @__PURE__ */ jsxs("h5", { className: "text-sm sm:text-xl grow", children: [
+          /* @__PURE__ */ jsx("span", { className: "group-data-[state=open]:hidden", children: "Order Total:" }),
+          /* @__PURE__ */ jsx("span", { className: "group-data-[state=closed]:hidden", children: "Your Order" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 items-center", children: [
+        /* @__PURE__ */ jsx("h5", { className: "text-sm sm:text-xl grow truncate", children: formatCurrencyValue(cmmc.promoAppliedCartTotal) }),
+        /* @__PURE__ */ jsx(ChevronRight, { style: css("h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(AccordionContent, { className: "data-[state=open]:mb-4", children: /* @__PURE__ */ jsx(
+      CartPanel,
+      {
+        className: cn("w-full", panelClx),
+        scrollAfter,
+        scrollHeightClx,
+        listClx: "mt-0",
+        itemClx: "mt-0.5 mb-0",
+        totalClx: "sticky px-1 pr-2 border-t -bottom-[1px] bg-background",
+        showShipping: true,
+        showPromoCode: true
+      }
+    ) })
+  ] }) });
+});
+var cart_accordian_default = CartAccordian;
+
+export { cart_accordian_default as default };

package/dist/site/components/commerce/checkout-panel/checkout-panel-props.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/site/components/commerce/checkout-panel/checkout-panel-props.d.ts

@@ -0,0 +1,8 @@
+interface CheckoutPanelProps {
+    step: number;
+    stepNames: string[];
+    onLeave: () => void;
+    clx?: string;
+}
+export { type CheckoutPanelProps as default };
+//# sourceMappingURL=checkout-panel-props.d.ts.map

package/dist/site/components/commerce/checkout-panel/checkout-panel-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-panel-props.d.ts","sourceRoot":"","sources":["../../../../../src/site/components/commerce/checkout-panel/checkout-panel-props.ts"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,OAAO,EAAC,MAAM,IAAI,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,OAAO,EACL,KAAK,kBAAkB,IAAI,OAAO,EACnC,CAAA"}

package/dist/site/components/commerce/checkout-panel/checkout-panel-props.js

@@ -0,0 +1 @@
+

package/dist/site/components/commerce/checkout-panel/desktop-bag-carousel.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var mobxReactLite = require('mobx-react-lite');
+var commerce = require('@hanzo/commerce');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DesktopBagCarousel = mobxReactLite.observer(({
+  constrainTo,
+  className = ""
+}) => {
+  const cmmc = commerce.useCommerce();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    commerce.CarouselItemSelector,
+    {
+      items: cmmc.cartItems,
+      selectedItemRef: cmmc,
+      scrollable: false,
+      selectSku: cmmc.setCurrentItem.bind(cmmc),
+      clx: className,
+      ext: {
+        options: { loop: true },
+        constrainTo,
+        imageOnly: true
+      }
+    }
+  );
+});
+var desktop_bag_carousel_default = DesktopBagCarousel;
+
+module.exports = desktop_bag_carousel_default;

package/dist/site/components/commerce/checkout-panel/desktop-bag-carousel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const DesktopBagCarousel: React.FC<{
+    constrainTo: {
+        w: number;
+        h: number;
+    };
+    className?: string;
+}>;
+export default DesktopBagCarousel;
+//# sourceMappingURL=desktop-bag-carousel.d.ts.map

package/dist/site/components/commerce/checkout-panel/desktop-bag-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-bag-carousel.d.ts","sourceRoot":"","sources":["../../../../../src/site/components/commerce/checkout-panel/desktop-bag-carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,WAAW,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAoBC,CAAA;eAEa,kBAAkB"}

package/dist/site/components/commerce/checkout-panel/desktop-bag-carousel.js

@@ -0,0 +1,28 @@
+import { observer } from 'mobx-react-lite';
+import { useCommerce, CarouselItemSelector } from '@hanzo/commerce';
+import { jsx } from 'react/jsx-runtime';
+
+var DesktopBagCarousel = observer(({
+  constrainTo,
+  className = ""
+}) => {
+  const cmmc = useCommerce();
+  return /* @__PURE__ */ jsx(
+    CarouselItemSelector,
+    {
+      items: cmmc.cartItems,
+      selectedItemRef: cmmc,
+      scrollable: false,
+      selectSku: cmmc.setCurrentItem.bind(cmmc),
+      clx: className,
+      ext: {
+        options: { loop: true },
+        constrainTo,
+        imageOnly: true
+      }
+    }
+  );
+});
+var desktop_bag_carousel_default = DesktopBagCarousel;
+
+export { desktop_bag_carousel_default as default };