@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/header/mobile-bag-drawer.cjs

@@ -0,0 +1,114 @@
+'use strict';
+
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var commerce = require('@hanzo/commerce');
+var react = require('react');
+var mobx = require('mobx');
+var mobxReactLite = require('mobx-react-lite');
+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;
+var MobileBagDrawer = ({
+  open,
+  setOpen,
+  handleCheckout,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(primitives.Drawer, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(primitives.DrawerContent, { className: ui.cn("rounded-t-xl mt-6 pb-12 h-auto", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    commerce.CartPanel,
+    {
+      handleCheckout,
+      className: "mt-4 mb-4 border-none py-0 px-4 w-full ",
+      listClx: "rounded-sm pr-3",
+      scrollAfter: 5,
+      itemClx: "mt-2",
+      totalClx: "sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background",
+      buttonClx: "max-w-[220px] flex-none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center flex-none justify-center ", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            bag_button_default,
+            {
+              animateOnHover: false,
+              showIfEmpty: true,
+              className: "mr-2 relative w-6 h-7",
+              iconClx: "fill-foreground "
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-heading text-foreground text-default", children: "Your Bag" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none" })
+      ]
+    }
+  ) }) });
+};
+var mobile_bag_drawer_default = MobileBagDrawer;
+
+module.exports = mobile_bag_drawer_default;

package/dist/site/components/header/mobile-bag-drawer.css

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

package/dist/site/components/header/mobile-bag-drawer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const MobileBagDrawer: React.FC<{
+    open: boolean;
+    setOpen: (b: boolean) => void;
+    handleCheckout: () => void;
+    className?: string;
+}>;
+export default MobileBagDrawer;
+//# sourceMappingURL=mobile-bag-drawer.d.ts.map

package/dist/site/components/header/mobile-bag-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-bag-drawer.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/mobile-bag-drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAkCA,CAAA;eAEc,eAAe"}

package/dist/site/components/header/mobile-bag-drawer.js

@@ -0,0 +1,112 @@
+import { buttonVariants, Drawer, DrawerContent } from '@hanzo/ui/primitives';
+import { Box, cn } from '@hanzo/ui';
+import { useCommerce, CartPanel } from '@hanzo/commerce';
+import { useRef, useEffect } from 'react';
+import { observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+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;
+var MobileBagDrawer = ({
+  open,
+  setOpen,
+  handleCheckout,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DrawerContent, { className: cn("rounded-t-xl mt-6 pb-12 h-auto", className), children: /* @__PURE__ */ jsxs(
+    CartPanel,
+    {
+      handleCheckout,
+      className: "mt-4 mb-4 border-none py-0 px-4 w-full ",
+      listClx: "rounded-sm pr-3",
+      scrollAfter: 5,
+      itemClx: "mt-2",
+      totalClx: "sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background",
+      buttonClx: "max-w-[220px] flex-none",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center flex-none justify-center ", children: [
+          /* @__PURE__ */ jsx(
+            bag_button_default,
+            {
+              animateOnHover: false,
+              showIfEmpty: true,
+              className: "mr-2 relative w-6 h-7",
+              iconClx: "fill-foreground "
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "font-heading text-foreground text-default", children: "Your Bag" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none" })
+      ]
+    }
+  ) }) });
+};
+var mobile_bag_drawer_default = MobileBagDrawer;
+
+export { mobile_bag_drawer_default as default };

package/dist/site/components/header/mobile-menu-toggle-button.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var lucideReact = require('lucide-react');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var MobileMenuToggleButton = ({
+  open,
+  setOpen,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    primitives.Button,
+    {
+      variant: "ghost",
+      size: "default",
+      className: ui.cn("rounded-full", ui.cn("p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75", className)),
+      onClick: () => {
+        setOpen(!open);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { width: 28, height: 28, style: ui.css(
+        "block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] " + (open ? "rotate-[135deg] scale-110" : "rotate-none")
+      ) })
+    }
+  );
+};
+var mobile_menu_toggle_button_default = MobileMenuToggleButton;
+
+module.exports = mobile_menu_toggle_button_default;

