@plasmicpkgs/plasmic-nav 0.0.5

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Plasmic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+Plasmic responsive navigation menu and registration calls.

package/dist/PlasmicNavigationBar.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentMeta, registerComponent } from "@plasmicapp/host";
+import { CanvasComponentProps } from "@plasmicapp/host/registerComponent";
+interface Props extends CanvasComponentProps {
+    brand?: React.ReactNode;
+    menuItems?: React.ReactNode;
+    className?: string;
+    closeButton?: React.ReactNode;
+    openButton?: React.ReactNode;
+    forceOpenMenu?: boolean;
+    itemsGap?: number;
+    responsiveBreakpoint?: number;
+}
+export declare function NavigationBar(props: Props): JSX.Element;
+export declare const navigationBarComponentMeta: ComponentMeta<Props>;
+export declare function registerNavigationBar(loader?: {
+    registerComponent: typeof registerComponent;
+}, customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>): void;
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./PlasmicNavigationBar";

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./plasmic-nav.cjs.production.min.js')
+} else {
+  module.exports = require('./plasmic-nav.cjs.development.js')
+}

package/dist/plasmic-nav.cjs.development.js

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var host = require('@plasmicapp/host');
+
+var CSSClasses = {
+  menuButton: "plasmic-nav-menu-button",
+  menuItemsContainer: "plasmic-nav-menu-items",
+  menuItemsContainerOpen: "plasmic-nav-menu-items-open"
+};
+var DEFAULT_GAP = 8;
+var DEFAULT_RESPONSIVE_BREAKPOINT = 768;
+function NavigationBar(props) {
+  var forceOpenMenu = props.forceOpenMenu;
+
+  var _React$useState = React.useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var inEditor = React.useContext(host.PlasmicCanvasContext);
+  var shouldRenderMenu = React.useMemo(function () {
+    if (inEditor && forceOpenMenu) {
+      return true;
+    }
+
+    return isOpen;
+  }, [inEditor, forceOpenMenu, isOpen]);
+
+  var toggleMenu = function toggleMenu() {
+    return setIsOpen(function (value) {
+      return !value;
+    });
+  }; // Parsing the gap manually to ensure it's a valid number
+  // as we are using it in dangerouslySetInnerHTML.
+
+
+  var gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);
+  var responsiveBreakpoint = safeParseNumber(props.responsiveBreakpoint, DEFAULT_RESPONSIVE_BREAKPOINT);
+  var cssStyles = React.useMemo(function () {
+    return minifyCss("\n    /* Shared Styles */\n    ." + CSSClasses.menuItemsContainer + " {\n      display: flex;\n    }\n    \n    ." + CSSClasses.menuItemsContainer + " > * {\n      flex: 0 0 auto;\n    }\n    \n    /* Desktop Styles */\n    @media (min-width: " + (responsiveBreakpoint + 1) + "px) {\n      ." + CSSClasses.menuButton + " {\n        display: none;\n      }\n    \n      ." + CSSClasses.menuItemsContainer + " {\n        flex-direction: row;\n        align-items: center;\n        width: auto;\n      }\n      ." + CSSClasses.menuItemsContainer + " > *:not(:first-child) {\n        margin-inline-start: " + gap + "px;\n      }\n    }\n    \n    /* Mobile Styles */\n    @media (max-width: " + responsiveBreakpoint + "px) {\n      ." + CSSClasses.menuButton + " {\n        unset: all;\n        -webkit-appearance: none;\n        min-width: 40px;\n        min-height: 40px;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        cursor: pointer;\n      }\n    \n      ." + CSSClasses.menuItemsContainer + ":not(." + CSSClasses.menuItemsContainerOpen + ") {\n        display: none;\n      }\n    \n      ." + CSSClasses.menuItemsContainer + " {\n        margin-top: 10px;\n        flex-direction: column;\n        flex-shrink: 0;\n        width: 100%;\n      }\n      ." + CSSClasses.menuItemsContainer + " > *:not(:first-child) {\n        margin-top: " + gap + "px;\n      }\n    }\n    ");
+  }, [gap, responsiveBreakpoint]);
+  return React.createElement("div", {
+    className: props.className
+  }, React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: cssStyles
+    }
+  }), React.createElement("div", null, props.brand), React.createElement("button", {
+    className: CSSClasses.menuButton,
+    onClick: toggleMenu,
+    tabIndex: 0,
+    "aria-expanded": shouldRenderMenu
+  }, shouldRenderMenu ? props.closeButton : props.openButton), React.createElement("nav", {
+    role: "menu",
+    className: (CSSClasses.menuItemsContainer + " " + (shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : "")).trim()
+  }, props.menuItems));
+}
+
+function safeParseNumber(input, defaultValue) {
+  if (defaultValue === void 0) {
+    defaultValue = 0;
+  }
+
+  var parsedValue = parseInt(input, 10);
+  return isNaN(parsedValue) ? defaultValue : parsedValue;
+}
+
+function minifyCss(input) {
+  return input.replace(/\s{2,}|\n/g, "") //  Remove spaces
+  .replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/g, ""); // Remove comments.
+}
+
+var navigationBarComponentMeta = {
+  name: "plasmic-navigation-bar",
+  displayName: "Navigation Bar",
+  importName: "NavigationBar",
+  importPath: "@plasmicpkgs/plasmic-nav",
+  props: {
+    // Properties
+    forceOpenMenu: {
+      displayName: "Force Open Menu",
+      description: "Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.",
+      type: "boolean"
+    },
+    itemsGap: {
+      displayName: "Items Gap",
+      description: "The width of the space between menu items in pixels.",
+      type: "number",
+      min: 0,
+      defaultValue: DEFAULT_GAP
+    },
+    responsiveBreakpoint: {
+      displayName: "Small Screens Breakpoint",
+      description: "The maximum screen width used for showing the small screens version of the menu.",
+      type: "number",
+      min: 0,
+      defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT
+    },
+    // Slots
+    brand: {
+      type: "slot",
+      defaultValue: [{
+        type: "hbox",
+        tag: "a",
+        attrs: {
+          href: "#"
+        },
+        styles: {
+          padding: "0px"
+        },
+        children: {
+          type: "img",
+          src: "",
+          styles: {
+            height: "50px"
+          }
+        }
+      }]
+    },
+    openButton: {
+      type: "slot",
+      defaultValue: {
+        type: "img",
+        src: "https://static1.plasmic.app/menu.svg"
+      }
+    },
+    closeButton: {
+      type: "slot",
+      defaultValue: {
+        type: "img",
+        src: "https://static1.plasmic.app/close.svg"
+      }
+    },
+    menuItems: {
+      type: "slot",
+      defaultValue: /*#__PURE__*/["Home", "About", "Contact"].map(function (title) {
+        return {
+          type: "text",
+          tag: "a",
+          attrs: {
+            href: "/"
+          },
+          styles: {
+            width: "auto"
+          },
+          value: title
+        };
+      })
+    }
+  },
+  defaultStyles: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "16px",
+    flexWrap: "wrap",
+    alignItems: "center",
+    marginBottom: "20px"
+  }
+};
+function registerNavigationBar(loader, customMetaProps) {
+  if (loader) {
+    loader.registerComponent(NavigationBar, customMetaProps != null ? customMetaProps : navigationBarComponentMeta);
+  } else {
+    host.registerComponent(NavigationBar, customMetaProps != null ? customMetaProps : navigationBarComponentMeta);
+  }
+}
+
+exports.NavigationBar = NavigationBar;
+exports.navigationBarComponentMeta = navigationBarComponentMeta;
+exports.registerNavigationBar = registerNavigationBar;
+//# sourceMappingURL=plasmic-nav.cjs.development.js.map

