@aegov/design-system-react/dist/components/Modal/Modal.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDialog = require("@radix-ui/react-dialog");
var _react2 = require("@phosphor-icons/react");
var _utils = require("../../utils");
var _zod = require("zod");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const modalSchema = _zod.z.object({
  children: _zod.z.any(),
  title: _zod.z.string().optional(),
  size: _zod.z.enum(['sm', 'md', 'lg']).optional(),
  variant: _zod.z.enum(['default', 'danger']).optional(),
  className: _zod.z.string().optional(),
  trigger: _zod.z.any().optional()
});
const Modal = ({
  children,
  title,
  size = 'md',
  variant = 'default',
  className,
  trigger,
  ...props
}) => {
  const [open, setOpen] = (0, _react.useState)(false);
  const sizeClasses = {
    sm: 'sm:max-w-sm',
    md: 'sm:max-w-lg',
    lg: 'sm:max-w-xl'
  };
  return /*#__PURE__*/_react.default.createElement(_reactDialog.Root, {
    open: open,
    onOpenChange: setOpen
  }, trigger && /*#__PURE__*/_react.default.createElement(_reactDialog.Trigger, {
    asChild: true
  }, /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => setOpen(true)
  }, trigger)), /*#__PURE__*/_react.default.createElement(_reactDialog.Portal, null, /*#__PURE__*/_react.default.createElement(_reactDialog.Overlay, {
    className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
  }), /*#__PURE__*/_react.default.createElement(_reactDialog.Content, _extends({}, props, {
    className: (0, _utils.cn)("fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]", "w-full p-5", "bg-white rounded-lg shadow-lg", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", sizeClasses[size], className)
  }), title && /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center justify-between mb-6"
  }, /*#__PURE__*/_react.default.createElement(_reactDialog.Title, {
    className: "text-2xl font-semibold text-gray-900"
  }, title), /*#__PURE__*/_react.default.createElement(_reactDialog.Close, {
    className: "rounded-lg p-1.5 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400",
    onClick: () => setOpen(false)
  }, /*#__PURE__*/_react.default.createElement(_react2.X, {
    className: "h-5 w-5 text-gray-500"
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "sr-only"
  }, "Close"))), children)));
};
var _default = exports.default = Modal;