package/dist/site/components/header/mobile-menu-toggle-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const MobileMenuToggleButton: React.FC<{
+    open: boolean;
+    setOpen: (b: boolean) => void;
+    className?: string;
+}>;
+export default MobileMenuToggleButton;
+//# sourceMappingURL=mobile-menu-toggle-button.d.ts.map

package/dist/site/components/header/mobile-menu-toggle-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-menu-toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/mobile-menu-toggle-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAoBA,CAAA;eAEc,sBAAsB"}

package/dist/site/components/header/mobile-menu-toggle-button.js

@@ -0,0 +1,28 @@
+import { Plus } from 'lucide-react';
+import { Button } from '@hanzo/ui/primitives';
+import { cn, css } from '@hanzo/ui';
+import { jsx } from 'react/jsx-runtime';
+
+var MobileMenuToggleButton = ({
+  open,
+  setOpen,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "default",
+      className: cn("rounded-full", cn("p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75", className)),
+      onClick: () => {
+        setOpen(!open);
+      },
+      children: /* @__PURE__ */ jsx(Plus, { width: 28, height: 28, style: css(
+        "block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] " + (open ? "rotate-[135deg] scale-110" : "rotate-none")
+      ) })
+    }
+  );
+};
+var mobile_menu_toggle_button_default = MobileMenuToggleButton;
+
+export { mobile_menu_toggle_button_default as default };

