@kloudlite/design-system/cjs/molecule/popup.js

A design system for building ambitious products.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// components/molecule/popup.tsx
var popup_exports = {};
__export(popup_exports, {
  default: () => popup_default
});
module.exports = __toCommonJS(popup_exports);
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
var import_framer_motion2 = require("framer-motion");

// components/icons.tsx
var import_react = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");

// components/atoms/button.tsx
var import_framer_motion = require("framer-motion");
var import_react3 = __toESM(require("react"), 1);

// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react2 = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
  return (0, import_classnames.default)(...props);
};

// components/atoms/button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ButtonBase = import_react3.default.forwardRef((props, ref) => {
  const {
    onClick = () => {
    },
    to = "",
    linkComponent = import_framer_motion.motion.button,
    disabled = false,
    suffix,
    prefix,
    block = false,
    type = "button",
    variant = "primary",
    // noRing,
    noRounded = false,
    noBorder = false,
    sharpLeft = false,
    sharpRight = false,
    selected = false,
    iconOnly = false,
    className = "",
    content,
    size = "md",
    loading = false,
    tabIndex,
    toLabel = "to",
    target,
    iconSize,
    ...mprops
  } = props;
  let Component = linkComponent;
  let tempToLabel = toLabel;
  let extraProps = {};
  if (to) {
    if (linkComponent === import_framer_motion.motion.button) {
      Component = import_framer_motion.motion.a;
      tempToLabel = "href";
    } else {
      Component = linkComponent;
    }
  }
  if (Component === import_framer_motion.motion.button || Component === import_framer_motion.motion.a) {
    extraProps = {
      initial: { scale: 1 },
      whileTap: { scale: 0.99 }
    };
  }
  const noRing = false;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    Component,
    {
      ...mprops,
      ...{ [tempToLabel]: to },
      disabled,
      onClick,
      ...extraProps,
      ref,
      type,
      tabIndex,
      target,
      className: cn(
        "pulsable kl-flex-nowrap",
        {
          "kl-w-full": !!block,
          "kl-w-fit": !block,
          selected
        },
        {
          "kl-pointer-events-none": loading
        },
        {
          "kl-bodyMd-medium": !variant?.includes("plain"),
          "kl-bodyMd": variant?.includes("plain")
        },
        {
          "kl-pointer-events-none !kl-text-text-disabled kl-bg-surface-basic-disabled": disabled,
          "!kl-border-border-disabled": disabled && ![
            "plain",
            "primary-plain",
            "critical-plain",
            "secondary-plain"
          ].includes(variant)
        },
        "kl-relative kl-ring-offset-1",
        "kl-outline-none",
        "kl-flex kl-flex-row kl-gap-lg kl-items-center kl-justify-center",
        "disabled:kl-text-text-disabled disabled:kl-bg-surface-basic-disabled",
        {
          // noRing
          "focus-visible:kl-ring-2 focus:kl-ring-border-focus focus:kl-z-10": !noRing
        },
        {
          ...!noRounded && {
            "kl-rounded-none": sharpLeft && sharpRight,
            "kl-rounded-r": sharpLeft && !sharpRight,
            "kl-rounded-l": !sharpLeft && sharpRight,
            "kl-rounded": !sharpLeft && !sharpRight
          }
        },
        "disabled:kl-pointer-events-none",
        {
          "kl-border-none": noBorder,
          ...!noBorder && {
            "kl-border-border-default disabled:kl-border-border-disabled": variant === "basic" || variant === "outline" || variant === "secondary-outline",
            "kl-border-border-primary disabled:kl-border-border-disabled": variant === "primary" || variant === "primary-outline",
            "kl-border-border-secondary disabled:kl-border-border-disabled": variant === "secondary",
            "kl-border-border-critical disabled:kl-border-border-disabled": variant === "critical-outline" || variant === "critical",
            "kl-border-border-purple": variant === "purple",
            "kl-border-border-warning": variant === "warning",
            "kl-border-border-tertiary": variant === "tertiary",
            "kl-border-none": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain",
            "kl-border": !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain")
          }
        },
        !disabled ? {
          "kl-bg-surface-basic-default hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && !selected,
          "kl-bg-surface-basic-pressed hover:kl-bg-surface-basic-pressed active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && selected,
          "kl-bg-surface-primary-default hover:kl-bg-surface-primary-hovered active:kl-bg-surface-primary-pressed disabled:kl-bg-surface-basic-default": variant === "primary",
          "kl-bg-surface-secondary-default hover:kl-bg-surface-secondary-hovered active:kl-bg-surface-secondary-pressed disabled:kl-bg-surface-basic-default": variant === "secondary",
          "kl-bg-surface-critical-default hover:kl-bg-surface-critical-hovered active:kl-bg-surface-critical-pressed disabled:kl-bg-surface-basic-default": variant === "critical",
          "kl-bg-none hover:kl-bg-surface-critical-subdued active:kl-bg-surface-critical-subdued": variant === "critical-outline",
          "kl-bg-none hover:kl-bg-surface-primary-subdued active:kl-bg-surface-primary-subdued": variant === "primary-outline",
          "kl-bg-none hover:kl-bg-surface-secondary-subdued active:kl-bg-surface-secondary-subdued": variant === "secondary-outline",
          "kl-bg-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "outline",
          "kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed hover:kl-shadow-button": variant === "outline" && selected,
          "kl-bg-none kl-shadow-none": (variant === "plain" || variant === "primary-plain" || variant === "secondary-plain" || variant === "critical-plain") && !iconOnly,
          "kl-shadow-none active:kl-shadow-button kl-bg-surface-basic-pressed": variant === "plain" && !iconOnly && selected,
          "kl-bg-none kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button active:kl-shadow-button": variant === "plain" && iconOnly,
          "kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button": variant === "plain" && iconOnly && selected,
          "kl-bg-surface-purple-default hover:kl-bg-surface-purple-hovered active:kl-bg-surface-purple-pressed": variant === "purple",
          "kl-bg-surface-tertiary-default hover:kl-bg-surface-tertiary-hovered active:kl-bg-surface-tertiary-pressed": variant === "tertiary",
          "kl-bg-surface-warning-default hover:kl-bg-surface-warning-hovered active:kl-bg-surface-warning-pressed": variant === "warning"
        } : {},
        {
          "kl-text-text-default": variant === "basic" || variant === "plain" || variant === "outline",
          "kl-text-text-on-primary": variant === "primary" || variant === "critical" || variant === "secondary" || variant === "secondary-outline" || variant === "purple" || variant === "warning",
          "kl-text-text-critical": variant === "critical-outline" || variant === "critical-plain",
          "kl-text-text-primary": variant === "primary-outline" || variant === "primary-plain",
          "kl-text-text-secondary": variant === "secondary-plain",
          "kl-text-text-on-secondary": variant === "tertiary"
        },
        {
          "focus:kl-underline": noRing
        },
        {
          "hover:kl-underline": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain"
        },
        {
          // icon
          ...!iconOnly && !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
            "kl-py-md kl-px-lg": size === "sm",
            "kl-py-lg kl-px-2xl": size === "md",
            "kl-py-xl kl-px-4xl": size === "lg",
            "kl-py-2xl kl-px-6xl": size === "xl",
            "kl-py-2xl kl-px-9xl": size === "2xl"
          }
        },
        {
          ...!iconOnly && (variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
            "kl-px-md kl-py-sm": size === "sm",
            "kl-py-sm kl-px-md": size === "md",
            "kl-py-md kl-px-lg": size === "lg"
          }
        },
        {
          "kl-p-lg !kl-h-[36px] !kl-w-[36px]": iconOnly && (size === "md" || size === "lg"),
          "kl-p-md": iconOnly && size === "sm",
          "kl-p-sm": iconOnly && size === "xs"
        },
        className
      ),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
          import_framer_motion.motion.span,
          {
            initial: { width: 0 },
            animate: { width: "auto", paddingRight: 0 },
            exit: { width: 0 },
            className: cn(
              "kl-flex kl-items-center kl-justify-center kl-aspect-square kl-overflow-hidden"
            ),
            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Spinner, { color: "currentColor", weight: 2, size: 18 }) })
          }
        ) }),
        !!prefix && import_react3.default.cloneElement(prefix, {
          size: iconSize || (iconOnly && size === "lg" ? 20 : 16),
          color: "currentColor"
        }),
        !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-block kl-truncate"), children: content }),
        !!suffix && import_react3.default.cloneElement(suffix, {
          size: iconSize || 16,
          color: "currentColor"
        })
      ]
    }
  );
});
var IconButton = import_react3.default.forwardRef(
  (props, ref) => {
    const { icon, block } = props;
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      ButtonBase,
      {
        ...props,
        ref,
        iconOnly: true,
        content: null,
        prefix: icon,
        block: !!block
      }
    );
  }
);
var Button = import_react3.default.forwardRef(
  (props, ref) => {
    const { block } = props;
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonBase, { ...props, iconOnly: false, ref, block: !!block });
  }
);

