@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/commerce/drawer/micro.js

@@ -0,0 +1,228 @@
+import { observer, enableStaticRendering } from 'mobx-react-lite';
+import { Button } from '@hanzo/ui/primitives';
+import { Box, cn, MediaStack } from '@hanzo/ui';
+import { useCommerce, formatCurrencyValue } from '@hanzo/commerce';
+import { useRef, useEffect, createContext, useContext } from 'react';
+import { observable, reaction, runInAction } from 'mobx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'next/navigation';
+import 'usehooks-ts';
+
+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;
+enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = createContext(void 0);
+var useCommerceDrawer = () => {
+  return useContext(CommerceUIContext);
+};
+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 = 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 = formatCurrencyValue(item.price);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { className: cn("sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ", clx), children: [
+      /* @__PURE__ */ jsx("p", { className: "text-left text-xs", children: topLine }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xxs", children: [
+        /* @__PURE__ */ jsx("div", { children: optionLabel }),
+        /* @__PURE__ */ jsx("div", { className: "pl-2.5", children: priceStr })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: cn("hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs", clx), children: [
+      /* @__PURE__ */ jsx("p", { className: "text-left", children: topLine }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("div", { children: optionLabel }),
+        /* @__PURE__ */ 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 = observer(({
+  clx = "",
+  handleCheckout,
+  handleItemClicked
+}) => {
+  const drawer = useCommerceDrawer();
+  const cmmc = useCommerce();
+  return /* @__PURE__ */ jsxs(Box, { className: 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__ */ jsxs(Box, { className: "flex flex-col items-stretch " + (drawer.isMobile ? "justify-start" : "group"), children: [
+      /* @__PURE__ */ jsxs(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__ */ jsx("span", { className: "invisible", children: "scrictly for layout" }),
+        drawer.isMobile ? /* @__PURE__ */ jsx(Box, { tag: "span", className: PROMPT_COMMON_CLX, children: "tap for options:" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Box, { tag: "span", className: PROMPT_COMMON_CLX + " group-hover:opacity-0", children: "recent item:" }),
+          /* @__PURE__ */ jsx(Box, { tag: "span", className: PROMPT_COMMON_CLX + " opacity-0 group-hover:opacity-100", children: "view options:" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          className: cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, 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__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.mobile, className: "sm:hidden grow-0 shrink-0" }),
+              /* @__PURE__ */ jsx(MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.sm, className: "hidden sm:block md:hidden grow-0 shrink-0" }),
+              /* @__PURE__ */ jsx(MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.desktop, className: "hidden md:block grow-0 shrink-0" })
+            ] }),
+            cmmc.recentItem && /* @__PURE__ */ jsx("div", { className: "grow w-full", children: /* @__PURE__ */ jsx(Info, { item: cmmc.recentItem.item, clx: "w-full" }) })
+          ]
+        }
+      )
+    ] }),
+    drawer.showCheckout && /* @__PURE__ */ jsxs(Box, { className: cn(
+      "flex flex-col w-full",
+      drawer.showRecent ? "items-stretch" : "items-center",
+      drawer.isMobile ? "justify-start" : "justify-center"
+    ), children: [
+      drawer.showRecent && /* @__PURE__ */ jsx("p", { className: "invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start", children: "for layout" }),
+      /* @__PURE__ */ jsx(
+        checkout_button_default,
+        {
+          handleCheckout,
+          variant: "primary",
+          size: drawer.isMobile ? "sm" : "lg",
+          className: cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, 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;
+
+export { micro_default as default };

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var mobxReactLite = require('mobx-react-lite');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var react = require('react');
+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 useCommerceDrawer = () => {
+  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;
+
+module.exports = shell_default;

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

@@ -0,0 +1,127 @@
+/* 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/commerce/drawer/shell.d.ts

@@ -0,0 +1,9 @@
+import React, { type PropsWithChildren } from 'react';
+import { type DrawerProps } from '@hanzo/ui/primitives';
+import '../../../style/drawer-handle-overrides.css';
+declare const CommerceDrawer: React.FC<PropsWithChildren & Omit<DrawerProps, 'onOpenChange' | 'open' | 'snapPoints' | 'modal' | 'setActiveSnapPoint' | 'activeSnapPoint'> & {
+    handleHandleClicked: () => void;
+    drawerClx?: string;
+}>;
+export default CommerceDrawer;
+//# sourceMappingURL=shell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../../../src/site/components/commerce/drawer/shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGpD,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,4CAA4C,CAAA;AAGnD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAC9C,IAAI,CAAC,WAAW,EACd,cAAc,GACd,MAAM,GACN,YAAY,GACZ,OAAO,GACP,oBAAoB,GACpB,iBAAiB,CAClB,GACD;IACE,mBAAmB,EAAE,MAAM,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAsDD,CAAA;eAEa,cAAc"}

package/dist/site/components/commerce/drawer/shell.js

@@ -0,0 +1,76 @@
+import { enableStaticRendering, observer } from 'mobx-react-lite';
+import { Drawer, DrawerContent, DrawerHandle } from '@hanzo/ui/primitives';
+import { cn, Box } from '@hanzo/ui';
+import { createContext, useContext } from 'react';
+import 'next/navigation';
+import 'usehooks-ts';
+import '@hanzo/commerce';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = createContext(void 0);
+var useCommerceDrawer = () => {
+  return useContext(CommerceUIContext);
+};
+var CommerceDrawer = observer(({
+  children,
+  handleHandleClicked,
+  drawerClx = "",
+  ...rest
+}) => {
+  const drawer = useCommerceDrawer();
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs(
+        DrawerContent,
+        {
+          defaultHandle: false,
+          className: cn(
+            "border-0",
+            drawer.isMobile ? "pt-5" : "pt-6",
+            "w-full h-full"
+          ),
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              DrawerHandle,
+              {
+                className: 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__ */ jsx(Box, { className: 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;
+
+export { shell_default as default };

package/dist/site/components/contact-dialog/contact-form.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var react = require('react');
+var reactHookForm = require('react-hook-form');
+var zod = require('zod');
+var zod$1 = require('@hookform/resolvers/zod');
+var validator = require('validator');
+var lucideReact = require('lucide-react');
+var primitives = require('@hanzo/ui/primitives');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var validator__default = /*#__PURE__*/_interopDefault(validator);
+
+var ContactFormSchema = zod.z.object({
+  email: zod.z.string().min(1, { message: "Email must be provided." }).email("Invalid email."),
+  phone: zod.z.string().min(1, { message: "Telephone must be provided." }).refine(validator__default.default.isMobilePhone, { message: "Invalid format." })
+});
+var ContactForm = ({
+  onSubmit: _onSubmit,
+  enclosure
+}) => {
+  const form = reactHookForm.useForm({
+    resolver: zod$1.zodResolver(ContactFormSchema),
+    defaultValues: {
+      email: "",
+      phone: ""
+    }
+  });
+  const [isPending, startTransition] = react.useTransition();
+  const onSubmit = (data) => {
+    startTransition(async () => {
+      await _onSubmit(data, enclosure);
+    });
+  };
+  const MyFormItem = ({
+    field,
+    placeholder
+  }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.FormItem, { className: "space-y-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(primitives.Input, { placeholder, ...field, className: "mt-0 text-foreground" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "flex flex-row justify-start items-stretch gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.FormMessage, {}) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "form", onSubmit: form.handleSubmit(onSubmit), className: "w-3/4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-start items-stretch mt-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.FormField,
+      {
+        control: form.control,
+        name: "email",
+        render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(MyFormItem, { field, placeholder: "email" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.FormField,
+      {
+        control: form.control,
+        name: "phone",
+        render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(MyFormItem, { field, placeholder: "phone" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.Button, { disabled: isPending, type: "submit", className: "bg-primary text-primary-fg hover:bg-primary-hover", children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { style: ui.css("mr-2 h-4 w-4 animate-spin") }),
+      "Please wait"
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Submit" }) })
+  ] }) }) });
+};
+var contact_form_default = ContactForm;
+
+module.exports = contact_form_default;

package/dist/site/components/contact-dialog/contact-form.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { z } from 'zod';
+declare const ContactFormSchema: z.ZodObject<{
+    email: z.ZodString;
+    phone: any;
+}, z.core.$strip>;
+type ContactFormSchemaType = z.infer<typeof ContactFormSchema>;
+declare const ContactForm: React.FC<{
+    onSubmit: (data: ContactFormSchemaType, enc: any) => void;
+    enclosure: any;
+}>;
+export default ContactForm;
+//# sourceMappingURL=contact-form.d.ts.map

package/dist/site/components/contact-dialog/contact-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-form.d.ts","sourceRoot":"","sources":["../../../../src/site/components/contact-dialog/contact-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAG5C,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAiBvB,QAAA,MAAM,iBAAiB;;;iBASrB,CAAA;AAEF,KAAK,qBAAqB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE9D,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACzD,SAAS,EAAE,GAAG,CAAA;CACf,CAoEA,CAAA;eAEc,WAAW"}

package/dist/site/components/contact-dialog/contact-form.js

@@ -0,0 +1,64 @@
+import { useTransition } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import validator from 'validator';
+import { Loader2 } from 'lucide-react';
+import { Button, Input } from '@hanzo/ui/primitives';
+import { Form, Box, FormField, css, FormItem, FormControl, FormMessage } from '@hanzo/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ContactFormSchema = z.object({
+  email: z.string().min(1, { message: "Email must be provided." }).email("Invalid email."),
+  phone: z.string().min(1, { message: "Telephone must be provided." }).refine(validator.isMobilePhone, { message: "Invalid format." })
+});
+var ContactForm = ({
+  onSubmit: _onSubmit,
+  enclosure
+}) => {
+  const form = useForm({
+    resolver: zodResolver(ContactFormSchema),
+    defaultValues: {
+      email: "",
+      phone: ""
+    }
+  });
+  const [isPending, startTransition] = useTransition();
+  const onSubmit = (data) => {
+    startTransition(async () => {
+      await _onSubmit(data, enclosure);
+    });
+  };
+  const MyFormItem = ({
+    field,
+    placeholder
+  }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-0", children: [
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder, ...field, className: "mt-0 text-foreground" }) }),
+    /* @__PURE__ */ jsx(Box, { className: "flex flex-row justify-start items-stretch gap-2", children: /* @__PURE__ */ jsx(FormMessage, {}) })
+  ] });
+  return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(Box, { tag: "form", onSubmit: form.handleSubmit(onSubmit), className: "w-3/4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-start items-stretch mt-4", children: [
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: "email",
+        render: ({ field }) => /* @__PURE__ */ jsx(MyFormItem, { field, placeholder: "email" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: "phone",
+        render: ({ field }) => /* @__PURE__ */ jsx(MyFormItem, { field, placeholder: "phone" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { disabled: isPending, type: "submit", className: "bg-primary text-primary-fg hover:bg-primary-hover", children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Loader2, { style: css("mr-2 h-4 w-4 animate-spin") }),
+      "Please wait"
+    ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Submit" }) })
+  ] }) }) });
+};
+var contact_form_default = ContactForm;
+
+export { contact_form_default as default };