@kopexa/sight
Version:
Kopexa Sight Design System — React component library for GRC applications
214 lines (211 loc) • 6.56 kB
JavaScript
"use client";
;
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/namespace.ts
var namespace_exports = {};
__export(namespace_exports, {
Body: () => DialogBody,
Close: () => DialogClose,
CloseTrigger: () => DialogCloseTrigger,
Content: () => DialogContent,
Description: () => DialogDescription,
Footer: () => DialogFooter,
Header: () => DialogHeader,
Overlay: () => DialogOverlay,
Portal: () => DialogPortal,
Root: () => DialogRoot,
Title: () => DialogTitle,
Trigger: () => DialogTrigger
});
module.exports = __toCommonJS(namespace_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
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Body,
Close,
CloseTrigger,
Content,
Description,
Footer,
Header,
Overlay,
Portal,
Root,
Title,
Trigger
});