// components/molecule/popup.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Header = ({ children, showclose = true }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "kl-border-b kl-border-border-default kl-p-3xl kl-flex kl-flex-row kl-items-center kl-min-h-[69px]", children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Title, { className: "kl-headingLg kl-text-text-strong kl-flex-1", children }),
    showclose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconButton, { variant: "plain", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.X, {}) }) })
  ] });
};
var Content2 = ({
  children,
  className
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    "div",
    {
      className: cn(
        "kl-p-3xl kl-overscroll-y-auto kl-overflow-x-hidden kl-flex-1 md:kl-max-h-[65vh]",
        className
      ),
      children
    }
  );
};
var Form = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { ...props, className: "kl-flex-1 kl-flex kl-flex-col" });
};
var Footer = ({ children }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "kl-p-3xl kl-flex kl-flex-row kl-justify-end kl-gap-lg kl-bg-surface-basic-active", children });
};
var Button2 = (props) => {
  const { closable = false } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
    closable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...props }) }),
    !closable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...props })
  ] });
};
var PopupRoot = ({
  show = false,
  onOpenChange = () => {
  },
  children,
  backdrop = true,
  className = ""
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    Dialog.Root,
    {
      open: show,
      onOpenChange: (e) => {
        if (e) {
          onOpenChange(show);
        } else {
          onOpenChange(false);
        }
      },
      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion2.AnimatePresence, { children: show && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Dialog.Portal, { forceMount: true, children: [
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          import_framer_motion2.motion.div,
          {
            initial: { opacity: 0 },
            animate: { opacity: 1 },
            exit: { opacity: 0 },
            transition: { duration: 0.2, ease: "anticipate" },
            className: cn(
              "kl-fixed kl-inset-0 kl-z-[9999999]",
              backdrop ? "kl-bg-surface-basic-overlay-bg/60" : ""
            )
          }
        ) }),
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Content, { asChild: true, forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          import_framer_motion2.motion.div,
          {
            initial: { x: "-50%", y: "-47%", opacity: 0 },
            animate: { x: "-50%", y: "-50%", opacity: 1 },
            exit: { x: "-50%", y: "-47%", opacity: 0 },
            transition: { duration: 0.3, ease: "anticipate" },
            className: cn(
              "kl-flex kl-flex-col",
              "kl-z-[99999999] kl-outline-none kl-transform kl-overflow-hidden md:kl-rounded kl-bg-surface-basic-default kl-shadow-modal",
              "kl-fixed kl-top-1/2 kl-left-1/2",
              "kl-w-full kl-h-full md:!kl-h-auto md:kl-w-[612px]",
              "kl-border kl-border-border-default",
              className
            ),
            children
          }
        ) })
      ] }) })
    }
  );
};
var Popup = {
  Root: PopupRoot,
  Header,
  Content: Content2,
  Footer,
  Button: Button2,
  Form
};
var popup_default = Popup;