pragmate-ui/drawer/drawer.amd.js

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/icons", "pragmate-ui/base", "framer-motion"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.useDrawerContext = _exports.hmr = _exports.__beyond_pkg = _exports.Drawer = _exports.CloseButton = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/drawer"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['pragmate-ui/icons', dependency_3], ['pragmate-ui/base', dependency_4], ['framer-motion', dependency_5]]);
  brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/drawer');
  const ims = new Map();

  /****************************
  INTERNAL MODULE: ./animations
  ****************************/

  ims.set('./animations', {
    hash: 114192017,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.animations = void 0;
      const animations = exports.animations = {
        slideDown: {
          initial: {
            y: '-50%',
            opacity: 0
          },
          animate: {
            y: 0,
            opacity: 1,
            transition: {
              duration: 0.3
            }
          },
          exit: {
            y: '50%',
            opacity: 0,
            transition: {
              duration: 0.3
            }
          }
        },
        default: {
          initial: {
            opacity: 0
          },
          animate: {
            y: 0,
            opacity: 1,
            transition: {
              duration: 0.3
            }
          },
          exit: {
            y: '50%',
            opacity: 0,
            transition: {
              duration: 0.3
            }
          }
        },
        fadeInUpfadeOutLeft: {
          initial: {
            y: '-90%',
            opacity: 0
          },
          animate: {
            y: 0,
            opacity: 1,
            transition: {
              duration: 0.3
            }
          },
          exit: {
            x: '50%',
            opacity: 0,
            transition: {
              duration: 0.3
            }
          }
        }
      };
    }
  });

  /******************************
  INTERNAL MODULE: ./close-button
  ******************************/

  ims.set('./close-button', {
    hash: 1994997619,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.CloseButton = CloseButton;
      var _react = require("react");
      var _icons = require("pragmate-ui/icons");
      var _context = require("./context");
      /*bundle*/
      function CloseButton({
        className,
        onClick
      }) {
        const {
          onClose
        } = (0, _context.useDrawerContext)();
        const listener = event => {
          if (onClick) return onClick();
          onClose();
        };
        const cls = `pui-drawer-close-button circle${className ? ` ${className}` : ''}`;
        return _react.default.createElement(_icons.IconButton, {
          className: cls,
          icon: 'close',
          onClick: listener
        });
      }
    }
  });

  /*************************
  INTERNAL MODULE: ./context
  *************************/

  ims.set('./context', {
    hash: 3738712239,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useDrawerContext = exports.DrawerContext = void 0;
      var _react = require("react");
      const DrawerContext = exports.DrawerContext = _react.default.createContext({
        open: false,
        onClose: () => {}
      });
      /*bundle*/
      const useDrawerContext = () => {
        const context = _react.default.useContext(DrawerContext);
        if (!context) {
          throw new Error('useDrawerContext must be used within a DrawerProvider');
        }
        return context;
      };
      exports.useDrawerContext = useDrawerContext;
    }
  });

  /***********************
  INTERNAL MODULE: ./index
  ***********************/

  ims.set('./index', {
    hash: 2417431811,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Drawer = Drawer;
      var React = require("react");
      var _framerMotion = require("framer-motion");
      var _context = require("./context");
      const positionClasses = {
        left: 'pui-drawer-left',
        right: 'pui-drawer-right',
        top: 'pui-drawer-top',
        bottom: 'pui-drawer-bottom'
      };
      /*bundle*/
      function Drawer({
        className,
        position = 'left',
        open,
        onClose,
        children
      }) {
        let drawerClass = open ? `pui-drawer ${positionClasses[position]}` : 'pui-drawer hidden';
        if (className) drawerClass += ' ' + className;
        if (open) drawerClass += ` pui-drawer-open-${position}`;
        if (!open) return;
        const cls = `pui-drawer-container${className ? ` ${className}` : ''}`;
        const onClickContent = e => {
          e.stopPropagation();
        };
        return React.createElement(_context.DrawerContext.Provider, {
          value: {
            open,
            onClose
          }
        }, React.createElement(_framerMotion.motion.div, {
          className: cls,
          onClick: onClose
        }, React.createElement(_framerMotion.motion.div, {
          onClick: onClickContent,
          initial: {
            x: '+100vh',
            opacity: 0
          },
          animate: {
            x: 0,
            opacity: 1
          },
          exit: {
            x: '100vh',
            opacity: 0
          },
          transition: {
            duration: 0.3,
            ease: 'linear'
          },
          className: drawerClass
        }, React.createElement("div", {
          className: 'pui-drawer-content'
        }, children))));
      }
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./close-button",
    "from": "CloseButton",
    "name": "CloseButton"
  }, {
    "im": "./context",
    "from": "useDrawerContext",
    "name": "useDrawerContext"
  }, {
    "im": "./index",
    "from": "Drawer",
    "name": "Drawer"
  }];
  let CloseButton = _exports.CloseButton = void 0,
    useDrawerContext = _exports.useDrawerContext = void 0,
    Drawer = _exports.Drawer = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'CloseButton') && (_exports.CloseButton = CloseButton = require ? require('./close-button').CloseButton : value);
    (require || prop === 'useDrawerContext') && (_exports.useDrawerContext = useDrawerContext = require ? require('./context').useDrawerContext : value);
    (require || prop === 'Drawer') && (_exports.Drawer = Drawer = require ? require('./index').Drawer : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=drawer.amd.js.map