@sikka/hawa/dist/dialog/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/dialog/Dialog.tsx
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/dialog/Dialog.tsx
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
var DialogPortal = ({ ...props }) => /* @__PURE__ */ React.createElement(DialogPrimitive.Portal, { ...props });
var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DialogPrimitive.Overlay,
  {
    ref,
    className: cn(
      "hawa-fixed hawa-inset-0 hawa-z-50 hawa-bg-background/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0",
      className
    ),
    ...props
  }
));
var DialogContent = React.forwardRef(
  ({
    ids,
    className,
    classNames,
    children,
    persist,
    hideCloseButton,
    overlayProps,
    ...props
  }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, { container: props.container }, /* @__PURE__ */ React.createElement(
    DialogOverlay,
    {
      className: classNames == null ? void 0 : classNames.overlay,
      id: ids == null ? void 0 : ids.overlay,
      ...overlayProps
    }
  ), /* @__PURE__ */ React.createElement(
    DialogPrimitive.Content,
    {
      onPointerDownOutside: (e) => {
        if (persist) {
          e.preventDefault();
        }
      },
      ref,
      className: cn(
        "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-[90%] hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
        className
      ),
      ...props
    },
    children,
    !hideCloseButton && /* @__PURE__ */ React.createElement(
      DialogPrimitive.Close,
      {
        className: cn(
          "hawa-absolute hawa-top-4 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
          props.dir === "rtl" ? "hawa-left-4" : "hawa-right-4",
          classNames == null ? void 0 : classNames.closeButton
        ),
        id: ids == null ? void 0 : ids.closeButton
      },
      /* @__PURE__ */ React.createElement(
        "svg",
        {
          id: ids == null ? void 0 : ids.closeIcon,
          "aria-label": "Close Icon",
          "aria-hidden": "true",
          className: "hawa-h-5 hawa-w-5",
          fill: "currentColor",
          viewBox: "0 0 20 20"
        },
        /* @__PURE__ */ React.createElement(
          "path",
          {
            fillRule: "evenodd",
            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
            clipRule: "evenodd"
          }
        )
      ),
      /* @__PURE__ */ React.createElement("span", { className: "hawa-sr-only" }, "Close")
    )
  ))
);
var DialogCarouselContent = React.forwardRef(
  ({
    className,
    children,
    onPrev,
    persist,
    hideCloseButton,
    hidePrevButton,
    ...props
  }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, null, /* @__PURE__ */ React.createElement(DialogOverlay, null), /* @__PURE__ */ React.createElement(
    DialogPrimitive.Content,
    {
      onPointerDownOutside: (e) => {
        if (persist) {
          e.preventDefault();
        }
      },
      ref,
      className: cn(
        "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-pt-14 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] sm:hawa-rounded md:hawa-w-full",
        className
      ),
      ...props
    },
    children,
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cn(
          "hawa-absolute hawa-top-0 hawa-flex hawa-w-full hawa-flex-row hawa-p-4",
          onPrev ? "hawa-justify-between" : "hawa-justify-end"
        )
      },
      hidePrevButton ? /* @__PURE__ */ React.createElement("div", null) : /* @__PURE__ */ React.createElement(
        "div",
        {
          onClick: onPrev,
          className: cn(
            "hawa-end-0 hawa-cursor-pointer hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
            props.dir === "rtl" && "hawa-rotate-180"
          )
        },
        /* @__PURE__ */ React.createElement(
          "svg",
          {
            xmlns: "http://www.w3.org/2000/svg",
            width: "24",
            height: "24",
            viewBox: "0 0 24 24",
            fill: "none",
            className: "hawa-h-6 hawa-w-6",
            stroke: "currentColor",
            strokeWidth: "2",
            strokeLinecap: "round",
            strokeLinejoin: "round"
          },
          /* @__PURE__ */ React.createElement("path", { d: "m15 18-6-6 6-6" })
        )
      ),
      !hideCloseButton && /* @__PURE__ */ React.createElement(
        DialogPrimitive.Close,
        {
          className: cn(
            "hawa-end-0 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
            props.dir === "rtl" ? "hawa-left-4" : "hawa-right-4"
          )
        },
        /* @__PURE__ */ React.createElement(
          "svg",
          {
            "aria-label": "Close Icon",
            "aria-hidden": "true",
            className: "hawa-h-6 hawa-w-6",
            fill: "currentColor",
            viewBox: "0 0 20 20"
          },
          /* @__PURE__ */ React.createElement(
            "path",
            {
              fillRule: "evenodd",
              d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
              clipRule: "evenodd"
            }
          )
        ),
        /* @__PURE__ */ React.createElement("span", { className: "hawa-sr-only" }, "Close")
      )
    )
  ))
);
var DialogHeader = ({
  className,
  ...props
}) => /* @__PURE__ */ React.createElement(
  "div",
  {
    className: cn(
      "hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-text-center sm:hawa-text-left",
      className
    ),
    ...props
  }
);
var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DialogPrimitive.Title,
  {
    ref,
    className: cn(
      "hawa-text-start hawa-text-lg hawa-font-semibold hawa-leading-none hawa-tracking-tight",
      className
    ),
    ...props
  }
));
var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DialogPrimitive.Description,
  {
    ref,
    className: cn(
      "hawa-text-start hawa-text-sm hawa-text-muted-foreground",
      className
    ),
    ...props
  }
));
var DialogFooter = ({
  className,
  ...props
}) => /* @__PURE__ */ React.createElement(
  "div",
  {
    className: cn(
      "hawa-flex hawa-flex-col xs:hawa-flex-row sm:hawa-justify-end hawa-gap-2",
      className
    ),
    ...props
  }
);
var DialogCarousel = ({
  stepsApi,
  stepsRef,
  children,
  direction
}) => {
  React.useEffect(() => {
    if (stepsApi) {
      stepsApi.reInit();
    }
  }, [stepsApi, children]);
  return /* @__PURE__ */ React.createElement("div", { className: "hawa-overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { ref: stepsRef, dir: direction }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "hawa-flex",
      style: {
        transition: "height 0.2s"
      }
    },
    React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cn(
          "hawa-flex hawa-h-fit hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center"
        ),
        key: index
      },
      child
    ))
  )));
};
var DialogSteps = ({
  currentStep,
  visibleStepRef,
  children
}) => {
  const [dialogHeight, setDialogHeight] = React.useState(null);
  React.useEffect(() => {
    if (visibleStepRef.current) {
      setDialogHeight(visibleStepRef.current.offsetHeight);
      console.log("height is ", visibleStepRef.current.offsetHeight);
    }
  }, [currentStep, visibleStepRef]);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "hawa-relative hawa-overflow-clip",
      style: {
        height: dialogHeight || "fit-content",
        transition: "height 0.2s"
      }
    },
    React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(
      "div",
      {
        ref: currentStep === `step-${index + 1}` ? visibleStepRef : null,
        className: cn(
          currentStep === `step-${index + 1}` ? "hawa-visible hawa-block" : "hawa-invisible hawa-hidden"
        )
      },
      child
    ))
  );
};
var DialogStep = ({
  id,
  children,
  className,
  stepRef
}) => {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      id,
      ref: stepRef,
      className: cn("hawa-w-full hawa-px-1", className)
    },
    children
  );
};
var DialogBody = ({ children, className }) => {
  return /* @__PURE__ */ React.createElement("div", { className: cn("hawa-py-6", className) }, children);
};
DialogBody.displayName = "DialogBody";
DialogStep.displayName = "DialogStep";
DialogSteps.displayName = "DialogSteps";
DialogCarousel.displayName = "DialogCarousel";
DialogCarouselContent.displayName = "DialogCarouselContent";
DialogHeader.displayName = "DialogHeader";
DialogFooter.displayName = "DialogFooter";
DialogTitle.displayName = DialogPrimitive.Title.displayName;
DialogPortal.displayName = DialogPrimitive.Portal.displayName;
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
DialogContent.displayName = DialogPrimitive.Content.displayName;
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
  Dialog,
  DialogBody,
  DialogCarousel,
  DialogCarouselContent,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPortal,
  DialogStep,
  DialogSteps,
  DialogTitle,
  DialogTrigger
};
//# sourceMappingURL=index.mjs.map