package/dist/plasmic-nav.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmic-nav.cjs.development.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ComponentMeta,\n  registerComponent,\n  PlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport { CanvasComponentProps } from \"@plasmicapp/host/registerComponent\";\n\ninterface Props extends CanvasComponentProps {\n  brand?: React.ReactNode;\n  menuItems?: React.ReactNode;\n  className?: string;\n  closeButton?: React.ReactNode;\n  openButton?: React.ReactNode;\n  forceOpenMenu?: boolean;\n  itemsGap?: number;\n  responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n  menuButton: \"plasmic-nav-menu-button\",\n  menuItemsContainer: \"plasmic-nav-menu-items\",\n  menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n  const { forceOpenMenu } = props;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const inEditor = React.useContext(PlasmicCanvasContext);\n\n  const shouldRenderMenu = React.useMemo(() => {\n    if (inEditor && forceOpenMenu) {\n      return true;\n    }\n\n    return isOpen;\n  }, [inEditor, forceOpenMenu, isOpen]);\n\n  const toggleMenu = () => setIsOpen((value) => !value);\n\n  // Parsing the gap manually to ensure it's a valid number\n  // as we are using it in dangerouslySetInnerHTML.\n  const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n  const responsiveBreakpoint = safeParseNumber(\n    props.responsiveBreakpoint,\n    DEFAULT_RESPONSIVE_BREAKPOINT\n  );\n\n  const cssStyles = React.useMemo(\n    () =>\n    minifyCss(`\n    /* Shared Styles */\n    .${CSSClasses.menuItemsContainer} {\n      display: flex;\n    }\n    \n    .${CSSClasses.menuItemsContainer} > * {\n      flex: 0 0 auto;\n    }\n    \n    /* Desktop Styles */\n    @media (min-width: ${responsiveBreakpoint + 1}px) {\n      .${CSSClasses.menuButton} {\n        display: none;\n      }\n    \n      .${CSSClasses.menuItemsContainer} {\n        flex-direction: row;\n        align-items: center;\n        width: auto;\n      }\n      .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n        margin-inline-start: ${gap}px;\n      }\n    }\n    \n    /* Mobile Styles */\n    @media (max-width: ${responsiveBreakpoint}px) {\n      .${CSSClasses.menuButton} {\n        unset: all;\n        -webkit-appearance: none;\n        min-width: 40px;\n        min-height: 40px;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        cursor: pointer;\n      }\n    \n      .${CSSClasses.menuItemsContainer}:not(.${CSSClasses.menuItemsContainerOpen}) {\n        display: none;\n      }\n    \n      .${CSSClasses.menuItemsContainer} {\n        margin-top: 10px;\n        flex-direction: column;\n        flex-shrink: 0;\n        width: 100%;\n      }\n      .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n        margin-top: ${gap}px;\n      }\n    }\n    `),\n    [gap, responsiveBreakpoint]\n  );\n\n  return (\n    <div className={props.className}>\n      <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n      <div>{props.brand}</div>\n      <button\n        className={CSSClasses.menuButton}\n        onClick={toggleMenu}\n        tabIndex={0}\n        aria-expanded={shouldRenderMenu}\n      >\n        {shouldRenderMenu ? props.closeButton : props.openButton}\n      </button>\n      <nav\n        role=\"menu\"\n        className={`${CSSClasses.menuItemsContainer} ${\n          shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n        }`.trim()}\n      >\n        {props.menuItems}\n      </nav>\n    </div>\n  );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n  const parsedValue = parseInt(input, 10);\n  return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n  return input\n    .replace(/\\s{2,}|\\n/g, \"\") //  Remove spaces\n    .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n  name: `plasmic-navigation-bar`,\n  displayName: \"Navigation Bar\",\n  importName: \"NavigationBar\",\n  importPath: \"@plasmicpkgs/plasmic-nav\",\n  props: {\n    // Properties\n    forceOpenMenu: {\n      displayName: \"Force Open Menu\",\n      description: \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n      type: \"boolean\",\n    },\n    itemsGap: {\n      displayName: \"Items Gap\",\n      description: \"The width of the space between menu items in pixels.\",\n      type: \"number\",\n      min: 0,\n      defaultValue: DEFAULT_GAP,\n    },\n    responsiveBreakpoint: {\n      displayName: \"Small Screens Breakpoint\",\n      description: \"The maximum screen width used for showing the small screens version of the menu.\",\n      type: \"number\",\n      min: 0,\n      defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n    },\n\n    // Slots\n    brand: {\n      type: \"slot\",\n      defaultValue: [\n        {\n          type: \"hbox\",\n          tag: \"a\",\n          attrs: { href: \"#\" },\n          styles: { padding: \"0px\" },\n          children: {\n            type: \"img\",\n            src: \"\",\n            styles: { height: \"50px\" },\n          },\n        },\n      ],\n    },\n    openButton: {\n      type: \"slot\",\n      defaultValue: {\n        type: \"img\",\n        src: \"https://static1.plasmic.app/menu.svg\",\n      },\n    },\n    closeButton: {\n      type: \"slot\",\n      defaultValue: {\n        type: \"img\",\n        src: \"https://static1.plasmic.app/close.svg\",\n      },\n    },\n    menuItems: {\n      type: \"slot\",\n      defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n        type: \"text\",\n        tag: \"a\",\n        attrs: { href: \"/\" },\n        styles: { width: \"auto\" },\n        value: title,\n      })),\n    },\n  },\n  defaultStyles: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    width: \"100%\",\n    padding: \"16px\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    marginBottom: \"20px\",\n  },\n};\n\nexport function registerNavigationBar(\n  loader?: { registerComponent: typeof registerComponent },\n  customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n  if (loader) {\n    loader.registerComponent(\n      NavigationBar,\n      customMetaProps ?? navigationBarComponentMeta\n    );\n  } else {\n    registerComponent(\n      NavigationBar,\n      customMetaProps ?? navigationBarComponentMeta\n    );\n  }\n}\n"],"names":["CSSClasses","menuButton","menuItemsContainer","menuItemsContainerOpen","DEFAULT_GAP","DEFAULT_RESPONSIVE_BREAKPOINT","NavigationBar","props","forceOpenMenu","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","toggleMenu","value","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","minifyCss","className","dangerouslySetInnerHTML","__html","brand","onClick","tabIndex","closeButton","openButton","role","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","replace","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","registerNavigationBar","loader","customMetaProps","registerComponent"],"mappings":"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"}

