pragmate-ui/drawer/drawer.browser.mjs

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.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'pragmate-ui/icons';
import * as dependency_4 from 'pragmate-ui/base';
import * as dependency_5 from 'framer-motion';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/drawer"},"type":"code"}, import.meta.url).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"}];

export let CloseButton, useDrawerContext, Drawer;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'CloseButton') && (CloseButton = require ? require('./close-button').CloseButton : value);
    (require || prop === 'useDrawerContext') && (useDrawerContext = require ? require('./context').useDrawerContext : value);
    (require || prop === 'Drawer') && (Drawer = require ? require('./index').Drawer : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=drawer.browser.mjs.map