package/dist/site/components/header/mobile-nav-menu-ai.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+var react = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+var primitives = require('@hanzo/ui/primitives');
+var Link = require('next/link');
+var logo = require('@luxfi/logo');
+var jsxRuntime = require('react/jsx-runtime');
+require('embla-carousel-autoplay');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Link__default = /*#__PURE__*/_interopDefault(Link);
+
+var SIZE = {
+  xl: { mark: 40, word: 22, gap: "gap-4" },
+  lg: { mark: 40, word: 22, gap: "gap-4" },
+  md: { mark: 32, word: 18, gap: "gap-3" },
+  sm: { mark: 24, word: 13, gap: "gap-2" },
+  xs: { mark: 16, word: 9, gap: "gap-1.5" }
+};
+var Logo = ({
+  size = "md",
+  href,
+  // no default please!
+  outerClx = "",
+  variant = "full",
+  onClick
+}) => {
+  const s = SIZE[size] ?? SIZE.md;
+  const clx = "flex flex-row items-center " + s.gap + " " + (href ? "hover:opacity-80 cursor-pointer " : "cursor-default ") + outerClx;
+  const art = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    variant !== "wordmark" && /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, { variant: "white", size: s.mark }),
+    variant !== "mark" && /* @__PURE__ */ jsxRuntime.jsx(logo.Wordmark, { height: s.word })
+  ] });
+  return href ? /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, style: ui.css(clx), onClick, children: art }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: clx, onClick, children: art });
+};
+var MobileNavMenuAI = ({ setMenuOpen }) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "w-full  text-2xl cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Logo, { variant: "wordmark", size: "md", outerClx: "p-6 h-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: ui.cn("grid", "block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 " + (!open ? "rotate-none" : "rotate-[135deg] scale-110")), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { width: 28, height: 28, style: ui.css("w-full h-full"), onClick: () => setMenuOpen(false) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2", onClick: () => setIsOpen(true), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base pl-2 font-light", children: "Ask AI a question" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {})
+      ] }) })
+    ] }),
+    /* @__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 " + (isOpen ? "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-16 bg-level-0 items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "font-semibold font-heading", children: [
+          "LUX",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "AI" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(primitives.Button, { onClick: () => setIsOpen(false), variant: "link", size: "icon", className: "w-fit sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-6 h-6 flex-none mr-1 rotate-45 transition-transform" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: "https://lux.chat/iframe", className: "h-full" })
+    ] }) })
+  ] });
+};
+var mobile_nav_menu_ai_default = MobileNavMenuAI;
+
+module.exports = mobile_nav_menu_ai_default;

package/dist/site/components/header/mobile-nav-menu-ai.css

@@ -0,0 +1,132 @@
+/* src/site/components/icons/social-svg.css */
+.social-icon svg {
+  transform: scale(1.25);
+}
+
+/* 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;
+  }
+}

package/dist/site/components/header/mobile-nav-menu-ai.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MobileNavMenuAIProps {
+    setMenuOpen: (open: boolean) => void;
+}
+declare const MobileNavMenuAI: React.FC<MobileNavMenuAIProps>;
+export default MobileNavMenuAI;
+//# sourceMappingURL=mobile-nav-menu-ai.d.ts.map

package/dist/site/components/header/mobile-nav-menu-ai.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav-menu-ai.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/mobile-nav-menu-ai.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,UAAU,oBAAoB;IAC1B,WAAW,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsCnD,CAAC;eAEa,eAAe"}

package/dist/site/components/header/mobile-nav-menu-ai.js

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { Box, cn, css } from '@hanzo/ui';
+import { Plus, ArrowRight } from 'lucide-react';
+import { Card, Button } from '@hanzo/ui/primitives';
+import Link from 'next/link';
+import { Logo as Logo$1, Wordmark } from '@luxfi/logo';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'embla-carousel-autoplay';
+
+var SIZE = {
+  xl: { mark: 40, word: 22, gap: "gap-4" },
+  lg: { mark: 40, word: 22, gap: "gap-4" },
+  md: { mark: 32, word: 18, gap: "gap-3" },
+  sm: { mark: 24, word: 13, gap: "gap-2" },
+  xs: { mark: 16, word: 9, gap: "gap-1.5" }
+};
+var Logo = ({
+  size = "md",
+  href,
+  // no default please!
+  outerClx = "",
+  variant = "full",
+  onClick
+}) => {
+  const s = SIZE[size] ?? SIZE.md;
+  const clx = "flex flex-row items-center " + s.gap + " " + (href ? "hover:opacity-80 cursor-pointer " : "cursor-default ") + outerClx;
+  const art = /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant !== "wordmark" && /* @__PURE__ */ jsx(Logo$1, { variant: "white", size: s.mark }),
+    variant !== "mark" && /* @__PURE__ */ jsx(Wordmark, { height: s.word })
+  ] });
+  return href ? /* @__PURE__ */ jsx(Link, { href, style: css(clx), onClick, children: art }) : /* @__PURE__ */ jsx(Box, { tag: "span", className: clx, onClick, children: art });
+};
+var MobileNavMenuAI = ({ setMenuOpen }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { className: "w-full  text-2xl cursor-pointer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx(Logo, { variant: "wordmark", size: "md", outerClx: "p-6 h-full" }),
+        /* @__PURE__ */ jsx(Box, { tag: "span", className: cn("grid", "block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 " + (!open ? "rotate-none" : "rotate-[135deg] scale-110")), children: /* @__PURE__ */ jsx(Plus, { width: 28, height: 28, style: css("w-full h-full"), onClick: () => setMenuOpen(false) }) })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6", children: /* @__PURE__ */ jsxs(Box, { className: "text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2", onClick: () => setIsOpen(true), children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base pl-2 font-light", children: "Ask AI a question" }),
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ] }) })
+    ] }),
+    /* @__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 " + (isOpen ? "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-16 bg-level-0 items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "font-semibold font-heading", children: [
+          "LUX",
+          /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "AI" })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => setIsOpen(false), variant: "link", size: "icon", className: "w-fit sm:hidden", children: /* @__PURE__ */ jsx(Plus, { className: "w-6 h-6 flex-none mr-1 rotate-45 transition-transform" }) })
+      ] }),
+      /* @__PURE__ */ jsx("iframe", { src: "https://lux.chat/iframe", className: "h-full" })
+    ] }) })
+  ] });
+};
+var mobile_nav_menu_ai_default = MobileNavMenuAI;
+
+export { mobile_nav_menu_ai_default as default };