package/dist/plasmic-nav.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("@plasmicapp/host");function a(e){var a=e.forceOpenMenu,s=n.useState(!1),o=s[0],r=s[1],m=n.useContext(t.PlasmicCanvasContext),p=n.useMemo((function(){return!(!m||!a)||o}),[m,a,o]),l=i(e.itemsGap,8),u=i(e.responsiveBreakpoint,768),c=n.useMemo((function(){return("\n    /* Shared Styles */\n    .plasmic-nav-menu-items {\n      display: flex;\n    }\n    \n    .plasmic-nav-menu-items > * {\n      flex: 0 0 auto;\n    }\n    \n    /* Desktop Styles */\n    @media (min-width: "+(u+1)+"px) {\n      .plasmic-nav-menu-button {\n        display: none;\n      }\n    \n      .plasmic-nav-menu-items {\n        flex-direction: row;\n        align-items: center;\n        width: auto;\n      }\n      .plasmic-nav-menu-items > *:not(:first-child) {\n        margin-inline-start: "+l+"px;\n      }\n    }\n    \n    /* Mobile Styles */\n    @media (max-width: "+u+"px) {\n      .plasmic-nav-menu-button {\n        unset: all;\n        -webkit-appearance: none;\n        min-width: 40px;\n        min-height: 40px;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        cursor: pointer;\n      }\n    \n      .plasmic-nav-menu-items:not(.plasmic-nav-menu-items-open) {\n        display: none;\n      }\n    \n      .plasmic-nav-menu-items {\n        margin-top: 10px;\n        flex-direction: column;\n        flex-shrink: 0;\n        width: 100%;\n      }\n      .plasmic-nav-menu-items > *:not(:first-child) {\n        margin-top: "+l+"px;\n      }\n    }\n    ").replace(/\s{2,}|\n/g,"").replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/g,"")}),[l,u]);return n.createElement("div",{className:e.className},n.createElement("style",{dangerouslySetInnerHTML:{__html:c}}),n.createElement("div",null,e.brand),n.createElement("button",{className:"plasmic-nav-menu-button",onClick:function(){return r((function(e){return!e}))},tabIndex:0,"aria-expanded":p},p?e.closeButton:e.openButton),n.createElement("nav",{role:"menu",className:("plasmic-nav-menu-items "+(p?"plasmic-nav-menu-items-open":"")).trim()},e.menuItems))}function i(e,n){void 0===n&&(n=0);var t=parseInt(e,10);return isNaN(t)?n:t}var s={name:"plasmic-navigation-bar",displayName:"Navigation Bar",importName:"NavigationBar",importPath:"@plasmicpkgs/plasmic-nav",props:{forceOpenMenu:{displayName:"Force Open Menu",description:"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.",type:"boolean"},itemsGap:{displayName:"Items Gap",description:"The width of the space between menu items in pixels.",type:"number",min:0,defaultValue:8},responsiveBreakpoint:{displayName:"Small Screens Breakpoint",description:"The maximum screen width used for showing the small screens version of the menu.",type:"number",min:0,defaultValue:768},brand:{type:"slot",defaultValue:[{type:"hbox",tag:"a",attrs:{href:"#"},styles:{padding:"0px"},children:{type:"img",src:"",styles:{height:"50px"}}}]},openButton:{type:"slot",defaultValue:{type:"img",src:"https://static1.plasmic.app/menu.svg"}},closeButton:{type:"slot",defaultValue:{type:"img",src:"https://static1.plasmic.app/close.svg"}},menuItems:{type:"slot",defaultValue:["Home","About","Contact"].map((function(e){return{type:"text",tag:"a",attrs:{href:"/"},styles:{width:"auto"},value:e}}))}},defaultStyles:{display:"flex",flexDirection:"row",justifyContent:"space-between",width:"100%",padding:"16px",flexWrap:"wrap",alignItems:"center",marginBottom:"20px"}};exports.NavigationBar=a,exports.navigationBarComponentMeta=s,exports.registerNavigationBar=function(e,n){e?e.registerComponent(a,null!=n?n:s):t.registerComponent(a,null!=n?n:s)};
+//# sourceMappingURL=plasmic-nav.cjs.production.min.js.map

