@kopexa/sight/dist/components/dialog/index.js

Kopexa Sight Design System — React component library for GRC applications

"use client";
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/dialog/index.ts
var dialog_exports = {};
__export(dialog_exports, {
  Dialog: () => Dialog,
  DialogBody: () => DialogBody,
  DialogClose: () => DialogClose,
  DialogCloseTrigger: () => DialogCloseTrigger,
  DialogContent: () => DialogContent,
  DialogDescription: () => DialogDescription,
  DialogFooter: () => DialogFooter,
  DialogHeader: () => DialogHeader,
  DialogOverlay: () => DialogOverlay,
  DialogPortal: () => DialogPortal,
  DialogRoot: () => DialogRoot,
  DialogTitle: () => DialogTitle,
  DialogTrigger: () => DialogTrigger,
  useDialogContext: () => useDialogContext
});
module.exports = __toCommonJS(dialog_exports);

// src/components/dialog/dialog.tsx
var import_dialog = require("@base-ui/react/dialog");
var import_icons = require("@kopexa/icons");
var import_react_utils = require("@kopexa/react-utils");
var import_shared_utils = require("@kopexa/shared-utils");
var import_theme = require("@kopexa/theme");
var import_use_controllable_state = require("@kopexa/use-controllable-state");
var import_jsx_runtime = require("react/jsx-runtime");
var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
var DialogRoot = (props) => {
  const {
    open: openProp,
    onOpenChange,
    size,
    radius,
    placement,
    scrollBehavior,
    ...restProps
  } = props;
  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
    value: openProp,
    onChange: onOpenChange,
    defaultValue: false
  });
  const styles = (0, import_theme.dialog)({ size, radius, placement, scrollBehavior });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_dialog.Dialog.Root,
    {
      "data-slot": "dialog",
      open,
      onOpenChange: (open2) => setOpen(open2),
      ...restProps
    }
  ) });
};
function DialogTrigger({ ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
}
function DialogPortal({ ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
}
function DialogClose({ ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
}
function DialogOverlay({ className, ...props }) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_dialog.Dialog.Backdrop,
    {
      "data-slot": "dialog-overlay",
      className: (0, import_shared_utils.cn)(styles.overlay(), className),
      ...props
    }
  );
}
function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      import_dialog.Dialog.Popup,
      {
        "data-slot": "dialog-content",
        className: (0, import_shared_utils.cn)(styles.content(), className),
        ...props,
        children: [
          children,
          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
            import_dialog.Dialog.Close,
            {
              "data-slot": "dialog-close",
              className: styles.close(),
              children: [
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}),
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
              ]
            }
          )
        ]
      }
    )
  ] });
}
function DialogHeader({ className, ...props }) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      "data-slot": "dialog-header",
      className: styles.header({ className }),
      ...props
    }
  );
}
function DialogFooter({ className, ...props }) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      "data-slot": "dialog-footer",
      className: styles.footer({ className }),
      ...props
    }
  );
}
function DialogBody({ className, ...props }) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      "data-slot": "dialog-body",
      className: styles.body({ className }),
      ...props
    }
  );
}
function DialogTitle({ className, ...props }) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_dialog.Dialog.Title,
    {
      "data-slot": "dialog-title",
      className: (0, import_shared_utils.cn)(styles.title(), className),
      ...props
    }
  );
}
function DialogDescription({
  className,
  ...props
}) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_dialog.Dialog.Description,
    {
      "data-slot": "dialog-description",
      className: (0, import_shared_utils.cn)(styles.description(), className),
      ...props
    }
  );
}
function DialogCloseTrigger({
  className,
  ...props
}) {
  const { styles } = useDialogContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_dialog.Dialog.Close,
    {
      "data-slot": "dialog-close-trigger",
      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
      ...props
    }
  );
}

// src/components/dialog/index.ts
var Dialog = Object.assign(DialogRoot, {
  Root: DialogRoot,
  Body: DialogBody,
  CloseTrigger: DialogCloseTrigger,
  Content: DialogContent,
  Description: DialogDescription,
  Footer: DialogFooter,
  Header: DialogHeader,
  Overlay: DialogOverlay,
  Portal: DialogPortal,
  Title: DialogTitle,
  Trigger: DialogTrigger
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Dialog,
  DialogBody,
  DialogClose,
  DialogCloseTrigger,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
  useDialogContext
});