package/dist/plasmic-nav.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmic-nav.cjs.production.min.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ComponentMeta,\n  registerComponent,\n  PlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport { CanvasComponentProps } from \"@plasmicapp/host/registerComponent\";\n\ninterface Props extends CanvasComponentProps {\n  brand?: React.ReactNode;\n  menuItems?: React.ReactNode;\n  className?: string;\n  closeButton?: React.ReactNode;\n  openButton?: React.ReactNode;\n  forceOpenMenu?: boolean;\n  itemsGap?: number;\n  responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n  menuButton: \"plasmic-nav-menu-button\",\n  menuItemsContainer: \"plasmic-nav-menu-items\",\n  menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n  const { forceOpenMenu } = props;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const inEditor = React.useContext(PlasmicCanvasContext);\n\n  const shouldRenderMenu = React.useMemo(() => {\n    if (inEditor && forceOpenMenu) {\n      return true;\n    }\n\n    return isOpen;\n  }, [inEditor, forceOpenMenu, isOpen]);\n\n  const toggleMenu = () => setIsOpen((value) => !value);\n\n  // Parsing the gap manually to ensure it's a valid number\n  // as we are using it in dangerouslySetInnerHTML.\n  const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n  const responsiveBreakpoint = safeParseNumber(\n    props.responsiveBreakpoint,\n    DEFAULT_RESPONSIVE_BREAKPOINT\n  );\n\n  const cssStyles = React.useMemo(\n    () =>\n    minifyCss(`\n    /* Shared Styles */\n    .${CSSClasses.menuItemsContainer} {\n      display: flex;\n    }\n    \n    .${CSSClasses.menuItemsContainer} > * {\n      flex: 0 0 auto;\n    }\n    \n    /* Desktop Styles */\n    @media (min-width: ${responsiveBreakpoint + 1}px) {\n      .${CSSClasses.menuButton} {\n        display: none;\n      }\n    \n      .${CSSClasses.menuItemsContainer} {\n        flex-direction: row;\n        align-items: center;\n        width: auto;\n      }\n      .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n        margin-inline-start: ${gap}px;\n      }\n    }\n    \n    /* Mobile Styles */\n    @media (max-width: ${responsiveBreakpoint}px) {\n      .${CSSClasses.menuButton} {\n        unset: all;\n        -webkit-appearance: none;\n        min-width: 40px;\n        min-height: 40px;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        cursor: pointer;\n      }\n    \n      .${CSSClasses.menuItemsContainer}:not(.${CSSClasses.menuItemsContainerOpen}) {\n        display: none;\n      }\n    \n      .${CSSClasses.menuItemsContainer} {\n        margin-top: 10px;\n        flex-direction: column;\n        flex-shrink: 0;\n        width: 100%;\n      }\n      .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n        margin-top: ${gap}px;\n      }\n    }\n    `),\n    [gap, responsiveBreakpoint]\n  );\n\n  return (\n    <div className={props.className}>\n      <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n      <div>{props.brand}</div>\n      <button\n        className={CSSClasses.menuButton}\n        onClick={toggleMenu}\n        tabIndex={0}\n        aria-expanded={shouldRenderMenu}\n      >\n        {shouldRenderMenu ? props.closeButton : props.openButton}\n      </button>\n      <nav\n        role=\"menu\"\n        className={`${CSSClasses.menuItemsContainer} ${\n          shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n        }`.trim()}\n      >\n        {props.menuItems}\n      </nav>\n    </div>\n  );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n  const parsedValue = parseInt(input, 10);\n  return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n  return input\n    .replace(/\\s{2,}|\\n/g, \"\") //  Remove spaces\n    .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n  name: `plasmic-navigation-bar`,\n  displayName: \"Navigation Bar\",\n  importName: \"NavigationBar\",\n  importPath: \"@plasmicpkgs/plasmic-nav\",\n  props: {\n    // Properties\n    forceOpenMenu: {\n      displayName: \"Force Open Menu\",\n      description: \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n      type: \"boolean\",\n    },\n    itemsGap: {\n      displayName: \"Items Gap\",\n      description: \"The width of the space between menu items in pixels.\",\n      type: \"number\",\n      min: 0,\n      defaultValue: DEFAULT_GAP,\n    },\n    responsiveBreakpoint: {\n      displayName: \"Small Screens Breakpoint\",\n      description: \"The maximum screen width used for showing the small screens version of the menu.\",\n      type: \"number\",\n      min: 0,\n      defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n    },\n\n    // Slots\n    brand: {\n      type: \"slot\",\n      defaultValue: [\n        {\n          type: \"hbox\",\n          tag: \"a\",\n          attrs: { href: \"#\" },\n          styles: { padding: \"0px\" },\n          children: {\n            type: \"img\",\n            src: \"\",\n            styles: { height: \"50px\" },\n          },\n        },\n      ],\n    },\n    openButton: {\n      type: \"slot\",\n      defaultValue: {\n        type: \"img\",\n        src: \"https://static1.plasmic.app/menu.svg\",\n      },\n    },\n    closeButton: {\n      type: \"slot\",\n      defaultValue: {\n        type: \"img\",\n        src: \"https://static1.plasmic.app/close.svg\",\n      },\n    },\n    menuItems: {\n      type: \"slot\",\n      defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n        type: \"text\",\n        tag: \"a\",\n        attrs: { href: \"/\" },\n        styles: { width: \"auto\" },\n        value: title,\n      })),\n    },\n  },\n  defaultStyles: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    width: \"100%\",\n    padding: \"16px\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    marginBottom: \"20px\",\n  },\n};\n\nexport function registerNavigationBar(\n  loader?: { registerComponent: typeof registerComponent },\n  customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n  if (loader) {\n    loader.registerComponent(\n      NavigationBar,\n      customMetaProps ?? navigationBarComponentMeta\n    );\n  } else {\n    registerComponent(\n      NavigationBar,\n      customMetaProps ?? navigationBarComponentMeta\n    );\n  }\n}\n"],"names":["NavigationBar","props","forceOpenMenu","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","replace","className","dangerouslySetInnerHTML","__html","brand","onClick","value","tabIndex","closeButton","openButton","role","CSSClasses","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","loader","customMetaProps","registerComponent"],"mappings":"uLA2BgBA,EAAcC,OACpBC,EAAkBD,EAAlBC,gBACoBC,EAAMC,UAAS,GAApCC,OAAQC,OACTC,EAAWJ,EAAMK,WAAWC,wBAE5BC,EAAmBP,EAAMQ,SAAQ,oBACjCJ,IAAYL,IAITG,IACN,CAACE,EAAUL,EAAeG,IAMvBO,EAAMC,EAAgBZ,EAAMa,SAnBhB,GAoBZC,EAAuBF,EAC3BZ,EAAMc,qBApB4B,KAwB9BC,EAAYb,EAAMQ,SACtB,2OAYqBI,EAAuB,sSAWjBH,gFAKNG,isBA2BHH,+BAsCjBK,QAAQ,aAAc,IACtBA,QAAQ,oCAAqC,MAnC9C,CAACL,EAAKG,WAINZ,uBAAKe,UAAWjB,EAAMiB,WACpBf,yBAAOgB,wBAAyB,CAAEC,OAAQJ,KAC1Cb,2BAAMF,EAAMoB,OACZlB,0BACEe,UAlGM,0BAmGNI,QA/Ea,kBAAMhB,GAAU,SAACiB,UAAWA,MAgFzCC,SAAU,kBACKd,GAEdA,EAAmBT,EAAMwB,YAAcxB,EAAMyB,YAEhDvB,uBACEwB,KAAK,OACLT,WAAcU,2BACZlB,EA1GgB,8BA0GuC,KACtDmB,QAEF5B,EAAM6B,YAMf,SAASjB,EAAgBkB,EAAYC,YAAAA,IAAAA,EAAuB,OACpDC,EAAcC,SAASH,EAAO,WAC7BI,MAAMF,GAAeD,EAAeC,MAShCG,EAAmD,CAC9DC,8BACAC,YAAa,iBACbC,WAAY,gBACZC,WAAY,2BACZvC,MAAO,CAELC,cAAe,CACboC,YAAa,kBACbG,YAAa,sLACbC,KAAM,WAER5B,SAAU,CACRwB,YAAa,YACbG,YAAa,uDACbC,KAAM,SACNC,IAAK,EACLX,aA5Ic,GA8IhBjB,qBAAsB,CACpBuB,YAAa,2BACbG,YAAa,mFACbC,KAAM,SACNC,IAAK,EACLX,aAlJgC,KAsJlCX,MAAO,CACLqB,KAAM,OACNV,aAAc,CACZ,CACEU,KAAM,OACNE,IAAK,IACLC,MAAO,CAAEC,KAAM,KACfC,OAAQ,CAAEC,QAAS,OACnBC,SAAU,CACRP,KAAM,MACNQ,IAAK,GACLH,OAAQ,CAAEI,OAAQ,YAK1BzB,WAAY,CACVgB,KAAM,OACNV,aAAc,CACZU,KAAM,MACNQ,IAAK,yCAGTzB,YAAa,CACXiB,KAAM,OACNV,aAAc,CACZU,KAAM,MACNQ,IAAK,0CAGTpB,UAAW,CACTY,KAAM,OACNV,aAAc,CAAC,OAAQ,QAAS,WAAWoB,KAAI,SAACC,SAAW,CACzDX,KAAM,OACNE,IAAK,IACLC,MAAO,CAAEC,KAAM,KACfC,OAAQ,CAAEO,MAAO,QACjB/B,MAAO8B,QAIbE,cAAe,CACbC,QAAS,OACTC,cAAe,MACfC,eAAgB,gBAChBJ,MAAO,OACPN,QAAS,OACTW,SAAU,OACVC,WAAY,SACZC,aAAc,6GAKhBC,EACAC,GAEID,EACFA,EAAOE,kBACLhE,QACA+D,EAAAA,EAAmB3B,GAGrB4B,oBACEhE,QACA+D,EAAAA,EAAmB3B"}

package/dist/plasmic-nav.esm.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import { PlasmicCanvasContext, registerComponent } from '@plasmicapp/host';
+
+var CSSClasses = {
+  menuButton: "plasmic-nav-menu-button",
+  menuItemsContainer: "plasmic-nav-menu-items",
+  menuItemsContainerOpen: "plasmic-nav-menu-items-open"
+};
+var DEFAULT_GAP = 8;
+var DEFAULT_RESPONSIVE_BREAKPOINT = 768;
+function NavigationBar(props) {
+  var forceOpenMenu = props.forceOpenMenu;
+
+  var _React$useState = React.useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var inEditor = React.useContext(PlasmicCanvasContext);
+  var shouldRenderMenu = React.useMemo(function () {
+    if (inEditor && forceOpenMenu) {
+      return true;
+    }
+
+    return isOpen;
+  }, [inEditor, forceOpenMenu, isOpen]);
+
+  var toggleMenu = function toggleMenu() {
+    return setIsOpen(function (value) {
+      return !value;
+    });
+  }; // Parsing the gap manually to ensure it's a valid number
+  // as we are using it in dangerouslySetInnerHTML.
+
+
+  var gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);
+  var responsiveBreakpoint = safeParseNumber(props.responsiveBreakpoint, DEFAULT_RESPONSIVE_BREAKPOINT);
+  var cssStyles = React.useMemo(function () {
+    return minifyCss("\n    /* Shared Styles */\n    ." + CSSClasses.menuItemsContainer + " {\n      display: flex;\n    }\n    \n    ." + CSSClasses.menuItemsContainer + " > * {\n      flex: 0 0 auto;\n    }\n    \n    /* Desktop Styles */\n    @media (min-width: " + (responsiveBreakpoint + 1) + "px) {\n      ." + CSSClasses.menuButton + " {\n        display: none;\n      }\n    \n      ." + CSSClasses.menuItemsContainer + " {\n        flex-direction: row;\n        align-items: center;\n        width: auto;\n      }\n      ." + CSSClasses.menuItemsContainer + " > *:not(:first-child) {\n        margin-inline-start: " + gap + "px;\n      }\n    }\n    \n    /* Mobile Styles */\n    @media (max-width: " + responsiveBreakpoint + "px) {\n      ." + CSSClasses.menuButton + " {\n        unset: all;\n        -webkit-appearance: none;\n        min-width: 40px;\n        min-height: 40px;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        cursor: pointer;\n      }\n    \n      ." + CSSClasses.menuItemsContainer + ":not(." + CSSClasses.menuItemsContainerOpen + ") {\n        display: none;\n      }\n    \n      ." + CSSClasses.menuItemsContainer + " {\n        margin-top: 10px;\n        flex-direction: column;\n        flex-shrink: 0;\n        width: 100%;\n      }\n      ." + CSSClasses.menuItemsContainer + " > *:not(:first-child) {\n        margin-top: " + gap + "px;\n      }\n    }\n    ");
+  }, [gap, responsiveBreakpoint]);
+  return React.createElement("div", {
+    className: props.className
+  }, React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: cssStyles
+    }
+  }), React.createElement("div", null, props.brand), React.createElement("button", {
+    className: CSSClasses.menuButton,
+    onClick: toggleMenu,
+    tabIndex: 0,
+    "aria-expanded": shouldRenderMenu
+  }, shouldRenderMenu ? props.closeButton : props.openButton), React.createElement("nav", {
+    role: "menu",
+    className: (CSSClasses.menuItemsContainer + " " + (shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : "")).trim()
+  }, props.menuItems));
+}
+
+function safeParseNumber(input, defaultValue) {
+  if (defaultValue === void 0) {
+    defaultValue = 0;
+  }
+
+  var parsedValue = parseInt(input, 10);
+  return isNaN(parsedValue) ? defaultValue : parsedValue;
+}
+
+function minifyCss(input) {
+  return input.replace(/\s{2,}|\n/g, "") //  Remove spaces
+  .replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/g, ""); // Remove comments.
+}
+
+var navigationBarComponentMeta = {
+  name: "plasmic-navigation-bar",
+  displayName: "Navigation Bar",
+  importName: "NavigationBar",
+  importPath: "@plasmicpkgs/plasmic-nav",
+  props: {
+    // Properties
+    forceOpenMenu: {
+      displayName: "Force Open Menu",
+      description: "Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.",
+      type: "boolean"
+    },
+    itemsGap: {
+      displayName: "Items Gap",
+      description: "The width of the space between menu items in pixels.",
+      type: "number",
+      min: 0,
+      defaultValue: DEFAULT_GAP
+    },
+    responsiveBreakpoint: {
+      displayName: "Small Screens Breakpoint",
+      description: "The maximum screen width used for showing the small screens version of the menu.",
+      type: "number",
+      min: 0,
+      defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT
+    },
+    // Slots
+    brand: {
+      type: "slot",
+      defaultValue: [{
+        type: "hbox",
+        tag: "a",
+        attrs: {
+          href: "#"
+        },
+        styles: {
+          padding: "0px"
+        },
+        children: {
+          type: "img",
+          src: "",
+          styles: {
+            height: "50px"
+          }
+        }
+      }]
+    },
+    openButton: {
+      type: "slot",
+      defaultValue: {
+        type: "img",
+        src: "https://static1.plasmic.app/menu.svg"
+      }
+    },
+    closeButton: {
+      type: "slot",
+      defaultValue: {
+        type: "img",
+        src: "https://static1.plasmic.app/close.svg"
+      }
+    },
+    menuItems: {
+      type: "slot",
+      defaultValue: /*#__PURE__*/["Home", "About", "Contact"].map(function (title) {
+        return {
+          type: "text",
+          tag: "a",
+          attrs: {
+            href: "/"
+          },
+          styles: {
+            width: "auto"
+          },
+          value: title
+        };
+      })
+    }
+  },
+  defaultStyles: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "16px",
+    flexWrap: "wrap",
+    alignItems: "center",
+    marginBottom: "20px"
+  }
+};
+function registerNavigationBar(loader, customMetaProps) {
+  if (loader) {
+    loader.registerComponent(NavigationBar, customMetaProps != null ? customMetaProps : navigationBarComponentMeta);
+  } else {
+    registerComponent(NavigationBar, customMetaProps != null ? customMetaProps : navigationBarComponentMeta);
+  }
+}
+
+export { NavigationBar, navigationBarComponentMeta, registerNavigationBar };
+//# sourceMappingURL=plasmic-nav.esm.js.map

package/dist/plasmic-nav.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmic-nav.esm.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ComponentMeta,\n  registerComponent,\n  PlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport { CanvasComponentProps } from \"@plasmicapp/host/registerComponent\";\n\ninterface Props extends CanvasComponentProps {\n  brand?: React.ReactNode;\n  menuItems?: React.ReactNode;\n  className?: string;\n  closeButton?: React.ReactNode;\n  openButton?: React.ReactNode;\n  forceOpenMenu?: boolean;\n  itemsGap?: number;\n  responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n  menuButton: \"plasmic-nav-menu-button\",\n  menuItemsContainer: \"plasmic-nav-menu-items\",\n  menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n  const { forceOpenMenu } = props;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const inEditor = React.useContext(PlasmicCanvasContext);\n\n  const shouldRenderMenu = React.useMemo(() => {\n    if (inEditor && forceOpenMenu) {\n      return true;\n    }\n\n    return isOpen;\n  }, [inEditor, forceOpenMenu, isOpen]);\n\n  const toggleMenu = () => setIsOpen((value) => !value);\n\n  // Parsing the gap manually to ensure it's a valid number\n  // as we are using it in dangerouslySetInnerHTML.\n  const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n  const responsiveBreakpoint = safeParseNumber(\n    props.responsiveBreakpoint,\n    DEFAULT_RESPONSIVE_BREAKPOINT\n  );\n\n  const cssStyles = React.useMemo(\n    () =>\n    minifyCss(`\n    /* Shared Styles */\n    .${CSSClasses.menuItemsContainer} {\n      display: flex;\n    }\n    \n    .${CSSClasses.menuItemsContainer} > * {\n      flex: 0 0 auto;\n    }\n    \n    /* Desktop Styles */\n    @media (min-width: ${responsiveBreakpoint + 1}px) {\n      .${CSSClasses.menuButton} {\n        display: none;\n      }\n    \n      .${CSSClasses.menuItemsContainer} {\n        flex-direction: row;\n        align-items: center;\n        width: auto;\n      }\n      .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n        margin-inline-start: ${gap}px;\n      }\n    }\n    \n    /* Mobile Styles */\n    @media (max-width: ${responsiveBreakpoint}px) {\n      .${CSSClasses.menuButton} {\n        unset: all;\n        -webkit-appearance: none;\n        min-width: 40px;\n        min-height: 40px;\n        padding: 0;\n        margin: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        cursor: pointer;\n      }\n    \n      .${CSSClasses.menuItemsContainer}:not(.${CSSClasses.menuItemsContainerOpen}) {\n        display: none;\n      }\n    \n      .${CSSClasses.menuItemsContainer} {\n        margin-top: 10px;\n        flex-direction: column;\n        flex-shrink: 0;\n        width: 100%;\n      }\n      .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n        margin-top: ${gap}px;\n      }\n    }\n    `),\n    [gap, responsiveBreakpoint]\n  );\n\n  return (\n    <div className={props.className}>\n      <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n      <div>{props.brand}</div>\n      <button\n        className={CSSClasses.menuButton}\n        onClick={toggleMenu}\n        tabIndex={0}\n        aria-expanded={shouldRenderMenu}\n      >\n        {shouldRenderMenu ? props.closeButton : props.openButton}\n      </button>\n      <nav\n        role=\"menu\"\n        className={`${CSSClasses.menuItemsContainer} ${\n          shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n        }`.trim()}\n      >\n        {props.menuItems}\n      </nav>\n    </div>\n  );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n  const parsedValue = parseInt(input, 10);\n  return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n  return input\n    .replace(/\\s{2,}|\\n/g, \"\") //  Remove spaces\n    .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n  name: `plasmic-navigation-bar`,\n  displayName: \"Navigation Bar\",\n  importName: \"NavigationBar\",\n  importPath: \"@plasmicpkgs/plasmic-nav\",\n  props: {\n    // Properties\n    forceOpenMenu: {\n      displayName: \"Force Open Menu\",\n      description: \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n      type: \"boolean\",\n    },\n    itemsGap: {\n      displayName: \"Items Gap\",\n      description: \"The width of the space between menu items in pixels.\",\n      type: \"number\",\n      min: 0,\n      defaultValue: DEFAULT_GAP,\n    },\n    responsiveBreakpoint: {\n      displayName: \"Small Screens Breakpoint\",\n      description: \"The maximum screen width used for showing the small screens version of the menu.\",\n      type: \"number\",\n      min: 0,\n      defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n    },\n\n    // Slots\n    brand: {\n      type: \"slot\",\n      defaultValue: [\n        {\n          type: \"hbox\",\n          tag: \"a\",\n          attrs: { href: \"#\" },\n          styles: { padding: \"0px\" },\n          children: {\n            type: \"img\",\n            src: \"\",\n            styles: { height: \"50px\" },\n          },\n        },\n      ],\n    },\n    openButton: {\n      type: \"slot\",\n      defaultValue: {\n        type: \"img\",\n        src: \"https://static1.plasmic.app/menu.svg\",\n      },\n    },\n    closeButton: {\n      type: \"slot\",\n      defaultValue: {\n        type: \"img\",\n        src: \"https://static1.plasmic.app/close.svg\",\n      },\n    },\n    menuItems: {\n      type: \"slot\",\n      defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n        type: \"text\",\n        tag: \"a\",\n        attrs: { href: \"/\" },\n        styles: { width: \"auto\" },\n        value: title,\n      })),\n    },\n  },\n  defaultStyles: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    width: \"100%\",\n    padding: \"16px\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    marginBottom: \"20px\",\n  },\n};\n\nexport function registerNavigationBar(\n  loader?: { registerComponent: typeof registerComponent },\n  customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n  if (loader) {\n    loader.registerComponent(\n      NavigationBar,\n      customMetaProps ?? navigationBarComponentMeta\n    );\n  } else {\n    registerComponent(\n      NavigationBar,\n      customMetaProps ?? navigationBarComponentMeta\n    );\n  }\n}\n"],"names":["CSSClasses","menuButton","menuItemsContainer","menuItemsContainerOpen","DEFAULT_GAP","DEFAULT_RESPONSIVE_BREAKPOINT","NavigationBar","props","forceOpenMenu","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","toggleMenu","value","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","minifyCss","className","dangerouslySetInnerHTML","__html","brand","onClick","tabIndex","closeButton","openButton","role","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","replace","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","registerNavigationBar","loader","customMetaProps","registerComponent"],"mappings":"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"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@plasmicpkgs/plasmic-nav",
+  "version": "0.0.5",
+  "description": "Plasmic mobile navigation menu and registration calls",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/plasmic-nav.esm.js",
+  "files": [
+    "dist"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/plasmic-nav.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/plasmic-nav.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "scripts": {
+    "build": "tsdx build",
+    "start": "tsdx watch",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "yarn build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "devDependencies": {
+    "@plasmicapp/host": "1.0.9",
+    "@size-limit/preset-small-lib": "^4.11.0",
+    "@types/node": "^14.0.26",
+    "@types/react": "^17.0.40",
+    "size-limit": "^4.11.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.2.0",
+    "typescript": "^3.9.7"
+  },
+  "peerDependencies": {
+    "@plasmicapp/host": "^1.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "baa29770ee1efd556c2cbe8e6d6266325bf24af6"
+}